第一步
將打算使用Toolbar的Activity繼承AppCompatActivity。為什么要讓Activity繼承這個類呢?我們來看下官方文檔對AppCompatActivity的介紹:You can add an ActionBar to your activity when running on API level 7 or higher by extending this class for your activity and setting the activity theme to Theme.AppCompat or a similar theme.就是說,我們可以通過繼承AppCompatActivity類和設置Theme.AppCompat主題,來使我們可以添加一個ActionBar。
public class MainActivity extends AppCompatActivity {
@Overrideprotected
void onCreate(Bundle savedInstanceState) {
...
}
}
第二步
設置Theme.AppCompat主題。Theme.AppCompat主題到底代表這什么呢,讓我們來看看Theme.AppCompat的官方文檔:Themes in the "Theme.AppCompat" family will contain an action bar by default. 就是說,"Theme.AppCompat"系列的主題都會默認包含一個ActionBar。"Theme.AppCompat"主題有兩個子主題,我們會用到:
- "Theme.AppCompat.Light.NoActionBar"主題,當設置為這個主題時,Activity將沒有默認的Actionbar。源代碼如下
<style name="Theme.AppCompat.Light.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
- "Theme.AppCompat.Light.NoActionBar"主題,這個主題Activity也沒有Action Bar,同時Activity背景變成了深色。
<style name="Theme.AppCompat.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
當然我們并不是直接使用系統(tǒng)提供的Theme,而是繼承某個Theme,進行一定程度的自定義。我們在styles.xml寫下如下代碼:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!--colorPrimary主要負責的是App Bar的背景顏色 -->
<item name="colorPrimary">@color/colorPrimary</item>
<!--colorPrimaryDark主要負責的是狀態(tài)欄status bar的背景顏色 -->
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<!--colorAccent主要負責的是某些選擇控件的背景顏色 -->
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
第三步
將剛剛自定義的Theme,在menifest.xml文件中的Application標簽中聲明,也可以在Activity標簽中聲明;
<menifest...>
...
<Application
...
android:theme="@style/Apptheme">
...
</Application>
</menifest>
第四步
在Activity的布局文件中添加Toolbar
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
/>
?attr/actionBarsize 是指使用Theme中該屬性actionBarSize的值。
第五步
在Java代碼中添加Toolbar,并且可以通過Java語句添加App圖標,導航圖標,主標題,副標題,自定義內(nèi)容等等??梢酝ㄟ^查閱Toolbar官方文檔來深入學習。下面的代碼是位于該Activity的onCreate()方法中。
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setLogo(R.mipmap.ic_launcher);
toolbar.setTitle("我是主標題");
toolbar.setSubtitle("我是副標題");
toolbar.setNavigationIcon(R.mipmap.ic_launcher);
toolbar.inflateMenu(R.menu.menu_main);
第六步
添加Toolbar上的菜單。首先在res/menu文件夾中添加menu_main.xml文件,menu_main.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"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity"
>
<item android:id="@+id/action_edit"
android:title="編輯"
android:orderInCategory="80"
android:icon="@drawable/ic_menu_home"
app:showAsAction="always"/>
<item
android:id="@+id/action_setting"
android:title="分享"
android:orderInCategory="90"
app:showAsAction="never"/>
<item
android:id="@+id/action_share"
android:title="設置"
android:orderInCategory="100"
app:showAsAction="never"/>
</menu>
然后在Java代碼中將其添加到toolbar中,并為toolbar添加點擊事件,下面的代碼也在Activity的onCreate()方法中。
onMenuItemClickListener = new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
String msg = "";
switch (item.getItemId()){
case R.id.action_edit:
msg += "edit";
break;
case R.id.action_setting:
msg += "setting";
break;
case R.id.action_share:
msg += "share";
break;
}
if (!msg.equals("")){
Toast.makeText(MainActivity.this,msg,Toast.LENGTH_LONG).show();
}
return true;
}
};
toolbar.setOnMenuItemClickListener(onMenuItemClickListener);
到此,Toolbar的基本功能就完成了。下面是一些零碎的注意事項。
顏色設置
- 設置狀態(tài)欄status bar的顏色
<item name="colorPrimaryDark">#000000</item>
或者在布局文件中設置Toolbar的背景顏色
- 設置App bar上的主標題的顏色,overflow menu選項的字體顏色
<item name="android:textColorPrimary">@android:color/holo_red_light</item>
注意textColorPrimary這個屬性除了設置主標題的顏色外,還設置了overflow menu中選項的字體顏色。除了這個方法,還可以在toolbar的布局文件中設置。這個方法只會設置主標題的顏色。所以,可以利用這兩個方法,現(xiàn)在textColorPrimary中設置overflow menu選項字體顏色,再用app:titleTextColor覆蓋主標題的顏色。注意:是"app:" 不是"android:"。
xmlns:app="http://schemas.android.com/apk/res-auto"
...
app:titleTextColor="@android:color/white"
- 設置App bar上的副標題的顏色
<item name="android:textColorSecondary">#000000</item>
或者在布局文件中
app:subtitleTextColor="@android:color/black"
其中第二種會覆蓋第一中方法。注意:是"app:" 不是"android:"。
- 設置控制元件(switch等按鈕)被選定或者選擇的顏色
<item name="android:colorAccent">#000000</item>
- 設置app的背景色
<item name="android:windowBackground">#000000</item>
- 設置各控制元件(switch等)的默認顏色,以及overflow menu按鈕(三個點)的顏色
<item name="colorControlNormal">#000000</item>
- 設置導航欄的背景顏色,只在Android 5.0后有效
<item name="navigationBarColor">#000000</item>
- 修改overflow menu中的選項的文字大小,(但是也會Activity中的TextView中的文字的大小,不過可以在布局文件中更改)
<item name="android:textSize">50sp</item>
最后
- 這只是Toolbar的基本使用,還有很多高階的使用,比如和CoordinatorLayout在一起的動畫效果等等,還要繼續(xù)學習。
- Toolbar在Java代碼和XML文字中還有更多設置,可以通過查閱Toolbar官方文檔來深入學習。
主要參考文章:
- Android開發(fā):最詳細的 Toolbar 開發(fā)實踐總結
-
android:ToolBar詳解(手把手教程)
感謝上面兩篇文章作者的分享,本文是通過學習這兩篇文章,查閱官方文檔,進行實踐驗證的寫出來進行自我總結,再次分享給大家。