Android Toolbar的基礎使用

第一步

將打算使用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官方文檔來深入學習。

主要參考文章:

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容