ToolBar使用教程(小白快速上手)
###ToolBar效果展示:(做工粗糙,有那個意思就行了)###
###概述:
在toolbar出來之前,對於標題欄的操作,小夥伴接觸比較多的應該是ActionBar了.這裡說明下啊,使用ToolBar能都實現和ActionBar 一樣的效果.那麼問題來了**,為什麼Google官方還要推薦toolbar來替代actionbar呢?**
**第一點,**要知道Google於2015年引入Material Design風格的控制元件，Android SDK中的ActionBar每個版本都會做一些改變, 所以在不同的系統上看起來可能會不一樣，導致嚴重的碎片化問題，於是谷歌在更新android-support-v7相容包時引入了ToolBar，用來替代ActionBar，它推薦開發者使用相容包中的ToolBar，而非SDK中的ActionBar，以期解決碎片化問題
**第二點,**還有一個原因就是ActionBar的可操作性比不上ToolBar.主要是因為toolbar的使用需要在layout.xml中進行定義,而actionbar的使用則不存在這種定義方式. 那麼當進行某些引數調節的時候,toolbar可能只需在xml佈局檔案中定義toolbar的時候新增一個屬性就可以了.而action則比較麻煩.這一點可以在
###使用方法:
Step1.
為了之後設定方便，我們先在 res/values/styles.xml 裡增加一個名為 AppTheme.Base 的風格
一在 res/values/styles.xml中,新增
<style name="AppTheme.Base" parent="Theme.AppCompat">
<!-- 如果報錯AppCompat does not support the current theme features....則去除字首 二在 /res/values-v21/styles.xml中
<!-- Base application theme. -->
<style name="AppTheme" parent="AppTheme.Base">
<!--Navigation bar color-->
<item name="android:navigationBarColor">@color/accent_material_light</item>
</style>
科普一下,正常情況下,當使用as新建一個工程時,style中預設主題中的引數指標的對應意義,瞭解一下.
<resources>
<!-- Base application theme. -->
<style name="Theme.AppCompat" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- 1.colorPrimary 應用的主要色調，actionBar預設使用該顏色，Toolbar導航欄的底色-->
<item name="colorPrimary">@color/colorPrimary</item>
<!-- 2.statusBarColor 狀態列(通知欄)顏色，預設使用colorPrimaryDark-->
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<!-- 3.colorAccent—控制元件選中後顏色-->
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
Step2.
在layout佈局中定義toolbar.
<!--todo android:background="?attr/colorPrimary"y沿用actionbar的顏色設定-->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:contentInsetStartWithNavigation="0dp">
</android.support.v7.widget.Toolbar>
請記得用 support v7 裡的 toolbar，不然然只有 API Level 21 也就是 Android 5.0 以上的版本才能使用。
Step3.
定義tool_menu.xml檔案,用於toolbar標題欄中各種action按鈕的展示.
<?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"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.example.zq.actionbardemo.ThirdActivity">
<item
android:id="@+id/action_query"
android:title="搜尋"
android:icon="@mipmap/ic_action_query"
app:showAsAction="always"
app:actionViewClass="android.widget.SearchView" />
<!--todo orderInCategory越大優先順序越低-->
<item
android:id="@+id/action_download"
android:title="下載"
android:icon="@mipmap/ic_action_download"
android:orderInCategory="100"
app:showAsAction="always" />
<item
android:id="@+id/action_edit"
android:title="編輯"
android:icon="@mipmap/ic_action_edit"
android:orderInCategory="90"
app:showAsAction="always" />
<item
android:id="@+id/action_delete"
android:title="刪除"
android:icon="@mipmap/ic_action_delete"
android:orderInCategory="80"
app:showAsAction="always" />
</menu>
Step4.
在MainActivity.java中載入toolbar的menu資源
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbar_menu,menu);
return super.onCreateOptionsMenu(menu);
}
Step5.
在 MainActivity.java 中加入 Toolbar 的宣告：
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = findViewById(R.id.toolbar);
// App Logo
toolbar.setLogo(R.mipmap.return_icon);
// Title
toolbar.setTitle("My Title");
// Sub Title
toolbar.setSubtitle("Sub title");
setSupportActionBar(toolbar);
// Navigation Icon 要設定在 setSupoortActionBar 才有作用
// 否則會出現 back button
toolbar.setNavigationIcon(R.mipmap.return_icon);
toolbar.setOnMenuItemClickListener(onMenuItemClick);
}
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_delete:
msg += "Click delete";
break;
case R.id.action_download:
msg += "Click download";
break;
}
if(!msg.equals("")) {
Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
}
return true;
}
};
對上述程式碼做簡要說明.
1.setNavigationIcon: 即設定 up button 的圖示，因為 Material 的介面，在 Toolbar這裡的 up button樣式也就有別於過去的 ActionBar 哦。
2. setLogo: APP 的圖示。
3. setTitle: 主標題。
4. setSubtitle: 副標題。
5. setOnMenuItemClickListener: 設定選單各按鈕的動作。
這邊要留意的是setNavigationIcon需要放在 setSupportActionBar之後才會生效。
#####最後對ToolBar中用於調節的各個引數指標進行總結下.
- 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 的屬性中設定
OK,完結.有疑問請留言.
另外給大家推薦一個比較好的參考博文,上面講的比較詳細.
android:ToolBar詳解（手把手教程）