參考博客地址:原博客地址
1.概述:
Android3.0 Android推了ActionBar這個控件,而到了2013年Google開始大力推動所謂的AndroidStyle,想要逐漸改善過去紛亂的android界面設(shè)計,希望讓Android終端使用者盡可能在android手機里有一個一致的體驗,ActionBar過去最多人使用的兩大套件就是ActionBarSharelock,及官方在support library v7里的AppCompat.
既然介紹Toolbar,也意味著官方在某些程度上認為ActionBar限制了android app的開發(fā)與設(shè)計的彈性,而在material design也對之做了名稱的定義:App bar,那么如何在android app中用toolbar這個控件來做出一個基本的app bar
2.基礎(chǔ)套用
2.1風格
風格要調(diào)整的地方有二:
- 一在res/values/styles.xml里面
- 二在res/values-21/styles.xml里面
為了之后的方便,先在values/styles.xml里增加一個名為AppTheme.Base的風格
<style name="AppTheme.Base" parent="Theme.AppCompat">
<item name="android:windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>
這里試用AndroidAPI22和以上要去掉"android:"否則會報錯
AppCompat does not support the current theme features: { windowActionBar: false, windowActionBarOverlay: false, android:windowIsFloating: false, windowActionModeOverlay: false, windowNoTitle: false }```
因為此范例只要用Toolbar,所以我們要讓原本的ActionBar隱藏起來,然后將原本的AppTheme的parent屬性改為上面的AppTheme.Base
### 2.2.界面
在activity_main里面添加
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:background="@android:color/white"
android:layout_height="wrap_content"
android:layout_width="match_parent">
</android.support.v7.widget.Toolbar>
###2.3Java程序
在Activity里面加入ToolBar聲明:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
##3.自定義顏色
- colorPrimaryDark(狀態(tài)欄底色):在風格(style)或者主題(Theme)里設(shè)定
- AppBar底色
這個設(shè)定分為二,若你的android app仍然是使用ActionBar,則直接在風格(style)或者主題(themes)里面設(shè)定colorPrimary參數(shù)即可;
可視若采用Toolbar的話,則要在界面(layout)里面設(shè)置Toolbar的background屬性.
- navigationBarColor(導航欄底色):僅能在API21+也就是Android5.0之后的版本使用,因此要將之設(shè)定在res/values-21/styles.xml里面
- 主視窗底色:windowBackground
所以我們在這里設(shè)置的地方有三,一是style中(res/values/styles.xml)
<style name="AppTheme.Base" parent="Theme.AppCompat">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:windowBackground">@color/windowBackground</item></style>
二是v21(res/values-v21/styles.xml)中
<style name="AppTheme" parent="AppTheme.Base">
<item name="android:navigationBarColor">@color/colorAccent</item>
</style>```
三是本篇主角Toolbar的background設(shè)定
<android.support.v7.widget.Toolbar
android:background="@color/toolbar"
android:id="@+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent">
</android.support.v7.widget.Toolbar>
toolbar是設(shè)定在activity_main.xml中,對其設(shè)定值background屬性可以設(shè)定為
android:background="?attr/colorPrimary"
這樣就可以沿用ActionBar的顏色設(shè)定了
4控件(Compoment)
大概來說,預(yù)設(shè)常用的幾個元素:
- setNavigationIcon:即設(shè)定up Button的圖標
- setLogo:設(shè)定APP的圖標
- setTitle:主標題
- setSubtitle:副標題
- setOnMenuItemClickListener:設(shè)定菜單各按鈕的動作
寫代碼
除了菜單以外的部分
Toolbar toolbar =(Toolbar)findViewById(R.id.toolbar);
//AppLogo
toolbar.setLogo(R.drawable.ic_launcher);
//Title
toolbar.setTitle(R.string.app_name);
//SubTitle
toolbar.setSubtitle("subtitle");
setSupportActionBar(toolbar);
//navigationIcon必須在setSupportActionBar之后才會有作用
//否則會出現(xiàn)backButton
toolbar.setNavigationIcon(R.drawable.ab_android);
菜單部分
需要先在res/menu/menu_main.xml作定義
<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=".ToolbarActivity" >
<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_share"
android:orderInCategory="90"
android:icon="@drawable/ab_share"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/action_setting"
android:title="@string/action_setting"
android:orderInCategory="100"
app:showAsAction="never"/>
</menu>
回到Activity寫OnMenuItemClickListener
public boolean onMenuItemClick(MenuItem item) {
String message = ""
switch (item.getItemId()){
case R.id.action_edit:
message += "";
break;
case R.id.action_share:
message += "";
break;
case R.id.action_setting:
message += "";
break;
}
if (!message.equals(""))
Toast.makeText(this,message,Toast.LENGTH_SHORT).show();
return true;
}
這個是讓Activity實現(xiàn)了OnMenuItemClickListener,復寫的方法,然后將這個監(jiān)聽器設(shè)置給Toolbar
toolbar.setOnMenuItemClickListener(this);
和 setNavigationIcon 一樣，需要將之設(shè)定在 setSupportActionBar 之后才有作用。
做個簡單的說明：
- colorPrimaryDark
狀態(tài)欄背景色贪壳。在 style 的屬性中設(shè)置筒愚。 - textColorPrimary
App bar 上的標題與更多菜單中的文字顏色。
在 style 的屬性中設(shè)置恢总。 - App bar 的背景色
Actionbar 的背景色設(shè)定在 style 中的 colorPrimary迎罗。
Toolbar 的背景色在layout文件中設(shè)置background屬性。 - colorAccent
各控制元件(如：check box片仿、switch 或是 radoi) 被勾選 (checked) 或是選定 (selected) 的顏色纹安。
在 style 的屬性中設(shè)置。 - colorControlNormal
各控制元件的預(yù)設(shè)顏色砂豌。
在 style 的屬性中設(shè)置 - windowBackground
App 的背景色厢岂。
在 style 的屬性中設(shè)置 - navigationBarColor
導航欄的背景色，但只能用在 API Level 21 (Android 5) 以上的版本
在 style 的屬性中設(shè)置
**最后需要注意的是：使用material主題的時候阳距，必須設(shè)定targetSdkVersion =21咪笑，否則界面看起來是模糊的 **
