Material Design 中的 ToolBar

ToolBar的出現(xiàn)是為了替換之前的ActionBar的各種不靈活使用方式,相反,ToolBar的使用變得非常靈活,因?yàn)樗梢宰屛覀冏杂赏锩嫣砑幼涌丶?低版本要使用的話,可以添加support-v7包。

一、ToolBar簡單介紹

先看一下Toolbar的類繼承關(guān)系

Paste_Image.png

一個(gè)Toolbar 從左到右包括了 一個(gè)navigation button、一個(gè)logo、一個(gè)title和subtitle、一個(gè)或多個(gè)自定義的View和一個(gè) action menu 這5部分。也就是這個(gè)ViewGroup 容器里面包含了這五部分內(nèi)容,對(duì)應(yīng)著一個(gè)界面看一下:

Paste_Image.png

只有設(shè)置了nacigation button才會(huì)顯示,不設(shè)置是不會(huì)顯示出來的),否則它就只是一個(gè)空的ViewGroup

二、Toolbar 的屬性
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:elevation="4dp"
    android:layout_height="?attr/actionBarSize"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    app:layout_scrollFlags="scroll|enterAlways"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    />
toolbar:navigationIcon

設(shè)置navigation button

toolbar:logo

設(shè)置logo 圖標(biāo)

toolbar:title

設(shè)置標(biāo)題

toolbar:titleTextColor

設(shè)置標(biāo)題文字顏色

toolbar:subtitle

設(shè)置副標(biāo)題

toolbar:subtitleTextColor

設(shè)置副標(biāo)題文字顏色

layout_scrollFlags

我們可以通過設(shè)置layout_scrollFlags參數(shù),來控制AppBarLayout中的控件行為。
大部分View的layout_scrollFlags都設(shè)置為scroll,如果沒有設(shè)置的話,
當(dāng)可滾動(dòng)的View進(jìn)行滾動(dòng)時(shí),這些沒設(shè)置為scroll的View位置會(huì)保持不變;
layout_scrollFlags設(shè)置上snap值則可以避免進(jìn)入動(dòng)畫中間狀態(tài)(mid-animation-states),
這意味著動(dòng)畫會(huì)一直持續(xù)到View完全顯示或完全隱藏為止。
app:layout_collapseMode="pin"來確保Toolbar在view折疊的時(shí)候仍然被固定在屏幕的頂部。
除了固定住view,你還可以使用app:layout_collapseMode="parallax"(以及使用app:layout_collapseParallaxMultiplier="0.7"來設(shè)置視差因子)來實(shí)現(xiàn)視差滾動(dòng)效果(比如CollapsingToolbarLayout里面的一個(gè)ImageView),這中情況和CollapsingToolbarLayout的app:contentScrim="?attr/colorPrimary"屬性一起配合更完美。

toolbar:popupTheme

個(gè)屬性就是用來自定義我們彈出的菜單的樣式


Paste_Image.png

Paste_Image.png
toolbar:titleTextAppearance

設(shè)置title text 相關(guān)屬性,如:字體,顏色,大小等等

toolbar:subtitleTextAppearance

設(shè)置subtitle text 相關(guān)屬性,如:字體,顏色,大小等等

toolbar:logoDescription

logo 描述

android:background

Toolbar 背景

android:theme

主題

android:elevation

有海拔和立體的意思,大概就是有一點(diǎn)浮動(dòng)的效果,更加美觀,不喜可刪。
material design 建議為app bar 的elevation設(shè)置為4dp。

三、Toolbar 代碼設(shè)置
        //設(shè)置NavigationIcon
        toolbar.setNavigationIcon(R.drawable.ic_book_list);
        // 設(shè)置navigation button 點(diǎn)擊事件
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        // 設(shè)置 toolbar 背景色
        toolbar.setBackgroundColor(getResources().getColor(R.color.colorPrimary));
        // 設(shè)置 Title
        toolbar.setTitle(R.string.toolbar_title);
        //  設(shè)置Toolbar title文字顏色
        toolbar.setTitleTextColor(getResources().getColor(R.color.white));
        // 設(shè)置Toolbar subTitle
        toolbar.setSubtitle(R.string.sub_title);

        toolbar.setSubtitleTextColor(getResources().getColor(R.color.white));
        // 設(shè)置logo
        toolbar.setLogo(R.mipmap.ic_launcher);
        // 設(shè)置 NavigationIcon 點(diǎn)擊事件
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        //設(shè)置 Toolbar menu
        toolbar.inflateMenu(R.menu.setting_menu);
        // 設(shè)置溢出菜單的圖標(biāo)
        toolbar.setOverflowIcon(getResources().getDrawable(R.drawable.abc_ic_menu_moreoverflow_mtrl_alpha));
        // 設(shè)置menu item 點(diǎn)擊事件
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()){
                    case R.id.item_setting:
                        //點(diǎn)擊設(shè)置
                        break;
                }
                return false;
            }
        });


       setSupportActionBar(toolbar);

注意的是

加標(biāo)題的時(shí)候,toolbar.setTitle("Title");必須在setSupportActionBar(toolbar);之前設(shè)置標(biāo)題才會(huì)生效
溢出菜單
<?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/item_collect"
           android:icon="@drawable/ic_favorite_more"
           android:title="收藏"
           app:showAsAction="ifRoom"
        />

   <item android:id="@+id/item_setting"
         android:title="設(shè)置選項(xiàng)"
         app:showAsAction="never"
         />
    <item android:id="@+id/item_model"
          android:title="夜間模式"
          app:showAsAction="never"
        />
</menu>
showAsAction的值

app中有一個(gè)菜單(menu),showAsAction主要是針對(duì)這個(gè)菜單的顯示起作用的,它有三個(gè)可選項(xiàng):

always:總是顯示在界面上
never:不顯示在界面上,只讓出現(xiàn)在右邊的三個(gè)點(diǎn)中
ifRoom:如果有位置才顯示,不然就出現(xiàn)在右邊的三個(gè)點(diǎn)中

2 溢出菜單樣式

要更改溢出菜單樣式(如文字顏色等),我們只需要為Toolbar 添加一個(gè)主題,在styles.xml 文件中添加一個(gè)主題:

   <style name="ToolbarTheme" parent="Theme.AppCompat.Light">
      <!-- 設(shè)置 toolbar 溢出菜單的文字的顏色 -->
      <item name="android:textColor">@android:color/holo_red_dark</item> 
      <!-- 設(shè)置toolbar 溢出菜單的字體大小-->
      <item name="android:textSize">25sp</item>
      <!-- 設(shè)置 顯示在toobar上菜單文字的顏色 -->
      <item name="actionMenuTextColor">@android:color/white</item>
    </style>
3 引用樣式
android:theme="@style/ToolbarTheme"
四、在Toolbar 上添加 自定義View

如在Toolbar 上添加一個(gè)搜索框

Paste_Image.png
1 在Toolbar 中添加View就可以了
<android.support.v7.widget.Toolbar
      android:id="@+id/tool_bar_4"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="@color/colorPrimary"
      android:visibility="gone"
      toolbar:navigationIcon="@mipmap/navigation_back_white"
      toolbar:theme="@style/ToolbarTheme"
      >
      <!-- ToolBar 中添加一個(gè) 編輯框 -->
      <EditText
          android:id="@+id/edit_search"
          android:layout_width="match_parent"
          android:layout_height="match_parent"/>
  </android.support.v7.widget.Toolbar>
2 代碼中得到這個(gè)編輯框的內(nèi)容
  private void initToolbar(){
        mToolbar3 = (Toolbar) findViewById(R.id.tool_bar_4);
        mToolbar3.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        mToolbar3.inflateMenu(R.menu.menu_search);

        mToolbar3.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                if(item.getItemId() == R.id.item_search){
                    // do search 
                }
                return false;
            }
        });
        // 獲取ToolBar 上的編輯框
        EditText searchEdit = (EditText) mToolbar3.findViewById(R.id.edit_search);
        // 獲取內(nèi)容
        String content = searchEdit.getText().toString();
    }
五、回退到主頁
1 ToolBar可以生成一個(gè)回退按鈕,按下就回退到主頁
Paste_Image.png
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.am.toolbartest">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".IndexActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".SecondActivity"/>

        <activity android:name=".MainActivity">
            <!-- Parent activity meta-data to support 4.0 and lower -->
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value=".IndexActivity" />
        </activity>
    </application>

</manifest>
2 MainActivity設(shè)定setDisplayHomeAsUpEnabled(true);
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mToolBar = (Toolbar) findViewById(R.id.mToolBar);
        mToolBar.setTitle("Title");
        setSupportActionBar(mToolBar);

        mToolBar.setNavigationIcon(R.mipmap.nac_icon);
        mToolBar.setLogo(R.mipmap.sugar);
        mToolBar.setSubtitle("SubTit");
        // 設(shè)置菜單點(diǎn)擊監(jiān)聽
        mToolBar.setOnMenuItemClickListener(onMenuItemClick);

        // Get a support ActionBar corresponding to this toolbar
        ActionBar ab = getSupportActionBar();

        // Enable the Up button
        ab.setDisplayHomeAsUpEnabled(true);
    }
3 如果只想回退到上一頁
mToolBar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                onBackPressed();
            }
});
4 其他
 /**
     * 初始化toolbar
     */
    public void initToolbar() {
      getSupportActionBar().setHomeButtonEnabled(true);
      getSupportActionBar().setDisplayHomeAsUpEnabled(true);
      mDrawerToggle = new ActionBarDrawerToggle(this, mDrawer, mToolbar, R.string.drawer_open, R.string.drawer_close);
      mDrawerToggle.syncState();
  }

setHomeButtonEnabled:小于4.0版本的默認(rèn)值為true的。但是在4.0及其以上是false,該方法的作用:決定左上角的圖標(biāo)是否可以點(diǎn)擊。沒有向左的小圖標(biāo)。

.

setDisplayHomeAsUpEnabled(true) // 給左上角圖標(biāo)的左邊加上一個(gè)返回的圖標(biāo) 。對(duì)應(yīng)ActionBar.DISPLAY_HOME_AS_UP

Paste_Image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,983評(píng)論 6 537
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,772評(píng)論 3 422
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,947評(píng)論 0 381
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,201評(píng)論 1 315
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 71,960評(píng)論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,350評(píng)論 1 324
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,406評(píng)論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,549評(píng)論 0 289
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,104評(píng)論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,914評(píng)論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,089評(píng)論 1 371
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,647評(píng)論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,340評(píng)論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,753評(píng)論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,007評(píng)論 1 289
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 51,834評(píng)論 3 395
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,106評(píng)論 2 375

推薦閱讀更多精彩內(nèi)容