Android教程 -08 ToolBar的使用和主題的介紹

ActionBar 簡介

視頻爲本篇播客知識點講解,建議採用超清模式觀看, 歡迎點擊訂閱個人優酷

講解ToolBar以前首先須要瞭解 ActionBar, 二者使用起來基本上一致。

Android 3.0 Android 推了 ActionBar 這個控件，而到了2013 年 Google 開始大力地推進所謂的 android style，想要逐漸改善過去 android 紛亂的界面設計，但願讓終端使用者儘量在 android 手機有個一致的操做體驗。

先來看一眼ActionBar的樣子

ActionBar裏面包含logo,標題, 菜單等等,怎麼給應用程序添加ActionBar呢?
ActionBar存在兩個不一樣包下的類, 分別爲兼容低版本的(android.support.v7.app.ActionBar),和不兼容低版本的（android.app.ActionBar）。使用起來基本上沒有區別, 通常狀況都是採用兼容低版本的,全部你們必定不要導錯包。
使用起來首先修改應用程序主題爲包含ActionBar的, 而後讓Activity繼承AppCompatActivity, 這樣就能夠看到ActionBar了

<!--主題-->
  <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

經過getSupportActionBar(); 就能夠獲取兼容低版本的ActionBar, 而後就能夠進行一系列設置。好比設置標題 setTiTle 之類的。

ActionBar 建立菜單

視頻爲本篇播客知識點講解,建議採用超清模式觀看, 歡迎點擊訂閱個人優酷

Android新版本 菜單鍵默認已經不彈出菜單了,而是彈出最近任務列表, 菜單列表集成到了ActionBar的右上角, 能夠隱藏到列表裏, 也能夠顯示到外面。
經過onCreateOptionsMenu 方法加載菜單

public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

經過onOptionsItemSelected 處理菜單的點擊事件

@Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();

        if (id == R.id.action_settings) {
            Toast.makeText(this,"我是設置按鈕",Toast.LENGTH_SHORT).show();
 return true;
        }
        if(id==R.id.action_add){
            Toast.makeText(this,"我是添加按鈕",Toast.LENGTH_SHORT).show();
 return true;
        }
        if(id==android.R.id.home){
            Toast.makeText(this,"home",Toast.LENGTH_SHORT).show();
 return true;
        }
 return super.onOptionsItemSelected(item);
    }

再來看看菜單文件是怎麼定義的

<menu 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" tools:context=".MainActivity">
    <item  android:id="@+id/action_settings" android:orderInCategory="100" android:title="@string/action_settings" app:showAsAction="never"/>

    <!--orderInCategory顯示優先級 orderInCategory值越大優先級越低 -->
    <item  android:id="@+id/action_add" android:orderInCategory="100" android:title="你好" android:icon="@mipmap/ic_launcher" app:showAsAction="ifRoom|withText"/>
    <item  android:id="@+id/action_add2" android:orderInCategory="100" android:title="你好" android:icon="@mipmap/ic_launcher" app:showAsAction="always|withText"/>
   </menu>

有幾個屬性，須要重點介紹下，
title菜單標題，
icon菜單圖標,
orderInCategory顯示的優先 級,
showAsAction 顯示的方式, 其中never表示從不顯示到外面, always一直顯示到ActionBar上面,ifRoom若是ActionBar空間足夠顯示到上面, 空間不夠隱藏到 overflow裏面(就是上面三個點的圖片 點擊彈出的列表中)

Toolbar

視頻爲本篇播客知識點講解,建議採用超清模式觀看, 歡迎點擊訂閱個人優酷

介紹完了ActionBar 咱們再來看看Toolbar的設計理念
Android 5.0 推出material design(材料設計),官方在某些程度上認爲 ActionBar 限制了 android app 的開發與設計的彈性。
Toolbar其實就是爲了取代ActionBar, 由於ActionBar 侷限性太大, ToolBar更利於擴展, 使用方法很類似

如何用Toolbar 取代ActionBar呢 ,

1.去掉ActionBar
首先第一步更改主題, 選擇NoActionBar ,這樣就保證當前應用程序不存在ActionBar了

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        ...
    </style>

2.佈局文件中定義ToolBar

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
  />

3.代碼中設置ToolBar取代ActionBar

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_app_bar);
        Toolbar toolbar= (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);  // 用ToolBar代替ActionBar

    }

Toolbar 能夠用來作什麼呢

使用起來和ActionBar很是類似, 菜單添加都是如出一轍

toolbar.setTitle("我是標題");
   toolbar.setSubtitle("子標題");
   toolbar.setLogo(R.mipmap.ic_launcher);
   toolbar.setNavigationIcon(R.mipmap.ic_launcher);

咱們可能也許會有需求就是讓Toolbar顯示的標題居中,這也不難, Toolbar很是靈活,能夠在裏面添加TextView, 可是還須要把toolbar的標題設置爲空,不然的話顯示的太難看了。

toolbar.setTitle(" ");

 <android.support.v7.widget.Toolbar  android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" >
        <!--gravity 文字在控件中居中 layout_gravity 控件在父容器的位置 -->
        <TextView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:layout_gravity="center" android:layout_centerInParent="true" android:text="我是標題" android:textSize="20sp"/>

    </android.support.v7.widget.Toolbar>

主題設置

視頻爲本篇播客知識點講解,建議採用超清模式觀看, 歡迎點擊訂閱個人優酷

Toolbar能夠單獨設置主題,也能夠單獨添加菜單顏色主題

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:theme=""       // Toolbar主題
        android:popupTheme=""  // 菜單主題控制
          ....
        >


    </android.support.v7.widget.Toolbar>

若是你不單獨給Toolbar設置主題,toolbar就會採用系統默認主題
咱們是能夠給系統主題添加一些條目,控制一些組件的顏色,以下面的主題就設置了三種顏色,根據不一樣的name會自動控制不一樣區域的顏色

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

具體分別控制什麼顏色呢?

1. android:colorPrimaryDark 應用的主要暗色調，statusBarColor默認使用該顏色
2. android:statusBarColor 狀態欄顏色，默認使用colorPrimaryDark
3. android:colorPrimary 應用的主要色調，actionBar默認使用該顏色
4. android:windowBackground 窗口背景顏色
5. android:navigationBarColor 底部欄顏色
6. android:colorForeground 應用的前景色，ListView的分割線，switch滑動區默認使用該顏色
7. android:colorBackground 應用的背景色，popMenu的背景默認使用該顏色
8. android:colorAccent 通常控件的選種效果默認採用該顏色
9. android:colorControlNormal 控件的默認色調　
10. android:colorControlHighlight 控件按壓時的色調
11. android:colorControlActivated 控件選中時的顏色，默認使用colorAccent
12. android:colorButtonNormal 默認按鈕的背景顏色
13. android:textColor Button，textView的文字顏色
14. android:textColorPrimaryDisableOnly RadioButton checkbox等控件的文字
15. android:textColorPrimary 應用的主要文字顏色，actionBar的標題文字默認使用該顏色

後期補充

其實主題還能夠作不少操做,不單單能夠控制主題顏色,還能夠控制動畫之類的,總之很強大 ,

windowBackground 背景
windowBackgroundFallback
windowClipToOutline
windowFrame Dialog 是否有邊框
windowNoTitle 是否有標題
windowFullscreen 是否爲全屏
windowOverscan 是否要求窗體鋪滿整屏幕
windowIsFloating 是否浮在下層之上
windowContentOverlay 設置覆蓋內容背景
windowShowWallpaper 是否顯示壁紙
windowTitleStyle 標題欄Style
windowTitleSize 窗體文字大小
windowTitleBackgroundStyle 標題欄背景style
windowAnimationStyle 切換時的動畫樣式
windowSoftInputMode 在使用輸入法時窗體的適配
windowActionBar 是否打開ActionBar
windowActionModeOverlay 是否覆蓋action
windowCloseOnTouchOutside 是否再點擊外部可關閉
windowTranslucentStatus 是否半透明狀態
windowTranslucentNavigation 是否使用半透明導航
windowDrawsSystemBarBackgrounds 是否繪製系統導航欄背景
statusBarColor 狀態欄顏色
navigationBarColor 導航欄顏色
windowActionBarFullscreenDecorLayout 全屏時的佈局
windowContentTransitions 內容是否轉換
windowActivityTransitions 活動時候轉換

本章教程就講解到這了,歡迎點擊訂閱個人優酷