Android高階進階ToolBar

阿新 • • 發佈：2018-11-08

我記得之前Android4.0的時候是actionBar,到了Android5.0以後google新出了ToolBar用以彌補ActionBar的不足。今天我們就來講一下 ToolBar的用法。其實現在Android系統的UI設計有些已經超越了IOS...

一、基本用法

1. 我們新建立一個工程；

2. 然後找到values---styles.xml修改其中的AppTheme為Theme.AppCompat.Light.NoActionBar，因為我們要自定義ToolBar並代替ActionBar。styles.xml中的AppTheme如下：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

3.佈局main.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:navigationIcon="@mipmap/gongzhong_fanhui"
        app:title="ToolBar學習">
    </android.support.v7.widget.Toolbar>
</LinearLayout>

其中app:title為標題，app:navigationIcon為嚮導圖片，在這裡即返回箭頭。

預設情況下app:title一般靠左對齊的，並且在app:navigationIcon的右邊，稍後在第（二）節中研究如何讓title居中。

4. MainActivity.java程式碼

package com.example.administrator.toolbarstudy;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.view.MenuItemCompat;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.SearchView;
import android.support.v7.widget.SearchView.OnCloseListener;
import android.support.v7.widget.SearchView.OnQueryTextListener;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnFocusChangeListener;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
         setSupportActionBar(toolbar);
        //設定NavigationIcon的點選事件監聽，比如返回按鈕。
        // app:navigationIcon="@drawable/abc_ic_ab_back_mtrl_am_alpha"
        toolbar.setNavigationOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                finish();
            }
        });
    }
}

setSupportActionBar(toolbar),用toolbar來替代actionBar，我們之前appTheme是NoActionBar,在這裡用toolbar佔據actionBar的位置。toolbar.setNavigationOnClickListener來實現 “返回鍵”的點選處理，一般就是finish()結束當前頁面，返回上一層頁面。

5. 執行效果：

通過以上步驟我們顯示出了Toolbar,這是一個最基本的Toolbar。

我們從效果圖中也發現了一些問題：

（1）發現文字顏色不搭調，而且也沒有居中。建議文字為白色且居中。

（2）ToolBar佈局比較單調，能不能自定義佈局。

（3）ToolBar上面能不能多放幾個選單，其餘的不重要的選單可以隱藏到右上角的Menu裡，一般用三個點點表示裡面隱藏了選單。

好吧，我們帶著以上問題對它進一步優化。

二、豐富ToolBar

1. 改變文字顏色，並讓其居中.

（1）改變文字顏色，直接在ToolBar佈局裡設定app:titlteTextColor為白色，佈局程式碼如下：

  <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:navigationIcon="@mipmap/gongzhong_fanhui"
        app:titleTextColor="@color/colorWhite"
        app:title="ToolBar學習">

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

（2）標題居中，目前沒有找到相應的屬性，不過我們可以在<ToolBar></ToolBar>之間放置一個TextView來實現標題居中，同時去掉原來的app:title屬性。ToolBar佈局程式碼如下：

   <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:title=""
        app:navigationIcon="@mipmap/gongzhong_fanhui"
       >
        <TextView
            android:textSize="18sp"
            android:textColor="@color/colorWhite"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="標題" />
    </android.support.v7.widget.Toolbar>

app:title="" 取消預設標題，同時我們通過設定ToolBar中間的TextView的layout_gravity 熟悉為center讓標題居中，當然也可以設定文字的顏色。執行效果如下圖：

疑？好奇怪呀，怎麼預設的標題“ToolBarStudy”還在啊，這次變成了app名字了。勿慌，在MainActivity.java的onCreate中setSupportActionBar(toolbar)程式碼下面新增一行程式碼：getSupportActionBar().setDisplayShowTitleEnabled(false)，再次執行就好啦。

2. ToolBar佈局比較單調，能不能自定義佈局

這個在1中已經有了答案，在1中我們通過在<ToolBar></ToolBar>之間添加布局TextView定義了標題欄的樣式。當然，我們也可以新增RelativeLayout、LinearLayout等常用佈局。

3. 豐富Toolbar，多放幾個選單

我們可以通過定義menu資料夾下的main.xml來為Toolbar新增選單，或者直接顯示在Toolbar上又或者隱藏在“...”三個點中。

（1）效果如下圖所示：

（2）menu---main.xml程式碼：

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.ricky.materialdesign.toolbar.MainActivity"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_search"
        android:orderInCategory="100"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="always"
        android:title="查詢"/>
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        app:showAsAction="never"
        android:title="設定"/>
    <item
        android:id="@+id/action_share"
        android:orderInCategory="100"
        app:showAsAction="always"
        android:title="分享"
        android:icon="@android:drawable/ic_menu_share"/>
    <item
        android:id="@+id/action_edit"
        android:orderInCategory="100"
        app:showAsAction="ifRoom"
        android:title="編輯"
        android:icon="@android:drawable/ic_menu_edit"/>
</menu>

我們來解釋一下里面的屬性，我們看第一個item中的 app:actionViewClass="android.support.v7.widget.SearchView"表示第一個選單是一個searchView用於搜尋（見上面效果圖）。再下來就是一些公共屬性：

--- app:showAsAction="always" 表示該選單項總顯示在Toolbar表面；如果="ifRoom"意味著如果Toolbar上還有空間那麼就把該選單項放在ToolBar表面，否則會隱藏到三個點點中。
--- android:title="分享" 表示該選單項的 “含義提示”，比如長按“分享”圖示，會提示“分享“文字。

--- android:icon="@android:drawable/ic_menu_share" 表示該選單項的圖示，例如“分享”圖示。

--- android:orderInCategory="100" 表示選單顯示的位置優先順序，例如您嘗試把“分享”選單的這個屬性改為50，那麼分享選單的顯示會排在 “搜尋”的前面，執行試試看吧。

（3）在程式碼中將menu選單項顯示出來，並定義選單項的點選事件，程式碼如下：

package com.example.administrator.toolbarstudy;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.view.MenuItemCompat;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.SearchView;
import android.support.v7.widget.SearchView.OnCloseListener;
import android.support.v7.widget.SearchView.OnQueryTextListener;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnFocusChangeListener;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
         setSupportActionBar(toolbar);
        //設定NavigationIcon的點選事件監聽，比如返回按鈕。
        // app:navigationIcon="@drawable/abc_ic_ab_back_mtrl_am_alpha"
        getSupportActionBar().setDisplayShowTitleEnabled(false);
        toolbar.setNavigationOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                finish();
            }
        });
    }

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

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            Toast.makeText(MainActivity.this,"您點選了設定",Toast.LENGTH_SHORT).show();
            return true;
        }
        else if(id == R.id.action_share)
        {
            Toast.makeText(MainActivity.this,"您點選了分享",Toast.LENGTH_SHORT).show();
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

好了，至此ToolBar的基本用法與選單項的新增就講到這裡，可能您還想知道 searchview“搜尋”圖示與輸入的搜尋文字的顏色能否自定義？敬請期待下一篇，我們專門來研究searchView的用法。

最後，本文示例原始碼下載：https://download.csdn.net/download/gaoxiaoweiandy/10770965

Android高階進階ToolBar

Android高階進階ToolBar

Android高階進階之自定義View

Android高階進階之 TextInputLayout用法

Android高階進階--插曲-從Android5.0到Android9.0各版本變化

[Android高階進階]

Android高階進階——繪圖篇（五）setXfermode 設定混合模式

Android高階進階書籍目錄

《Android高階進階》小密圈開通啦

Android高階進階——繪圖篇（七）Canvas 與圖層（一）

Android高階進階——繪圖篇（一）Canvas基本操作

(轉)Android高階進階--插曲-從Android5.0到Android9.0各版本變化

Android高階進階十 Android OpenGL開啟混合色

突破自己的技術瓶頸，Android程式設計師高階進階，危機感

Android開發高階進階之元件化框架搭建

Android 動畫進階之動畫切換

Android逆向進階（7）——揭開Hook的神秘面紗

Android 高手進階教程(十三)之----Android 數據庫SQLiteDatabase的使用！！

Android高手進階教程(九)之----Android Handler的使用!!!

Android高手進階教程(十六)之---Android中萬能的BaseAdapter(Spinner,ListView,GridView)的使用！

Android高手進階教程(二十)之---Android與JavaScript方法相互調用！

Android高階進階ToolBar

相關推薦