1. 程式人生 > >android material design中Toolbar 在專案中的基本使用

android material design中Toolbar 在專案中的基本使用

Toolbar已經出現很久了,Toolbar主要比ActionBar支援了更多常用特性。例如:導航按鈕,品牌logo圖片,標題,子標題等等。然而他是長這個樣子的:
這裡寫圖片描述
正常專案要求都是這樣的:
這裡寫圖片描述

不管怎麼樣,我們先來熟悉下Toolbar的使用。以下文字來源於android api官網

簡單說明: 您應使用支援庫的 Toolbar 類來實現 Activity
的應用欄。使用支援庫的工具欄有助於確保您的應用在最大範圍的裝置上保持一致的行為。例如,Toolbar 小部件能夠在執行 Android
2.1(API 級別 7)或更高版本的裝置上提供 Material Design 體驗,但除非裝置執行的是 Android 5.0(API 級別 21)或更高版本,否則原生操作欄不會支援 Material Design。 那我們就根據專案來設定一下

步驟簡述:
1 在build.gradle加入如下依賴

 compile 'com.android.support:appcompat-v7:24.2.1'

2 app使用的主題要為無ActionBar主題

直接使用系統的(正常不這麼幹)

<application
    android:theme="@style/Theme.AppCompat.Light.NoActionBar"
    />

繼承系統的,正常這麼幹 在styles資料夾下

<!-- Base application theme. -->
    <style name="AppTheme"
parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item
> <item name="windowActionBar">false</item> //很重要 <item name="windowNoTitle">true</item> //很重要 </style>

然後manifests裡這樣寫

<application
    android:theme="@style/AppTheme"
    />

3 在activiy的xml佈局里加入Toolbar

 <android.support.v7.widget.Toolbar
   android:id="@+id/my_toolbar"
   android:layout_width="match_parent"
   android:layout_height="?attr/actionBarSize"
   android:background="?attr/colorPrimary"
   android:elevation="4dp"
   android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
   app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

4 然後就可以綁定了,在Activity的onCreate加入如下方法

  @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_my);
    Toolbar myToolbar = (Toolbar) findViewById(R.id.my_toolbar);//找到toolbar
    setSupportActionBar(myToolbar);//把toolbar和原來的actionbar關聯起來

    //以後要對toolbar進行操作的時候需要使用getSupportActionBar(),例如:

    getSupportActionBar().setDisplayShowTitleEnabled(false);//不顯示標題
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);//顯示左邊的Home圖示為返回按鈕

    }

正常專案使用

1 設定返回按鈕

 myToolbar.setNavigationIcon(R.drawable.ic_left_arrow);  //這個ic_left_arrow就是自定義的返回按鈕,

2 監聽使用者點選返回按鈕,只需要複寫Activity的onOptionsItemSelected()

  @Override
  public boolean onOptionsItemSelected(MenuItem item) {
      switch (item.getItemId()) {
          case android.R.id.home: //這個就是toolbar的返回按鈕空間的id
              onBackPressed();
              break;
      }
      return true; //告訴系統我們自己處理了點選事件
  }

3 設定標題
系統的標題是居左的,我們需要的是居中的,只需要新增一個居中子TextView

<android.support.v7.widget.Toolbar
  android:id="@+id/my_toolbar"
  android:layout_width="match_parent"
  android:layout_height="?attr/actionBarSize"
  android:background="?attr/colorPrimary"
  android:elevation="4dp"
  android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
  app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

  <TextView
    android:id="@+id/tv_title"
    style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center" />

</android.support.v7.widget.Toolbar>

然後只需要
TextView title = (TextView) findViewById(R.id.tv_title);
title.setText("標題");//直接設定標題就可以了

4 設定選單
設定選單需要重寫activity的onCreateOptionsMenu()方法

  <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">

    <item
      android:id="@+id/menu_text_1"
      android:title="選單1"
      app:showAsAction="always" />
    <item
      android:id="@+id/menu_text_2"
      android:title="選單2"
      app:showAsAction="always" />
</menu>

R.menu.menu_test在res的menu資料夾下

  @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_test, menu);
        return true;
    }

這樣有兩個文字選單按鈕的toolbar就出現了,
點選事件的響應也和返回按鈕的響應一樣

 @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home: //這個就是toolbar的返回按鈕空間的id
                onBackPressed();
                break;
            case R.id.menu_text_2:
                //做一些事
                break;
            case R.id.menu_text_2:
                //做一些事
                break;
        }
        return true; //告訴系統我們自己處理了點選事件
    }

這裡寫圖片描述

現在我們顯示圖片和文字混合的toolbar

<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=".view.activity.NormalDetailActivity">


    <item
    android:id="@+id/menu_text_1"
    android:title="選單1"
    app:showAsAction="always" />


    <item
        android:id="@+id/menu_img"
        android:title="img選單"
        android:icon="@drawable/icon_share_blue"
        app:showAsAction="always" />
</menu>

這裡寫圖片描述

產品經理說這樣還不行,我們需要有checkbox,使用者要新增收藏

<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=".view.activity.NormalDetailActivity">
    <item
        android:id="@+id/menu_checkbox"
        android:title="checkbox"
        app:actionViewClass="android.support.v7.widget.AppCompatCheckBox"
        app:showAsAction="always" />

    <item
        android:id="@+id/menu_img"
        android:title="img選單"
        android:icon="@drawable/icon_share_blue"
        app:showAsAction="always" />

</menu>

這樣checkbox就出來了

這裡寫圖片描述

這裡寫圖片描述

這樣肯定不過關,然後我們用程式碼把checkbox的樣式修改下

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_test, menu);

        //找到checkbox設定下樣式
        AppCompatCheckBox checkbox = (AppCompatCheckBox) menu.findItem(R.id.menu_checkbox).getActionView();
        checkbox.setButtonDrawable(R.drawable.selector_favour);
        checkbox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                //響應訊息
            }
        });
        return true;
    }

selector_favour如下

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_favorite_selected" android:state_checked="true"/>
    <item android:drawable="@drawable/ic_favorite_normal" android:state_checked="false"/>
    <item android:drawable="@drawable/ic_favorite_normal" />
</selector>

這樣大概符合各種需求了吧
這裡寫圖片描述

這裡寫圖片描述

5 修改選單文字顏色

從上面看我們的選單文字顏色是黑色的,可是圖示都是綠的,肯定要統一顏色。

修改toolbar的style中actionMenuTextColor屬性

<style name="ToolbarStyle" parent="ThemeOverlay.AppCompat.ActionBar">
      <item name="actionMenuTextColor">@color/blue</item>
  </style>

然後修改toolbar的android:theme為我們剛剛定義的

<android.support.v7.widget.Toolbar
     android:id="@+id/my_toolbar"
     android:layout_width="match_parent"
     android:layout_height="?attr/actionBarSize"
     android:background="?attr/colorPrimary"
     android:elevation="4dp"
     android:theme="@style/ToolbarStyle"
     app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

這樣樣式就統一了
這裡寫圖片描述