android ——Toolbar

標籤：values   bsp   ever   code   java代碼   sources   text   public   命名   

Toolbar是我看material design內容的第一個

官方文檔：https://developer.android.com/reference/android/support/v7/widget/Toolbar.html

這是用來替代ActionBar，其實就是狀態列下面的標題列。

想要使用ToolBar，需要隱藏原來的ActionBar，這個可以在主題中修改，在values/styles.xml中做出如下修改：

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

或者：

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

其中Theme.AppCompat.Light.NoActionBar代表淡色主題，Theme.AppCompat.NoActionBar表示深色主題。

在布局檔案xml中這樣寫：

 1 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 2     xmlns:app="http://schemas.android.com/apk/res-auto" 3     android:layout_width="match_parent" 4     android:layout_height="match_parent"> 5      6     <android.support.v7.widget.Toolbar 7         android:id="@+id/toolbar" 8         android:layout_width="match_parent" 9         android:layout_height="?attr/actionBarSize"10         android:background="?attr/colorPrimary"11         android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"12         app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>13     14 </FrameLayout>

xmlns:app指定了新的命名空間，是因為material design是android5.0之後才出現的，有一些屬性5.0以前的系統並不存在，為了相容以前的系統就使用app:popupTheme而不是android:popupTheme。

popupTheme：指定的是彈出 的功能表項目的主題。

然後是java代碼：

1     protected void onCreate(Bundle savedInstanceState) {2         super.onCreate(savedInstanceState);3         setContentView(R.layout.activity_main);4         Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);5         setSupportActionBar(toolbar);6     }

這樣就能看到一個最簡單的Toolbar：

 

 然後是Toolbar的一些設定了，

1、改變Toolbar的顏色，在values/styles.xml中有這樣一下值：

1     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">2         <!-- Customize your theme here. -->3         <item name="colorPrimary">@color/colorPrimary</item>4         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>5         <item name="colorAccent">@color/colorAccent</item>6     </style>

colorPrimary就代表標題列的顏色，colorPrimaryDark代表標題列的顏色，colorAccent代表一些控制項的顏色，更多的就是這樣，圖片來源見浮水印吧。

 

對於具體的顏色的值，就是colorPrimary、colorPrimaryDark、colorAccent顏色的設定在values/colors.xml中可設定：

1 <?xml version="1.0" encoding="utf-8"?>2 <resources>3     <color name="colorPrimary">#3F51B5</color>4     <color name="colorPrimaryDark">#303F9F</color>5     <color name="colorAccent">#FF4081</color>6 </resources>

2、添加功能表項目和點擊事件

先在res裡建立一個menu檔案夾，然後建立一個menu.xml，建立菜單的布局：

 1 <menu xmlns:android="http://schemas.android.com/apk/res/android" 2     xmlns:app="http://schemas.android.com/apk/res-auto"> 3  4     <item 5         android:id="@+id/backup" 6         android:icon="@drawable/ic_backup" 7         android:title="Backup" 8         app:showAsAction="always"/> 9     <item10         android:id="@+id/delete"11         android:icon="@drawable/ic_delete"12         android:title="Delete"13         app:showAsAction="ifRoom"/>14     <item15         android:id="@+id/settings"16         android:icon="@drawable/ic_setting"17         android:title="Settings"18         app:showAsAction="never"/>19 </menu>

解釋一下app:showAsAction屬性，它指定了這個功能表項目是在彈出的菜單中，還是在標題列中變成一個表徵圖，always就是永遠都顯示在Toolbar上，ifRoom表示如果螢幕空間足夠就會顯示，不夠的話就顯示在菜單中，never就永遠的顯示在菜單中，
然後是java代碼,其實就兩個方法需要寫一下先是載入這個菜單布局：

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

然後是點擊事件的設定：

    public boolean onOptionsItemSelected(MenuItem item){        switch (item.getItemId()){            case R.id.backup:                Toast.makeText(MainActivity.this,"backup",Toast.LENGTH_SHORT).show();                break;            case R.id.delete:                Toast.makeText(MainActivity.this,"delete",Toast.LENGTH_SHORT).show();                break;            case R.id.settings:                Toast.makeText(MainActivity.this,"delete",Toast.LENGTH_SHORT).show();                break;            default:                break;        }        return true;    }

3、添加title、subtitle、logo、導覽列表徵圖

這裡就直接修改布局檔案裡的屬性就好了，都不用解釋什麼，想修改什麼翻翻官方文檔就好了：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent">    <android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="?attr/actionBarSize"        android:background="?attr/colorPrimary"        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"        app:title="這是標題"        app:subtitle="這是副標題"        app:logo="@drawable/ic_logo"        app:navigationIcon="@drawable/ic_action_name"        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/></FrameLayout>

效果如下：

 

android ——Toolbar