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

時間  2019-11-16
標籤 meterialdesign 系列 文章 toolbar 使用 简体版
原文   原文鏈接

在Android5.0最引人注意的就是MaterialDesign設計風格了，百度百科是這麼解釋MaterialDesign 的！只能說本身懶，一直沒有研究這個東西，但我發現這個東西其實在交互上真的比以前那種交互好了不少，因此我以爲有必要去學習一下這個東西。網上不少相關的內容，可是我以爲，網上的東西再好，寫的在牛逼，本身不去嘗試、不去總結都是白搭。一點意義的沒有，因此這裏本身決定總結一下，把中間的踩坑經歷和你們分享一下。android

這裏奉勸各位看官大人，無論什麼文章。寫的再好再爛也是人家的，不是本身的。寫代碼就是這樣不斷的練習、不斷的學習。才能在這個知識不斷迭代的時代，不被社會淘汰！bash

請開始你的表演

Android中MaterialDesign開發（一）ToolBar的使用

  • Toolbar的展現
  • Toolbar的進階使用
  • Toolbar的一些常見案例實現
  • Toolbar的一些問題集錦

1.Toolbar的展現

其實對於Toolbar要求不高的話，展現是很簡單的直接在佈局中添加就行了。像下面這樣app

  • 修改主題樣式ide

    <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>
    </style>
    
    <!--Toolbar主題的設置,Application使用的是這個主題-->
        <style name="BaseTheme" parent="AppTheme">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
</style>
複製代碼

  • 設置ToolBar佈局

    <?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context="com.jinlong.newmaterialdesign.MainActivity">

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimaryDark"
        app:navigationIcon="@mipmap/back_icon"
        app:title="ToolBar的展現"
        app:titleTextColor="@android:color/white" />

</android.support.constraint.ConstraintLayout>

複製代碼

Toolbar最簡單的展現

這裏面有一些經常使用屬性簡單介紹一下：學習

  • android:background 設置背景色
  • app:navigationIcon 返回按鈕的圖標（其實這裏不光能夠設置返回按鈕，還能夠設置別的圖標）這個是由默認圖標的?attr/homeAsUpIndicator
  • app:title 顯示的標題
  • app:titleTextColor 標題的顏色
  • app:subtitle 副標題
  • app:subtitleTextColor 副標題顏色
  • app:logo Logo的顯示

所有設置後是這個樣子的。這裏嘮叨一句，其實ToolBar不是隻能設置到頂上了，只要你想，設置到哪裏都是能夠的！ui

所有設置後的樣子

2.Toolbar的進階使用

每次我看到細節這個詞的時候，就會囉嗦好久，好久。。。this

2.1在初始化Toolbar的時候要注意

ToolBar的版本

這裏要導入v7下的包（新版本的）！這裏你要是導入的是widger的話，可能有的API會有些出入的！關於ActionBar的使用就再也不這裏講解了。google

2.2Toolbar和ActionBar的關聯問題

或許在以前的項目中你會看見ActionBar的影子，這是由於以前實現這種標題都使用的是ActionBar，可是後來在5.0的時候Toolbar替代了ActionBar。spa

setSupportActionBar(Toolbar toolbar);//向下兼容的版本可使用，注意這裏設置的是v7包下的Toolbar
setActionBar(Toolbar toolbar);//21版本才能使用的方法，注意這裏設置的是widget包下的Toolbar
複製代碼

若是你不關聯ActionBar的時候是沒有辦法使用menu的！！！因此你想使用menu的時候就必須關聯ActionBar。

2.3Toolbar標題的居中

這裏就看你對Toolbar是否瞭解了，其實Toolbar是一個繼承ViewGroup的控件，這就說明它是能夠有內部控件的！這說明了什麼呢？說明標題的居中很簡單，直接在內部添加一個TextView看成標題就能夠了！

```
<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimaryDark"
        app:navigationIcon="@mipmap/back_icon"
        app:subtitleTextColor="@color/colorAccent"
        app:titleTextColor="@android:color/white">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Toolbar的使用"
            android:textColor="@android:color/white"
            android:textSize="20sp" />
    </android.support.v7.widget.Toolbar>
```
複製代碼

標題居中的樣子

這裏有一個注意點：當你關聯了ActionBar的時候，會出現兩個標題，像變成這樣了！

關聯了ActionBar的樣子

解決辦法有兩種：

  • 不關聯ActionBar(可是就沒有辦法使用menu了)
  • 在setSupportActionBar()/setActionBar()以前調用toolbar.setTitle("")方法進行解決

這樣界面就能恢復到上面那樣了，其實以前在這裏也踩過坑！！！因此我在上面說，關聯ActionBar會有一些意象不到的現象

2.4相應的menu設置

設置menu其實很簡單，可是menu的使用就有不少的問題了。至於menu不清楚的，能夠在以後Android中menu的使用集錦中理解關於menu的使用。其實Toolbar集成menu是很簡單的，其實就是重寫Activity的**boolean onCreateOptionsMenu(Menu menu)**的方法，這個方法返回一個boolean，用來判斷你是否建立了相應的menu文件。代碼是這樣滴。。。

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

menu文件是這樣的！

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


    <item
        android:id="@+id/app_bar_search"
        android:icon="@drawable/ic_search_black_24dp"
        android:title="搜索"
        app:actionViewClass="android.widget.SearchView"
        app:showAsAction="ifRoom" />
    <item
        android:icon="@mipmap/ic_directions_bike_white_24dp"
        android:title="騎行"
        app:showAsAction="never" />
    <item
        android:icon="@mipmap/ic_directions_bike_white_24dp"
        android:title="其餘"
        app:showAsAction="never" />
</menu>
複製代碼

然而你發現並無顯示出來。。。爲何呢？由於上面和你說過，若是不設置ActionBar是沒有辦法關聯menu文件的！因此你要把代碼變成這樣！

private void initToolbar() {
        Toolbar toolbar =findViewById(R.id.toolbar);
        toolbar.setTitle("");
        setSupportActionBar(toolbar);
    }

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

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

這裏有個問題說一下，toolbar上最多展現一個標題（過長的話，後面會用...代替），一個navigationIcon（返回鍵），一個logo，最多三個圖標（這裏包括那三個點） 顯示出來是這個樣子的！

添加menu後的樣子

感受好醜啊，白的字配上黑色的圖標。。。瞬間炸裂。並且你會發現點擊右側的按鈕會變成這個樣子？納尼。。。

彈出menu後的樣子

若是大家的UI能接受這種樣式，那麼大家UI該跑路了。。。

2.5修改menu彈出的位置和樣式

Toolbar有這樣一個屬性popupTheme="@style/ToolbarPopupTheme"這個屬性是給Toolbar設置主題的！全部的位置，和上面的圖片顏色都是基於這個屬性進行設置的，那麼咱們來看看這個主題應該怎麼去進行設置！！！

  • 修改彈出框的文字樣式、popup背景的樣式
    <!--Toolbar的Theme的設置，都是針對popup的設置-->
    <style name="ToolbarTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:colorBackground">#223344</item><!--設置背景顏色的-->
        <item name="android:textColorPrimary">@android:color/white</item><!--設置文字顏色的-->
        <item name="android:textSize">16sp</item><!--設置文字大小的-->
    </style>
複製代碼

設置好後，千萬別忘了設置popupTheme="@style/ToolbarTheme，這樣彈出款那個的顯示問題咱們就解決了。

  • 修改彈出框的位置問題
    <!--Toolbar的Theme的設置，都是針對popup的設置-->
    <style name="ToolbarTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:colorBackground">#223344</item><!--設置背景顏色的-->
        <item name="android:textColorPrimary">@android:color/white</item><!--設置文字顏色的-->
        <item name="android:textSize">16sp</item><!--設置文字大小的-->
        <item name="actionOverflowMenuStyle">@style/OverflowMenuTheme</item><!--設置彈出位置的主題-->
    </style>

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

這裏注意一個問題：actionOverflowMenuStyle這個屬性什麼版本均可以使用，可是若是你寫成android:actionOverflowMenuStyle的話，就變成了只有21版本才能使用的了。

未修改溢出菜單的時候

能夠看出，位置文字顏色都改變了，可是這個溢出菜單和搜索那個按鈕實在是太醜了。這樣我是拒絕的。。。

  • 修改溢出菜單的顏色

    其實修改溢出菜單就要修改相應的主題樣式了，記得前面最開始修改的主題把，只要在上面加上<item name="android:textColorSecondary">#ffffff</item>就能夠了。而後主題變成了這個樣子。。。

    <!--Toolbar主題的設置,Application使用的是這個主題-->
    <style name="BaseTheme" parent="AppTheme">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:textColorSecondary">#ffffff</item>
    </style>
複製代碼

這樣頁面就變成了這個樣子

整體設置完成後的樣子

總算是看着像點樣子了。。。可是存在像素眼的UI會說，看爲何右邊有個白邊。。。我想說大白邊很厲害的。。。其實這麼設置是有道理的，meterialDesign存在一個層級，這裏右邊是留給陰影的。可是UI要是說無論。。。好吧咱們改！

  • 修改彈出款的右邊距

    其實這個東西挺好改的。直接在剛纔的主題中添加這麼一個屬性<item name="android:paddingRight">-5dp</item>這裏若是你設置0的時候就像上面那樣，可是你要是設置成-5的話，他就乖乖的跑到右邊去了。。。主題就變成了！

    <!--Toolbar的Theme的設置，都是針對popup的設置-->
    <style name="ToolbarTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:background">#223344</item><!--設置背景顏色的-->
        <item name="android:textColorPrimary">@android:color/white</item><!--設置文字顏色的-->
        <item name="android:textSize">16sp</item><!--設置文字大小的-->
        <item name="actionOverflowMenuStyle">@style/OverflowMenuTheme</item><!--設置彈出位置的主題-->
        <item name="actionOverflowButtonStyle">@style/OverflowTheme</item>
        <item name="android:paddingRight">-5dp</item>
    </style>
複製代碼

最終的效果

若是這樣美工還不滿意，你就讓她去死吧！！！

2.6一些相應的監聽

設置點擊監聽分爲兩種 - 設置ActionBar的監聽（這個主要是針對menu的開發內容） - 沒有設置ActionBar的監聽（這個主要是針對Toolbar內部設置的控件和navigationIcon的監聽）

接下來咱們就根據上面的內容進行相應的講解！！！

2.6.1menu的監聽

對於menu的監聽，基本上都是監聽onOptionsItemSelected(MenuItem item)這個方法，具體和onclickListener的監聽都相似，像下面這樣

@Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.menu_cycling:
                Toast.makeText(this, "騎行", Toast.LENGTH_SHORT).show();
                break;
            case R.id.menu_other:
                Toast.makeText(this, "其餘", Toast.LENGTH_SHORT).show();
                break;
        }
        return true;
    }
複製代碼

2.6.2navigationIcon(返回的監聽)

這裏爲何我說是返回呢？由於大部分的應用都會在此到處理返回的邏輯的。google也早就設計好了，因此把nacigationIcon的監聽單獨到Toolbar身上了。。。

虛擬機錄得，效果不算太好

這樣點擊就能實現相應的menu點擊效果了，你可能會問了，爲何搜索那個按鈕沒有點擊效果，不是我沒錄，而是關於這個搜索按鈕裏面有不少細節須要講解，限於篇幅吧！準備在以後單獨寫一下！會在以後Toolbar之搜索按鈕的使用中於你們見面！其實這裏還存在一個menu組的概念，這裏在以後Android中menu的使用集錦講到，還請你們關注！

3.Toolbar的一些常見案例實現

最開始看見Toolbar是在知乎上，知乎APP的ToolBar當時以爲很好看，後來由於工做的緣由就擱置了。其實也是很簡單的。最開是知乎的首頁是這個樣子的！

知乎首頁效果

上面都講了關於這些的內容，因此這裏我就直接貼代碼了，請原諒個人懶！！！

  • 首先是佈局文件

    <?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context="com.jinlong.newmaterialdesign.ZhiHuToolbarActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbarZhiHu"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimaryDark"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navigationIcon="@mipmap/ic_zhbook_show_directory"
        app:title="首頁"
        app:popupTheme="@style/ToolbarTheme"
        app:titleTextColor="@android:color/white" />
</android.support.constraint.ConstraintLayout>
複製代碼

  • menu文件

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


    <item
        android:id="@+id/menu_search"
        android:icon="@drawable/ic_search_black_24dp"
        android:title="搜索"
        app:actionViewClass="android.widget.SearchView"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/menu_cycling"
        android:icon="@mipmap/ic_directions_bike_white_24dp"
        android:title="去知乎的Toolbar"
        app:showAsAction="never" />
    <item
        android:id="@+id/menu_other"
        android:icon="@mipmap/ic_directions_bike_white_24dp"
        android:title="其餘"
        app:showAsAction="never" />
</menu>
複製代碼

  • 主頁面代碼

    public class ZhiHuToolbarActivity extends AppCompatActivity {

    private Toolbar mToolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_zhi_hu_toolbar);

        setToolBar();
        setToolBarListener();
    }


    private void setToolBar() {
        mToolbar = findViewById(R.id.toolbarZhiHu);
        setSupportActionBar(mToolbar);
    }

    private void setToolBarListener() {
        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater menuInflater = getMenuInflater();
        menuInflater.inflate(R.menu.menu_zhihu, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.menu_delete:
                Toast.makeText(this, "刪除按鈕", Toast.LENGTH_SHORT).show();
                break;
            case R.id.menu_other:
                Toast.makeText(this, "其餘按鈕", Toast.LENGTH_SHORT).show();
                break;
            case R.id.menu_setting:
                Toast.makeText(this, "設置按鈕", Toast.LENGTH_SHORT).show();
                break;
        }
        return true;
    }
}
複製代碼

  • 主題style

<!--Toolbar的Theme的設置，都是針對popup的設置-->
    <style name="ToolbarTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:background">#223344</item><!--設置背景顏色的-->
        <item name="android:textColorPrimary">@android:color/white</item><!--設置文字顏色的-->
        <item name="android:textSize">16sp</item><!--設置文字大小的-->
        <item name="actionOverflowMenuStyle">@style/OverflowMenuTheme</item><!--設置彈出位置的主題-->
        <item name="android:paddingRight">-5dp</item>
    </style>

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

4.Toolbar的一些問題集錦

  • menu的長按事件

    有的童鞋可能會發現，menu長按會彈出一個Toast十分的影響美觀，這裏教你們去掉他！直接將title設置成空串就能夠了！

  • navigationIcon和Title的距離問題

    在24版本navigationIcon和Title的距離很遠，看着不是很美觀。怎麼解決呢？固然是拉近彼此的距離了！！！

    <!--navigationIcon和Title的距離問題-->
    <style name="NoSpaceActionBarTheme" parent="Base.Widget.AppCompat.Toolbar">
        <item name="contentInsetStart">0dp</item>
        <item name="contentInsetStartWithNavigation">0dp</item>
    </style>
複製代碼

    上面兩個控制的距離是同樣的！！！而後經這個style加到相應的基類主題中去，像下面這樣(根據contentInsetStart值就能控制之間的距離了)：

    <!--Toolbar主題的設置-->
        <style name="BaseTheme" parent="AppTheme">
            <item name="windowActionBar">false</item>
            <item name="windowNoTitle">true</item>
            <item name="android:textColorSecondary">#ffffff</item>
            <item name="toolbarStyle">@style/NoSpaceActionBarTheme</item>
        </style>
複製代碼

上面基本上涵蓋了Toolbar的使用，若是有什麼遺漏的問題，還請廣大童鞋指出，我及時添加上去。原本我還想寫一個和網易雲音樂相似的Toolbar來的，可是由於涉及到SearchView，因此會在以後的Toolbar之搜索按鈕的使用中進行講解！但願感興趣的童鞋到時候不要錯過。。。

歡迎關注個人公衆號
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程