MeterialDesign系列文章（一）ToolBar的使用

由於最近在寫一個表情包的項目，剛開始寫UI的時候就把每一個頁面的頭部都用了toolbar，緣由就是我想主題顏色都是一種的，用ToolBar更方便，可是呢，看了一個大佬的代碼後發現本身的想法真的是太。。。 而後本身又去網上找了好多優秀的項目，看了看別人的使用，下面就一步步說toolbar。

ToolBar的進階歷程

• Toolbar的基本使用
• Toolbar的進階使用
• 項目中的Toolbar

Toolbar的基本使用

首先咱們要將ActionBar隱藏。像下面這樣

• 隱藏ActionBar

<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
  </style>
複製代碼

或者

<style name="NoActionBar" parent="AppTheme">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
 </style>
複製代碼

主題的樣式就能夠經過colorPrimary、colorPrimaryDark、colorAccent來修改。

• 設置ToolBar

<android.support.constraint.ConstraintLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/dodgerblue"
        app:navigationIcon="@mipmap/back"
        app:titleTextColor="@color/colorWhite"
        app:title="知乎">
    </android.support.v7.widget.Toolbar>
複製代碼

toolbar有些經常使用的屬性介紹一下：

• android：background 設置背景顏色
• app:navigationIcon 上圖返回圖標的設置
• app:title 設置顯示的標題
• app:titleTextColor 設置標題的顏色
• app:subtitle 設置副標題
• app:subtitleTextColor 設置副標題顏色
• app:logo 設置Logo（返回圖標和標題以前還有個logo)

Toolbar的進階使用

有關導包

在初始化Toolbar的時候通常有兩個

Toolbar(android.support.v7.widget)
Toolbar(android.widget)
複製代碼

這裏須要導入V7的包！！！不然，可能會找不到Toolbar這個類。

• Toolbar標題的居中

若是在toolbar里加入TextView的話想讓標題居中，就須要設置layout_gravity="center",如果想靠左就layout_gravity="left",靠右就layout_gravity="right"

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/dodgerblue"
        app:navigationIcon="@mipmap/back"
        app:titleTextColor="@color/colorWhite"
        app:title="知乎">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="toolbar"
            android:textColor="@color/colorWhite"
            android:textSize="22sp"/>
</android.support.v7.widget.Toolbar>
複製代碼

由於Toolbar是一個繼承ViewGroup的控件，這就說明它是能夠有內部控件的！

menu的設置

設置menu其實很簡單，在bottomnavigationview(底部導航欄)的使用時也設置了相應的menu。Toolbar集成menu須要重寫Activity的 boolean onCreateOptionsMenu(Menu menu) 方法，此方法返回一個boolean,用來判斷你是否建立了相應的nenu文件。

public boolean onCreateOptionsMenu(Menu menu){
        MenuInflater menuInflater = getMenuInflater();
        menuInflater.inflate(R.menu.toolbar_menu,menu);
        return true;
    }
複製代碼

menu文件

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/app_bar_search"
        android:title="搜索"
        app:actionViewClass="android.widget.SearchView"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/menu_cycling"
        android:icon="@drawable/find"
        android:title="掃一掃"
        app:showAsAction="never" />
    <item
        android:id="@+id/collection"
        android:title="個人收藏"
        app:showAsAction="never" />
</menu>
複製代碼

其中showAsAction可接受的值有： 這個屬性可接受的值有：

1. always：使菜單項一直顯示在ToolBar上。
2. ifRoom：若是有足夠的空間，這個值會使菜單項顯示在ToolBar上。
3. never：使菜單項永遠都不出如今ToolBar上,在…的子項中顯示。
4. withText：使菜單項和它的圖標，菜單文本一塊兒顯示

如今menu並無顯示出來，由於不設置Actionbar是沒有辦法關聯menu文件的。因此

public void setToolBar(){
        toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
}

  public boolean onCreateOptionsMenu(Menu menu){
        MenuInflater menuInflater = getMenuInflater();
        menuInflater.inflate(R.menu.toolbar_menu,menu);
        return true;
}
複製代碼

setSupportActionbar(toolbar) 這一行代碼千萬不能忘，不然menu是顯示不出來的！！！

咱們如今發現...和搜素的圖標都是黑色的和白色的字體很很不搭，並且點開...是這樣的。。。

修改menu彈出的位置和樣式

Toolbar有一個屬性 popuptheme="@style/ToolbarPopupTheme" 這個屬性是給Toolbar設置主題的！

• 修改彈出框的文字樣式、popup背景的樣式

<style name="ToolbarTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:background">#ffffff</item><!--設置彈框背景顏色-->
        <item name="android:textColorPrimary">#000000</item><!--設置文字顏色-->
        <item name="android:textSize">16sp</item><!--設置文字大小-->
    </style>
複製代碼

• 修改彈出框的位置問題

<style name="ToolbarTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:background">#ffffff</item>
    <item name="android:textColorPrimary">#000000</item>
    <item name="android:textSize">16sp</item>
    <item name="actionOverflowMenuStyle">@style/OverflowMenuTheme</item>
</style>

<style name="OverflowMenuTheme" parent="Widget.AppCompat.PopupMenu.Overflow">
    <item name="overlapAnchor">false</item>><!--這個屬性設置爲false，就能使得popup在Toolbar的下面顯示-->
</style>
複製代碼

位置文字顏色設置了，可是溢出菜單和搜索那個按鈕太醜了

• 修改溢出菜單的顏色

修改溢出菜單就是要修改相應的主題樣式，就是在文章開始修改的主題，只要在上面加上 item name="android:textColorSecondary"... 就能夠了。

<!-- Base application theme. -->
<style name="AppTheme.NoActionBar" 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>
    <item name="android:textColorSecondary">#ffffff</item>
</style>
複製代碼

一些相應的監聽

設置監聽分爲兩種 1.設置ActionBar的監聽（針對menu的開發內容）2.針對Toolbar內部設置的控件和navigationIcon的監聽

• menu的監聽

對於menu的監聽 onOptionItemSelected(MenuItem item) 這個方法，和onClickListener的監聽都相似

public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.menu_find:
            Toast.makeText(this, "掃一掃", Toast.LENGTH_SHORT).show();
            break;
        case R.id.menu_colection:
            Toast.makeText(this, "收藏", Toast.LENGTH_SHORT).show();
            break;
        }
        return true;
    }
複製代碼

• 返回的監聽

由於大部分的應用都會在此到處理返回的邏輯。google也早就設計好了，因此把navigationIcon的監聽單獨到Toolbar身上了

public void setToolbarListener(){
       toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
    }
複製代碼

項目中的Toolbar

我以爲一個項目成功的開始就在於UI，UI的美觀真的很重要，並且還要考慮加載UI時間的問題（從本身作項目開始纔開始考慮這些問題 笑哭==），以前一直讓我很困擾的是項目裏的頭部（就是相似在toolbar的位置上的那些控件開始如何擺放的），最開始我是該每一個控件加背景用相對佈局，以後學會toolbar開始在toolbar裏放控件，可是發現一個問題，toolbar裏會被限制，有好多空間的位置很差肯定，後來去看了別人的項目才發現toolbar通常都是被重寫的，目的是爲了重複利用，由於有好多的頁面他們的toolbar的佈局是同樣的，只是控件的樣式發生了改變，這裏面標籤就有了很大的用處。

上面說到了toolbar的重寫，也就是自定義view,toolbar能夠繼承LinearLayout,也能夠直接繼承toolbar。下面是繼承Linearlayout的一種寫法，我在項目中學到的。

public class Toolbar extends LinearLayout implements View.OnClickListener {
    TextView title;
    ImageView back;
    public ImageView right1,right2;

    public Toolbar(Context context) {
        super(context);
        initViews();
    }

    public Toolbar(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initViews();

    }

    public Toolbar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initViews();

    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public Toolbar(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        initViews();
    }

    private void initViews() {
        View view = LayoutInflater.from(getContext()).inflate(R.layout.widget_toolbar, this, false);
        addView(view);
        title = findViewById(R.id.title);
        right1 = findViewById(R.id.right1);
        right2 = findViewById(R.id.right2);
        findViewById(R.id.back).setOnClickListener(this);
        if (((Activity) getContext()).getTitle() != null) {//判斷該Activity標題是否爲空，不爲空設置到標題
            title.setText(((Activity) getContext()).getTitle());
        }
        setRightButtonOneShow(false);//按鈕不可見（GONE）
        setRightButtonTwoShow(false);//按鈕不可見（GONE）
    }

    //設置標題
    public void setTitle(String title) {
        this.title.setText(title);
    }

    //設置分享按鈕是否顯示
    private void setRightButtonOneShow(boolean visibility){
       int i = visibility? View.VISIBLE:View.GONE;
       right1.setVisibility(i);
    }
    private void setRightButtonTwoShow(boolean visibility){
       int i = visibility? View.VISIBLE:View.GONE;
       right2.setVisibility(i);
    }


    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.back:
                ((Activity) getContext()).finish();
                break;
        }
    }
}
複製代碼

這裏就是重寫的代碼，initViews（）裏初始化了佈局中的控件，不想顯示的能夠隱藏，有興趣的能夠看看標籤，用於隱藏某些控件。

下面是.xml文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@color/colorPrimary"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/back"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="?attr/selectableItemBackground"
        android:padding="15dp"
        android:src="@drawable/back" />

    <TextView
        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:lines="1"
        android:text="標題"
        android:textColor="@color/colorBlack"
        android:textSize="20sp"
        android:textStyle="bold" />

    <ImageView
        android:id="@+id/right1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="?attr/selectableItemBackground"
        android:padding="15dp"
        android:src="@drawable/share" />

    <ImageView
        android:id="@+id/right2"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="?attr/selectableItemBackground"
        android:padding="15dp"
        android:src="@drawable/share" />
</LinearLayout>
複製代碼

參考文章

加油哇！！！