4. 控件 (component)
本阶段将从 toolbar_demo_checkpoint2 接续,在还未于 <android.support.v7.widget.Toolbar/> 标签中,自行添加元件的 toolbar 有几个大家常用的元素可以使用,请先见下图:
大抵来说,预设常用的几个元素就如图中所示,接着就依序来说明之:
1. setNavigationIcon
即设定 up button 的图标,因为 Material 的介面,在 Toolbar这里的 up button样式也就有別于过去的 ActionBar 哦。
1. setLogo
APP 的图标。
2. setTitle
主标题。
3. setSubtitle
副标题。
4. setOnMenuItemClickListener
设定菜单各按鈕的动作。
先來看到菜单外的代码,在 MainActivity.java 中:
先来看到
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
// App Logo toolbar.setLogo(R.drawable.ic_launcher); // Title toolbar.setTitle("My Title"); // Sub Title toolbar.setSubtitle("Sub title");
setSupportActionBar(toolbar);
// Navigation Icon 要設定在 setSupoortActionBar 才有作用 // 否則會出現 back button toolbar.setNavigationIcon(R.drawable.ab_android); |
这边要留意的是setNavigationIcon需要放在 setSupportActionBar之后才会生效。
菜单部分,需要先在res/menu/menu_main.xml左定义:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity">
<item android:id="@+id/action_edit" android:title="@string/action_edit" android:orderInCategory="80" android:icon="@drawable/ab_edit" app:showAsAction="ifRoom" />
<item android:id="@+id/action_share" android:title="@string/action_edit" android:orderInCategory="90" android:icon="@drawable/ab_share" app:showAsAction="ifRoom" />
<item android:id="@+id/action_settings" android:title="@string/action_settings" android:orderInCategory="100" app:showAsAction="never"/> </menu> |
再回到MainActivity.java 中加入OnMenuItemClickListener 的监听者:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | private Toolbar.OnMenuItemClickListener onMenuItemClick = new Toolbar.OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem menuItem) { String msg = ""; switch (menuItem.getItemId()) { case R.id.action_edit: msg += "Click edit"; break; case R.id.action_share: msg += "Click share"; break; case R.id.action_settings: msg += "Click setting"; break; }
if(!msg.equals("")) { Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show(); } return true; } }; |
将onMenuItemClick监听者设置给toolbar
1 2 3 4 5 6 | setSupportActionBar(toolbar);
...
// Menu item click 的監聽事件一樣要設定在 setSupportActionBar 才有作用 toolbar.setOnMenuItemClickListener(onMenuItemClick); |
和 setNavigationIcon 一样,需要將之设定在 setSupportActionBar 之后才有作用。执行上面的代码便会得到下面的界面。
完完整程序见:toolbar_demo_checkpoint3
5. 总结
在这样的架构设计下,ToolBar直接成了Layout中可以控制的东西,相对于过去的actionbar来说,设计与可操控性大幅提升。
本文上面的解释中用到的完成代码:toolbar demo check point 0 ~ 4,请到Github 取得。
最后再附上一个界面上常用的属性说明图:
这里按照图中从上到下的顺序做个简单的说明:
· colorPrimaryDark
§ 状态栏背景色。
§ 在 style 的属性中设置。
· textColorPrimary
§ App bar 上的标题与更多菜单中的文字颜色。
§ 在 style 的属性中设置。
· App bar 的背景色
§ Actionbar 的背景色设定在 style 中的 colorPrimary。
§ Toolbar 的背景色在layout文件中设置background属性。
· colorAccent
§ 各控制元件(如:check box、switch 或是 radoi) 被勾选 (checked) 或是选定 (selected) 的颜色。
§ 在 style 的属性中设置。
· colorControlNormal
§ 各控制元件的预设颜色。
§ 在 style 的属性中设置
· windowBackground
§ App 的背景色。
§ 在 style 的属性中设置
· navigationBarColor
§ 导航栏的背景色,但只能用在 API Level 21 (Android 5) 以上的版本
§ 在 style 的属性中设置
最后需要注意的是:使用material主题的时候,必须设定targetSdkVersion = 21,否则界面看起来是模糊的
转自:http://jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1118/2006.html
共同学习,写下你的评论
评论加载中...
作者其他优质文章