Toolbar的使用总结

作者: Harry66 | 来源:发表于2017-06-18 20:50 被阅读0次

Toolbar中的SearchView
Toolbar的使用总结
MaterialDesign 多个组件使用
Android toolbar inflateMenu 无法加载
meterialDesign注意的一些问题
ToolBar使用笔记
Android ToolBar
ToolBar 封装及在 BaseActivity 和 Base
Android 笔记 —— Toolbar 使用总结
Toolbar的使用经验总结

从Android5.0开始，谷歌推出了Material Design风格的导航控件----Toolbar。粗暴的来说，它是用来替换Actionbar的（原因呢，很多写Toolbar的文章都说了，就不再啰嗦了）。
Toolbar的API中写到，相比Actionbar来说，Toolbar能够支撑更加集中的功能集。Toolbar含有以下可选元素：

A navigation button：导航按钮
A branded logo image：logo图标
A title and subtitle：标题和副标题
One or more custom views：一个或多个自定义view
An action menu：菜单按钮

Toolbar入门

使用v7包里的Toolbar，才能向下兼容。不然只能5.0以上的才能用。

android.support.v7.widget.Toolbar

在使用Toolbar前，要隐藏原来的Actionbar。方法有两种：
- 在AndroidManifest.xml中，给application或者是相应的activity设置相应的主题：
  android:theme="@style/Theme.AppCompat.Light.NoActionBar"
  或自定义style,在设置给application或者是相应的activity:
  <style name="...">
  <item name="windowActionBar">false</item>
  <item name="windowNoTitle">true</item>
  </style>
- 在代码中设置：

          /**
           * 1.一定要设置在setContentView()前边
           * 2.如果activity继承的是AppCompatActivity(AS现在默认的都是AppCompatActivity),
           *   supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
           * 3.如果activity继承的是Activity,
           *   requestWindowFeature(Window.FEATURE_NO_TITLE);
           */
          supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
          setContentView(R.layout.activity_main);

隐藏Actionbar后，就可以使用Toolbar了。
在布局文件中添加Toolbar，

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        app:titleTextColor="#ffffff">
    </android.support.v7.widget.Toolbar>

在activity中，

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

运行后，

toobar-1.PNG

Toolbar各元素基本使用及自定义

导航按钮
- 显示自带的返回按钮，也就是Actionbar中的返回按钮，并点击监听

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

            }
        });
    }

运行后，

toolbar-2.PNG

设置自定义按钮图标
两种方法：
- 在布局文件中

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        app:titleTextColor="#ffffff"
        app:navigationIcon="@mipmap/menu">

- 代码中设置

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(mToolbar);
//        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        mToolbar.setNavigationIcon(R.mipmap.menu);
        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

            }
        });
    }

运行后，

toolbar-3.PNG

设置logo
同样是两种：

app:logo="@mipmap/ic_launcher"

或

 mToolbar.setLogo(R.mipmap.ic_launcher);

运行后，

toolbar-4.PNG

设置标题和副标题

        app:titleTextColor="#ffffff"
        app:title="标题"
        app:subtitle="副标题"
        app:subtitleTextColor="#ffffff"

在代码中设置

        mToolbar.setTitle("标题");
        mToolbar.setTitleTextColor(Color.WHITE);
        mToolbar.setSubtitle("副标题");
        mToolbar.setSubtitleTextColor(Color.WHITE);

运行后，

toolbar-6.PNG

自定义view

 <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="View"
            android:textColor="#ffffff"
            android:layout_gravity="center"
            android:textSize="25sp"/>
    </android.support.v7.widget.Toolbar>

运行后，

toolbar-7.PNG

在代码中设置，

 mToolbar.addView(LayoutInflater.from(this).inflate(R.layout.tv,null));

运行后，

toolbar-8.PNG

菜单按钮

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/m1"
        android:title="分享1"
        android:icon="@drawable/share"
        app:showAsAction="never"/>
    <item
        android:id="@+id/m2"
        android:title="设置2"
        android:icon="@drawable/set"
        app:showAsAction="never"
        />
    <item
        android:id="@+id/m3"
        android:title="分享3"
        android:icon="@mipmap/share"
        app:showAsAction="always"/>
    <item
        android:id="@+id/m4"
        android:title="设置4"
        android:icon="@mipmap/set"
        app:showAsAction="always"/>
    <item
        android:id="@+id/m5"
        android:title="分享5"
        android:icon="@mipmap/share"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/m6"
        android:title="设置6"
        android:icon="@mipmap/set"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/m7"
        android:title="分享7"
        android:icon="@mipmap/share"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/m8"
        android:title="设置8"
        android:icon="@mipmap/set"
        app:showAsAction="ifRoom"/>
</menu>

showAsAction，指定该按钮显示的位置，有几个值可选：always，表示永远显示在actionbar中，如果屏幕空间不够，则不显示；ifRoom，表示屏幕空间够得话显示在actionbar中，不够就显示在overflow中；never，永远显示在overflow中。

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu,menu);
        return true;
    }
 @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
                     ...
        }
        return super.onOptionsItemSelected(item);
    }

运行后，