#Material Design之Toolbar使用

1.簡介

  • 簡單點可以理解為替代原來的ActionBar就行了


    Paste_Image.png

    一個Toolbar從左到右包括了一個navigation button、一個logo、一個title和subtitle、一個或多個自定義的View和一個action menu這五部分。只有設(shè)置相應(yīng)的內(nèi)容才行,否則不會顯示。


    Paste_Image.png

2.Toolbar的使用

注意:開頭是自定義命名空間xmlns:toolbar="http://schemas.android.com/apk/res-auto

  • toolbar:navigationIcon 設(shè)置navigation button的圖標(biāo)
  • toolbar:logo 設(shè)置logo
  • toolbar:title 設(shè)置標(biāo)題
  • toolbar:titleTextColor 設(shè)置標(biāo)題文字顏色
  • toolbar:subtitle 設(shè)置副標(biāo)題
  • toolbar subtitleTextColor 設(shè)置副標(biāo)題文字顏色
  • toolbar:popupTheme 應(yīng)用一個主題用來控制toolbar的ui彈窗
  • toolbar:title TextAppearance 設(shè)置title text 相關(guān)屬性,如:字體,顏色,大小等等
  • toolbar:subtitle TextAppearance
  • toolbar:logoDescription logo描述
  • anderoid:background toolbar背景
  • android:theme 主題
//設(shè)置NavigationIcon
        toolbar.setNavigationIcon(R.drawable.ic_book_list);
        // 設(shè)置navigation button 點擊事件
        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 點擊事件
        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 點擊事件
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()){
                    case R.id.item_setting:
                        //點擊設(shè)置
                        break;
                }
                return false;
            }
        });

如何為一個Activity添加一個ToolBar
1.gradle中添加V7 appCompat
2.確保Activity集成AppCompatActivity
3.在功能清單文件中設(shè)置(也可以在activity的節(jié)點下設(shè)置)
<application android:theme="@style/Theme.AppCompat.Light.NoActionBar" />
4.添加

<android.support.v7.widget.Toolbar
      android:id="@+id/tool_bar_2"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="@color/colorPrimary"
      toolbar:navigationIcon="@drawable/ic_book_list"
      toolbar:title="@string/toolbar_title"
      toolbar:titleTextColor="@color/white"
      toolbar:theme="@style/ToolbarTheme"
      toolbar:popupTheme="@style/ThemeOverlay.AppCompat.Light"
      >
  </android.support.v7.widget.Toolbar>

5.Actiavity中對toolbar做相關(guān)操作

private void initToolbar(){
       Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar_2);
       toolbar.setNavigationOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               finish();
           }
       });
       //添加溢出菜單
       toolbar.inflateMenu(R.menu.setting_menu);
       // 添加菜單點擊事件
       toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
           @Override
           public boolean onMenuItemClick(MenuItem item) {
               switch (item.getItemId()){
                   case R.id.item_setting:
                       //點擊設(shè)置菜單
                       break;
               }
               return false;
           }
       }); 

    }

溢出菜單如下

<?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è)置選項"
         app:showAsAction="never"
         />
    <item android:id="@+id/item_model"
          android:title="夜間模式"
          app:showAsAction="never"
        />
</menu>

app:showAsAction屬性值介紹

  • ifRoom:有顯示空間就顯示,沒有就在溢出菜單中顯示
  • never:總是在溢出菜單中
  • always:總是顯示在ToolBar上。

3.特殊需求

  • 修改溢出菜單文字的大小和顏色
<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>

<style name="OverFlowIcon" parent="Widget.AppCompat.ActionButton.Overflow">
        <item name="android:src">@drawable/abc_ic_menu_moreoverflow_mtrl_alpha</item>
    </style>
  • Toolbar設(shè)置自定義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 中添加一個 編輯框 -->
      <EditText
          android:id="@+id/edit_search"
          android:layout_width="match_parent"
          android:layout_height="match_parent"/>
  </android.support.v7.widget.Toolbar>

在代碼中得到控件

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();
    }
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容