使用ToolBar实现功能及原理

什么是toolbar

Android 3.0  Android 推了 ActionBar这个控件，而到了2013年Google开始大力地推动所谓的android style，想要逐渐改善过去android纷乱的界面设计，希望让终端使用者尽可能

在 android 手机有个一致的操作体验。ActionBar过去最多人使用的两大套件就是ActionBarSherlock以及官方提供在support library v 7里的AppCompat。

 

oolbar的基本套用:

（1）个性化 Color Palette

我们可以根据我们的app的风格，去定制Color Palette(调色板)，重点有以下几个属性：

 

    colorPrimary 对应ActionBar的颜色。

    colorPrimaryDark对应状态栏的颜色

    colorAccent 对应EditText编辑时、RadioButton选中、CheckBox等选中时的颜色。

 

对于5.0以下的设备，目前colorPrimaryDark无法去个性化状态栏的颜色；底部的navagationBar可能也不一样，更别说设置颜色了。

 

ToolBar的使用:

周知，在使用ActionBar的时候，一堆的问题：这个文字能不能定制，位置能不能改变，图标的间距怎么控制的，由此暴露出了ActionBar设计的不灵活。为此官方提供了ToolBar，并且提供了supprot library用于向下兼容。Toolbar之所以灵活，是因为它其实就是一个ViewGroup，我们在使用的时候和普通的组件一样，在布局文件中声明。

1.隐藏原本ActionBar,通过修改我们的基础主体为: @style/Theme.AppCompat.Light.NoActionBar
(改主体在清单文件里进行修改,你可以改变某个Activity的主题,也可以直接改变应用的主题,应用主题改application节点下内容)

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.example.android.toolbarapp">

    <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"
                  <!--这里是设置ActionBar-->
            android:theme="@style/Theme.AppCompat.Light.NoActionBar">

            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>

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

</manifest

然后我们在XML布局可通过ToolBar添加文本,或者按钮等

效果图

      

 2:Java布局

在布局文件里声明ToolBar

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--设置ToolBar的背景颜色,可以把ToolBar直接当容器使用-->
<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:background="#ffbf00"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <!--你也可以在这里设置标题的文本-->
    <TextView
        android:textColor="#f20606"
        android:textSize="25sp"
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</android.support.v7.widget.Toolbar>
</RelativeLayout>

3: Java代码

代码中初始化ToolBar

对ToolBar做个性化设置:

1.通过:mToolbar.setTitle("主标题!");设置主标题

2.通过:setSupportActionBar(mToolbar);标题栏

3.通过:mToolbar.setLogo(R.mipmap.ic_launcher);设置图标

4:通过: mToolbar.setSubtitle("子标题!");设置子标题

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);
        //设置主标题,必须要在setSupportActionBar代码执行顺序的前面
        mToolbar.setTitle("主标题!");
        //必须有的一步操作,参数就是ToolBar对象
        setSupportActionBar(mToolbar);
        //设置APP Logo
        mToolbar.setLogo(R.mipmap.ic_launcher);
        //设置子标题,会出现在主标题的正下方
        mToolbar.setSubtitle("子标题!");

        //往toolBar填充菜单布局,起效果必须要复写onCreateOptionsMenu
        //在res文件下创建menu文件夹,在创建xml布局文件即可.
        mToolbar.inflateMenu(R.menu.toolbar_menu);

    }

5.设置右上角的菜单点击事件的监听:

        mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                Toast.makeText(MainActivity.this, "你点击的第" + item, Toast.LENGTH_SHORT).show();
                return true;
            }
        });

6.重写onCreateOptionsMenu方法,使用getMenuInflater()填充布局,第二个参数固定是mune,返回值为true,才有效

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

最后在 res下创建一个 menu包,在menu创建一个 XML资源:

toolbar_menu.xml布局:

showAsAction属性共有五个值：ifRoom、never、always、withText、collapseActionView，可以混合使用。

ifRoom:会显示在Item中，但是如果已经有4个或者4个以上的Item时会隐藏在溢出列表中。当然个数并不仅仅局限于4个，依据屏幕的宽窄而定

never:永远不会显示。只会在溢出列表中显示，而且只显示标题，所以在定义item的时候，最好把标题都带上。

always:无论是否溢出，总会显示。

withText:withText值示意Action bar要显示文本标题。Action bar会尽可能的显示这个标题，但是，如果图标有效并且受到Action bar空间的限制，文本标题有可能显示不全

collapseActionView:声明了这个操作视窗应该被折叠到一个按钮中，当用户选择这个按钮时，这个操作视窗展开。否则，这个操作视窗在默认的情况下是可见的，并且即便在用于不适用的时候，也要占据操作栏的有效空间。一般要配合ifRoom一起使用才会有效果。

<?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/action_search"
        android:icon="@mipmap/ic_launcher"
        android:title="item0"/>
    <item
        android:id="@+id/action_item"
        android:icon="@mipmap/ic_launcher"
        android:title="item1"/>
    <item
        android:id="@+id/action_item2"
        android:icon="@mipmap/ic_launcher"
        android:title="item2"
        app:showAsAction="never"/>
</menu>

以上步骤完成后最终实现效果: