學習Android的新的UI控件Material Design（一）——Toolbar的使用

本篇文章主要記錄了新的UI控件Material Design的使用其中主要包括下面幾種控件的應用：

—————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————我是分割線——————————————————————-————

1.Toolbar的實現

需要在res/values/styles.xml中修改項目的Theme的主題爲

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

此時ActionBar已經隱藏起來了，接下來的額activity_main.xml的佈局的代碼如下：

<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:laytou_heigth="matcht_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:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.AppBarLayout>
    </FrameLayout>

在MainActivity中的代碼如下

public  class  MainActivity extends AppCompatActivity{
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }
}

將toolbar加載到ActionBar中，然後這時候toolbar就變成了一個actionBar了，雖然看起來沒有多大的差別，但是可以實現了Material Design的功能，然後修改AndroidManifest.xml中如下

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">
    <activity
        android:name=".FruitActivity"
        android:label="Fruits"///添加這一行

這裏創建了一個toolbar.xml文件代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<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="@drawable/ic_backup_black_24dp"
        android:title="Backup"
        app:showAsAction="always"/>

    <item
        android:id="@+id/delete"
        android:icon="@drawable/ic_delete_black_24dp"
        android:title="Delete"
        app:showAsAction="ifRoom"/>

    <item
        android:id="@+id/settings"
        android:icon="@drawable/ic_settings_black_24dp"
        android:title="Settings"
        app:showAsAction="never"/>

</menu>

其中使用到的showAsAction表示按鈕的顯示位置，有三種方法表示不同的位置

修改MainActivity的代碼如下：

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,"you clicked Backup",Toast.LENGTH_SHORT).show();
                break;

            case R.id.delete:
                Toast.makeText(this,"you clicked Delete",Toast.LENGTH_SHORT).show();
                break;

            case R.id.settings:
                Toast.makeText(this,"you clicked Settings",Toast.LENGTH_SHORT).show();
                break;
            default:
        }
        return true;
    }

運行程序就可以的得到Toolbar的效果圖，比Actionbar的效果更加強大