Toolbar-5.0新特性

分類：技術 時間:2016-10-24

概念

Android5.0以后谷歌大力推崇Material Design設計，有意統一之前Android style風格亂象的情況。

Toolbar，這是用來取代過去 actionbar 的控件，而現在于 material design 中也對之有一個統一名稱：app bar，在未來的 android app 中，就以 toolbar 這個元件來實作之。

Google 非常推薦大家使用 Toolbar 來作為Android客戶端的導航欄，以此來取代之前的 Actionbar 。與 Actionbar 相比，Toolbar 明顯要靈活的多。它不像 Actionbar 一樣，一定要固定在Activity的頂部，而是 可以放到界面的任意位置 。除此之外，在設計 Toolbar 的時候，Google也留給了開發者很多可定制修改的余地，這些可定制修改的屬性在 官方API文檔 中都有詳細介紹，如：

  • 設置導航欄圖標；
  • 設置App的logo；
  • 支持設置標題和子標題；
  • 支持添加一個或多個的自定義控件；
  • 支持Action Menu；

Toolbar的基本使用

使用V7的向下兼容包

前面提到 Toolbar 是在 Android 5.0 才開始加上的，Google 為了將這一設計 向下兼容 ，自然也少不了要推出兼容版的 Toolbar 。為此，我們需要在工程中引入 appcompat-v7 的兼容包，使用 android.support.v7.widget.Toolbar 進行開發。

工程目錄

工程說明

  • ToolBarBaseUseAct 包含了 Toolbar 的一些基本使用，
  • ToolBarZhiHuAct 是在熟悉了 Toolbar 后對知乎主頁面的一個高仿實現。
  • layout和menu文件夾分別是上面提到的兩個Activity的布局文件 和 actionmenu 菜單文件。
  • values、values-v19、values-v21 中包含了一些自定義的 theme，后面用到的時候會順帶講解。

運行效果

按照效果圖，從左到右分別是我們前面提及到的 導航欄圖標、App的logo、標題和子標題、自定義控件、以及 ActionMenu 。

操作步驟

1.布局文件添加toolbar控件

lt;?xml version=quot;1.0quot; encoding=quot;utf-8quot;?gt;
lt;LinearLayout xmlns:android=quot;http://schemas.android.com/apk/res/androidquot;
    xmlns:toolbar=quot;http://schemas.android.com/apk/res-autoquot;
    android:layout_width=quot;match_parentquot;
    android:layout_height=quot;match_parentquot;
    android:orientation=quot;verticalquot;gt;

    lt;android.support.v7.widget.Toolbar
        android:id=quot;@ id/toolbarquot;
        android:layout_width=quot;match_parentquot;
        android:layout_height=quot;wrap_contentquot;
        android:background=quot;@color/color_0176daquot;
        toolbar:logo=quot;@mipmap/ic_launcherquot;
        toolbar:navigationIcon=quot;@mipmap/ic_drawer_homequot;
        toolbar:subtitle=quot;子標題quot;
        toolbar:title=quot;標題quot;gt;

        lt;!--自定義控件--gt;
        lt;TextView
            android:layout_width=quot;wrap_contentquot;
            android:layout_height=quot;wrap_contentquot;
            android:text=quot;自定義控件quot; /gt;
    lt;/android.support.v7.widget.Toolbargt;
lt;/LinearLayoutgt;

添加 action menu 菜單項

新建base_toolbar_menu.xml（注意在AS中的目錄位置），添加action_menu菜單項

lt;?xml version=quot;1.0quot; encoding=quot;utf-8quot;?gt;
lt;menu xmlns:android=quot;http://schemas.android.com/apk/res/androidquot;
    xmlns:app=quot;http://schemas.android.com/apk/res-autoquot;gt;

    lt;item
        android:id=quot;@ id/action_searchquot;
        android:icon=quot;@mipmap/ic_searchquot;
        android:title=quot;@string/menu_searchquot;
        app:showAsAction=quot;ifRoomquot; /gt;

    lt;item
        android:id=quot;@ id/action_notificationquot;
        android:icon=quot;@mipmap/ic_notificationsquot;
        android:title=quot;@string/menu_notificationsquot;
        app:showAsAction=quot;ifRoomquot; /gt;

    lt;item
        android:id=quot;@ id/action_item1quot;
        android:title=quot;@string/item_01quot;
        app:showAsAction=quot;neverquot; /gt;

    lt;item
        android:id=quot;@ id/action_item2quot;
        android:title=quot;@string/item_02quot;
        app:showAsAction=quot;neverquot; /gt;
lt;/menugt;

3 Activity 中調用代碼拿到這 Toolbar 控件，并在代碼中做各種setXXX操作。

import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.widget.Toast;

/**
 * Toolbar的基本使用
 */
public class ToolBarBaseUseAct extends BaseActivity {


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

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

        toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);//設置導航欄圖標
        toolbar.setLogo(R.mipmap.ic_launcher);//設置app logo
        toolbar.setTitle(quot;Titlequot;);//設置主標題
        toolbar.setSubtitle(quot;Subtitlequot;);//設置子標題

        toolbar.inflateMenu(R.menu.base_toolbar_menu);//設置右上角的填充菜單
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.action_search:
                        Toast.makeText(ToolBarBaseUseAct.this, R.string.menu_search, Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_notification:
                        Toast.makeText(ToolBarBaseUseAct.this, R.string.menu_notifications, Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_item1:
                        Toast.makeText(ToolBarBaseUseAct.this, R.string.item_01, Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_item2:
                        Toast.makeText(ToolBarBaseUseAct.this, R.string.item_02, Toast.LENGTH_SHORT).show();
                        break;
                    default:
                        break;
                }
                return true;
            }
        });
    }
}

注意事項

代碼到此已經完成了 Toolbar 的基本使用，注意，是基本使用而已！！！！！下面有幾個代碼里面需要注意的地方：

  • 我們在使用 Toolbar 時候需要先隱藏掉系統原先的導航欄，網上很多人都說給Activity設置一個NoActionBar的Theme。但個人覺得有點小題大做了，所以這里我直接在BaseActivity中調用 supportRequestWindowFeature(Window.FEATURE_NO_TITLE) 去掉了默認的導航欄（注意，我的BaseActivity是繼承了AppCompatActivity的，如果是繼承Activity就應該調用requestWindowFeature(Window.FEATURE_NO_TITLE)）；

  • 如果你想修改標題和子標題的字體大小、顏色等，可以調用setTitleTextColor、setTitleTextAppearance、setSubtitleTextColor、setSubtitleTextAppearance 這些API；

  • 自定義的View位于 title、subtitle 和 actionmenu 之間，這意味著，如果 title 和 subtitle 都在，且 actionmenu選項 太多的時候，留給自定義View的空間就越小；

  • 導航圖標 和 app logo 的區別在哪？如果你只設置 導航圖標（ or app logo） 和 title、subtitle，會發現 app logo 和 title、subtitle 的間距比較小，看起來不如 導航圖標 與 它們兩搭配美觀；

  • Toolbar 和其他控件一樣，很多屬性設置方法既支持代碼設置，也支持在xml中設置

Toolbar 踩坑填坑

坑一：xml布局文件中，Toolbar屬性設置無效

  • 使用toolbar 需要在根布局中添加命名控件，在AS中如果不寫，會有很明顯的報錯哈~
xmlns:toolbar=quot;http://schemas.android.com/apk/res-autoquot;
  • logo、navigationIcon、subtitle、title 什么的要用 toolbar：xxx 設置，android:xxx不生效，如果使用了android:xxx在preview中是看不出來效果的，可以比較直觀的發現。

坑二：Action Menu Item 的文字顏色設置無效

系統默設置了ActionMenu每個Item的文字顏色和大小，系統下默認效果就是下面這樣的

要改變一下item文字顏色：

一： 在values/styles.xml中自定義一個Theme，并設置 android:textColorPrimary 屬性

lt;!--改變一下item文字顏色,如果是通用的話，只需要在values下面的style.xml中配置即可--gt;
    lt;style name=quot;Theme.ToolBar.Base.ItemTextColorquot; parent=quot;Theme.AppCompat.Light.NoActionBarquot;gt;
        lt;item name=quot;android:textColorPrimaryquot;gt;@color/color_redlt;/itemgt;
    lt;/stylegt;

二： toolbar設置popupTheme

有網友說如果把自定義控件換成Button，你會發現Button默認的文字顏色也變成了紅色,我在4.4.2的模擬器上并沒有發現此問題，暫且記錄下。

如果你想要修改 ActionMenu Item 的文字大小，也可以在theme中設置加上如下設置：

lt;item name=quot;android:textSizequot;gt;20splt;/itemgt;

Toolbar仿知乎主頁面

效果圖

功能點說明

  • 右上角使用自定義樣式代替默認系統樣式(3個黑色的點)
  • 在4.4之上的版本，可以看到 Translucent System Bars 詳情見博文 的樣式，低版本的引用系統默認主題。

代碼實例

ToolBarZhiHuAct.java

import android.os.Bundle;
import android.support.v7.widget.Toolbar;

public class ToolBarZhiHuAct extends BaseActivity {

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

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.inflateMenu(R.menu.zhihu_toolbar_menu);

        toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);

        toolbar.setTitle(R.string.home_page);
        toolbar.setTitleTextColor(getResources().getColor(android.R.color.white));
    }
}

activity_tool_bar_zhi_hu.xml

lt;?xml version=quot;1.0quot; encoding=quot;utf-8quot;?gt;
lt;LinearLayout xmlns:android=quot;http://schemas.android.com/apk/res/androidquot;
    android:layout_width=quot;match_parentquot;
    android:layout_height=quot;match_parentquot;
    android:background=quot;@color/color_0176daquot;
    android:fitsSystemWindows=quot;truequot;
    android:orientation=quot;verticalquot;gt;

    lt;android.support.v7.widget.Toolbar
        android:id=quot;@ id/toolbarquot;
        android:layout_width=quot;match_parentquot;
        android:layout_height=quot;wrap_contentquot;
        android:background=quot;@color/color_0176daquot;
        android:theme=quot;@style/Theme.ToolBar.ZhiHuquot;gt;

    lt;/android.support.v7.widget.Toolbargt;

    lt;RelativeLayout
        android:layout_width=quot;match_parentquot;
        android:layout_height=quot;match_parentquot;
        android:background=quot;@android:color/whitequot;gt;

        lt;ImageView
            android:layout_width=quot;60dpquot;
            android:layout_height=quot;60dpquot;
            android:layout_centerInParent=quot;truequot;
            android:background=quot;@mipmap/ic_zhihu_logoquot; /gt;
    lt;/RelativeLayoutgt;

lt;/LinearLayoutgt;

menu/zhihu_toolbar_menu.xml

lt;?xml version=quot;1.0quot; encoding=quot;utf-8quot;?gt;
lt;menu xmlns:android=quot;http://schemas.android.com/apk/res/androidquot;
    xmlns:app=quot;http://schemas.android.com/apk/res-autoquot;gt;

    lt;item
        android:id=quot;@ id/action_searchquot;
        android:icon=quot;@mipmap/ic_searchquot;
        android:title=quot;@string/menu_searchquot;
        app:showAsAction=quot;ifRoomquot; /gt;

    lt;item
        android:id=quot;@ id/action_notificationquot;
        android:icon=quot;@mipmap/ic_notificationsquot;
        android:title=quot;@string/menu_notificationsquot;
        app:showAsAction=quot;ifRoomquot; /gt;

    lt;item
        android:id=quot;@ id/action_settingsquot;
        android:orderInCategory=quot;100quot;
        android:title=quot;@string/menu_settingsquot;
        app:showAsAction=quot;neverquot; /gt;

    lt;item
        android:id=quot;@ id/action_aboutquot;
        android:orderInCategory=quot;101quot;
        android:title=quot;@string/menu_about_usquot;
        app:showAsAction=quot;neverquot; /gt;
lt;/menugt;

values/styles.xml、 values-v19/styles.xml、 values-v21/styles.xml

values/styles.xml

lt;!--在Android 4.4之前的版本上運行，直接跟隨系統主題--gt;
    lt;style name=quot;Theme.ToolBar.ZhiHuquot; parent=quot;AppThemequot;gt;
        lt;!--引用設置白色三點的樣式--gt;
        lt;item name=quot;actionOverflowButtonStylequot;gt;@style/ActionButton.Overflow.ZhiHult;/itemgt;
    lt;/stylegt;

    lt;!--替換右上角 系統默認的黑色的三個點的效果，改為引用的圖片的白色--gt;
    lt;style name=quot;ActionButton.Overflow.ZhiHuquot; parent=quot;android:style/Widget.Holo.Light.ActionButton.Overflowquot;gt;
        lt;item name=quot;android:srcquot;gt;@mipmap/ic_menu_more_overflowlt;/itemgt;
    lt;/stylegt;

values-v19/styles.xml

lt;style name=quot;Theme.ToolBar.ZhiHuquot; parent=quot;Theme.AppCompat.Light.NoActionBarquot;gt;
        lt;!-- Customize your theme here. --gt;
        lt;item name=quot;android:windowTranslucentStatusquot;gt;truelt;/itemgt;
        lt;item name=quot;android:windowTranslucentNavigationquot;gt;truelt;/itemgt;
        lt;item name=quot;actionOverflowButtonStylequot;gt;@style/ActionButton.Overflow.ZhiHult;/itemgt;
    lt;/stylegt;


    lt;!--替換右上角 系統默認的黑色的三個點的效果，改為引用的圖片的白色--gt;
    lt;style name=quot;ActionButton.Overflow.ZhiHuquot; parent=quot;android:style/Widget.Holo.Light.ActionButton.Overflowquot;gt;
        lt;item name=quot;android:srcquot;gt;@mipmap/ic_menu_more_overflowlt;/itemgt;
    lt;/stylegt;

values-v21/styles.xml

lt;style name=quot;Theme.ToolBar.ZhiHuquot; parent=quot;Theme.AppCompat.Light.NoActionBarquot;gt;
        lt;!-- Customize your theme here. --gt;
        lt;item name=quot;android:windowTranslucentStatusquot;gt;falselt;/itemgt;
        lt;item name=quot;android:windowTranslucentNavigationquot;gt;truelt;/itemgt;
        lt;item name=quot;android:statusBarColorquot;gt;@color/color_0176dalt;/itemgt;
        lt;item name=quot;actionOverflowButtonStylequot;gt;@style/ActionButton.Overflow.ZhiHult;/itemgt;
    lt;/stylegt;

    lt;!--替換右上角 系統默認的黑色的三個點的效果，改為引用的圖片的白色--gt;
    lt;style name=quot;ActionButton.Overflow.ZhiHuquot; parent=quot;android:style/Widget.Holo.Light.ActionButton.Overflowquot;gt;
        lt;item name=quot;android:srcquot;gt;@mipmap/ic_menu_more_overflowlt;/itemgt;
    lt;/stylegt;

至此 全部的操作就完成了，運行一下，還不錯….

參考文章：

http://www.jianshu.com/p/79604c3ddcae 感謝D_clock


Tags: 安卓開發

文章來源：http://blog.csdn.net/yangshangwei/article/details/

ads
ads
相關文章
ads

相關文章

ad