Android 5.X新特性——Toolbar

        Toolbar與Actionbar最大的區別就是Toolbar更加自由、可控。這也是Google在逐漸使用Toolbar替換ActionBar的原因,要使用Toolbar必須引入appcompat-v7支持,並設置主題爲NoActionBar,因此在styles.xml文件中,使用如下所示的代碼進行設置。

<resources>
    <style name="AppTheme" parent="AppTheme.Base" />
    <!-- Base application theme. -->
    <style name="AppTheme.Base" parent="Theme.AppCompat">
        <!--將Actionbar因此,這裏使用Toolbar-->
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <!-- 對應Toolbar顏色 -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <!--對應頂部狀態欄顏色-->
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <!--對應EditText編輯時,RadioButton選中、CheckBox等選中的顏色-->
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>
        樣式配置完後,接着在res/layout/activity_main.xml中加入Toolbar控件.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="test.chenj.study_12_toolbar.MainActivity">
    <!--
    ?attr/actionBarSize:表示根據屏幕的分辨率採用系統默認的高度
    如果低版本也要使用的話,則需要使用v7包的,否則只有api21上纔能有效
    -->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:background="@color/colorPrimary"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize">
        <!--添加Toolbar的子控件-->
        <Button
            android:id="@+id/btn_diy"
            android:layout_width="60dp"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:background="#80ffffff"
            android:text="自定義按鈕"
            android:textColor="#ffffff"
            android:textSize="11sp"/>

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:layout_gravity="center"
            android:text="首頁"
            android:textColor="#ffffff"
            android:textSize="20sp"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="hello_world"
            android:textColor="@android:color/black"
            android:textSize="30sp" />


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

</LinearLayout>


       再來看看MainActivity的代碼。
package test.chenj.study_12_toolbar;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;
import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity {

    private Toolbar mToolbar;

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

        mToolbar = (Toolbar)findViewById(R.id.toolbar);

        //添加Logo
        mToolbar.setLogo(R.mipmap.ic_launcher);
        //主標題
        mToolbar.setTitle("Title");
        //副標題
        mToolbar.setSubtitle("Subtitle");
        //側邊欄按鈕
        mToolbar.setNavigationIcon(R.drawable.back);
        //取代原本的actionbar
        setSupportActionBar(mToolbar);
        //設置NavigationIcon的點擊事件,需要放在setSupportActionBar之後設置纔會生效
        //因爲setSupportActionBar裏面也會setSupportActionBar
        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                show("click NavigationIcon");
            }
        });

        //設置toolbar上的MenuItem點擊事件
        mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()){
                    case R.id.action_edit:
                        show("click edit");
                        break;
                    case R.id.action_share:
                        show("click share");
                        break;
                    case R.id.action_more:
                        show("click more");
                }
                return true;
            }
        });

        //Toolbar裏面包含的子控件
        mToolbar.findViewById(R.id.btn_diy).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                show("點擊自定義按鈕");
            }
        });
        mToolbar.findViewById(R.id.tv_title).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                show("點擊了自定義標題");
            }
        });
    }

    //如果有Menu,創建完後,系統會自動添加到Toolbar上。
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        super.onCreateOptionsMenu(menu);
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    private void show(String msg) {
        Toast.makeText(this,msg,Toast.LENGTH_SHORT).show();
    }
}


       菜單配置與Actionbar類似,代碼如下所示。
<?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"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">
    <item android:id="@+id/action_edit"
        android:icon="@drawable/edit"
        android:orderInCategory="80"
        android:title="EDIT"
        app:showAsAction="ifRoom"/>

    <item android:id="@+id/action_share"
        android:icon="@drawable/share"
        android:orderInCategory="90"
        android:title="SHARE"
        app:showAsAction="ifRoom"/>

    <item android:id="@+id/action_more"
        android:icon="@drawable/more"
        android:orderInCategory="90"
        android:title="MORE"
        app:showAsAction="always"/>
</menu>


       下面是程序運行的效果圖。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章