Material Design之Toolbar
2017-02-08 11:29
447 查看
控件Toolbar 自定义标题栏
首先在 styles.xml 为 APP更换一个不带ActionBar的主题<resources> <!--选择主题,并且重写colorPrimary colorPrimaryDark colorAccent 属性 --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> </resources>
在activity_main.xml中指定一个新的命名空间:xmlns:app=”http://schemas.android.com/apk/res-auto” 新增命名空间是因为5.0之前的系统很多Material属性不存在,为了兼容低版本。
并且定义一个ToolBar控件
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </FrameLayout>
接下来修改MainActivity
先获得ToolBar的实例,在通过setSupportActionBar传入
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar); s 4000 etSupportActionBar(toolbar); }
现在运行app,我们得到了一个和默认ActionBar标题栏一样的但是具备MaterialDesign能力的ToolBar了。
现在来给Toolbar添加一些按钮。
在res目录下新建一个menu文件夹,在menu文件夹中New-Menu resource file 创建一个toolbar.xml文件,代码如下:
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/backup" android:icon="@drawable/ic_backup" android:title="Backup" app:showAsAction="always"/> <!-- always 永远显示在Toolbar中--> <item android:id="@+id/delete" android:icon="@drawable/ic_delete" android:title="Delete" app:showAsAction="ifRoom"/> <!--ifRoom 屏幕空间足够显示--> <item android:id="@+id/settings" android:icon="@drawable/ic_settings" android:title="Settings" app:showAsAction="never"/> <!--never 显示在菜单中--> </menu>
接下来修改MainActivity,先加载toolbar.xml文件,在onCreateOptionsMenu方法中:
@Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.toolbar,menu); return true; }
再给各个按钮添加点击事件,在onOptionsItemSelected方法中:
@Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()){ case R.id.backup: Toast.makeText(this, "返回", Toast.LENGTH_SHORT).show(); case R.id.delete: Toast.makeText(this, "删除", Toast.LENGTH_SHORT).show(); case R.id.settings: Toast.makeText(this, "设置", Toast.LENGTH_SHORT).show(); } return true; }
效果图,我们已经修改了应用名,以及在标题栏添加了三个按钮(因为屏幕空间问题只显示了一个按钮和菜单):
相关文章推荐
- Material Design学习笔记之Toolbar+DrawerLayout+PagerSlidingTabStrip
- Material Design之CollapsingToolbarLayout使用
- Android Material Design(5) CoordinatorLayout,AppBarLayout,Toolbar,CollapsingToolbarLayout的使用
- Material Design之自定义Material主题及Toolbar
- [Android | Material Design] ToolBar 通知栏变色处理小问题 笔记
- Android Material Design之Toolbar与Palette实践
- android开发 -- Android Toolbar 开发实践总结(Material Design)
- Android:Material Design之CollapsingToolbarLayout使用
- 第二行代码读书笔记--Material Design实践之ToolBar
- 一步一个脚印之学习Material Design第一篇(ToolBar)
- Material Design控件之Toolbar
- Android Material Design之Toolbar与Palette实践
- Android Material Design之Toolbar与Palette实践
- Material Design之Toolbar
- Material Design学习-----CollapsingToolbarLayout
- Android Material Design之Toolbar与Palette实践(转载)
- 【转】Material Design 折叠效果 Toolbar CollapsingToolbarLayout AppBarLayout
- Material Design:CoordinatorLayout,CollapsingToolbarLayout,AppBarLayou
- Android Material Design之Toolbar与Palette实践
- Material Design学习之CollapsingToolbarLayout