4. 控件 (component)
本阶段将从 toolbar_demo_checkpoint2 接续,在还未于 标签中,自行添加元件的 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
14Toolbar 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
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">
android:title="@string/action_edit"
android:orderInCategory="80"
android:icon="@drawable/ab_edit"
app:showAsAction="ifRoom" />
android:title="@string/action_edit"
android:orderInCategory="90"
android:icon="@drawable/ab_share"
app:showAsAction="ifRoom" />
android:title="@string/action_settings"
android:orderInCategory="100"
app:showAsAction="never"/>
再回到MainActivity.java 中加入OnMenuItemClickListener 的监听者:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22private 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监听者设置给toolbar1
2
3
4
5
6setSupportActionBar(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