Android的UI优化--Material Design之ToolBar（2017.06）

ToolBar与我们之前接触的ActionBar有关系，ActionBar就是我们的每一个Activity的标题栏，相比之下只不过ToolBar继承了ActionBar的基础上更加灵活，下面记录一下ToolBar的学习过程：

我们知道每次建立的Activity都会默认的创建ActionBar，

如图，在mainfest.xml文件中的Application的标签下有Android：them的属性

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    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>

这里的Appthem在我们的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>

如红色标识出来的标签所示：这里的Appthem在这里显示为Theme.Appcompt.Light.DarkActionBar；这表示是一个深色的ActionBar主题；我们需要把ActionBar换成ToolBar所以把其改成Theme.Appcompt.Light.NoActionBar；

我们来整理一下Apptheme的所有属性coolPrimary；colorPrimaryDark；colorAccent如图：

Android的UI优化--Material Design之ToolBar（2017.06）

然后我在menu下面创建menu的Item来创建toolbar;如下

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/backup"
        android:icon="@mipmap/ic_launcher_round"
        android:title="备份"
        app:showAsAction="always" />
    <item android:id="@+id/delete"
            android:icon="@mipmap/ic_launcher_round"
        android:title="删除"
        app:showAsAction="ifRoom"/>
    <item android:id="@+id/setting"
        android:icon="@mipmap/ic_launcher_round"
        android:title="设置"
        app:showAsAction="never"/>

</menu>

在MainActivity中实现主要重写菜单的解析后选择事项如下

@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.backup:
            Toast.makeText(this, "你点击了备份", Toast.LENGTH_SHORT).show();
            break;
        case R.id.delete:
            Toast.makeText(this, "您点击了删除", Toast.LENGTH_SHORT).show();
            break;
        case R.id.setting:
            Toast.makeText(this, "你点击了设置按钮", Toast.LENGTH_SHORT).show();
            break;
        default:
            break;
    }

    return true;
}

最后别忘了在MainActivity的onCreate方法中实现获取ToolBar的实例

 protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }
}

好了，最终的实现效果如下

Android的UI优化--Material Design之ToolBar（2017.06）