說說 Android 酷炫的 Material Design 設計（一）——Toolbar（工具欄）

Material Design 是由 Google 推出的全新的設計語言，谷歌但願它可以爲手機、平板電腦、臺式機和「其餘平臺」提供更一致、更普遍的「外觀和感受」。

Design Support 庫封裝了 Material Design 中最具表明性的一些控件和效果，咱們能夠利用該庫實現酷炫的 Material Design 設計。

讓咱們從 Toolbar（工具欄）開始提及吧O(∩_∩)O哈哈~

每一個活動頂部默認的標題欄是 ActionBar，它只能在活動頂部，因此官方如今推薦直接使用 Toolbar 啦。

1 引入 Toolbar

項目的界面主題定義在 AndroidManifest.xml 的 android:theme 中：

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

			<category android:name="android.intent.category.LAUNCHER" />
		</intent-filter>
	</activity>
</application>
複製代碼

@style/AppTheme 定義在 res/values/styles.xml 中：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

複製代碼

主題默認爲 DarkActionBar，即深色主題的 ActionBar。

使用 Toolbar 以前，須要選定沒有 ActionBar 的主題，可選主題以下：

主題	說明
Theme.AppCompat.Light.NoActionBar	主題色調淺色。
Theme.AppCompat.NoActionBar	主題色調深色。

這裏咱們選定 Theme.AppCompat.Light.NoActionBar。

style 中的 item 表明如下各個部分的主題顏色設置：

佈局文件：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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"
       />
</FrameLayout>

複製代碼

這裏咱們把控件的高度被設定爲 actionBar 的高度。

活動類：

public class MainActivity extends AppCompatActivity {

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

        setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
    }
}
複製代碼

這裏把 Toolbar 傳入 setSupportActionBar 方法。

運行：

2 自定義標題

修改 AndroidManifest.xml，在主活動類配置中加入 android:label：

<activity android:name=".MainActivity"
	android:label="喵星人"
	>
	<intent-filter>
		<action android:name="android.intent.action.MAIN" />

		<category android:name="android.intent.category.LAUNCHER" />
	</intent-filter>
</activity>
複製代碼

若是未指定，那麼默認使用應用名，即 application 中定義的 label 內容。

效果：

怎麼文字變成黑色啦……那麼因是以前咱們把主題改成淡色系，因此 Toolbar 的主色調也是淡色，那上面的各類元素就會天然採用深色系，納尼……

因此咱們必須在以前的佈局文件中，在 Toolbar 中明確指定深色系：

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
複製代碼

效果：

如今好多啦 O(∩_∩)O哈哈~

3 新增按鈕

咱們準備兩張按鈕圖片，一張用於「新增」，另外一張用於「設置」，放在 res/drawable 下：

在 res 下新建一個 menu 目錄：

接着建立 toolbar.xml，定義工具欄按鈕項：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:material="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/add"
        android:icon="@drawable/add"
        android:title="新增"
        material:showAsAction="always" />
    <item
        android:id="@+id/set"
        android:icon="@drawable/set"
        android:title="設置"
        material:showAsAction="ifRoom" />
</menu>
複製代碼

1. 在此，咱們定義了新的命名空間 xmlns:material,這是由於 Material 是 Android 5.0+ 新加入的特性。 2.showAsAction 表示展現方式：

展現方式|說明 always|老是顯示。 ifRoom|若是空間足夠，則顯示。 never|不顯示。

修改活動類代碼：

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

@Override
public boolean onOptionsItemSelected(MenuItem item) {
	switch (item.getItemId()) {
		case R.id.add:
			Toast.makeText(this, "點擊了新增按鈕", Toast.LENGTH_SHORT).show();
			break;
		case R.id.set:
			Toast.makeText(this, "點擊了設置按鈕", Toast.LENGTH_SHORT).show();
			break;
	}
	return true;
}
複製代碼

首先在 onCreateOptionsMenu 中加載菜單配置文件，而後在 onOptionsItemSelected 中處理菜單按鈕點擊事件。

效果：