Android Material Design之ToolBar的使用

一、前言
  • Toolbar是谷歌在2014年Google IO 大会上推出的一套全新的设计规范Material Design。
  • 它的出现规范了Android开发者APP标题栏的设计风格,极大地提高了开发效率,
  • 而且Material Design设计规范也越来越多出现在我们常用的APP中。所以,学习和使用Toolbar是必要的。
二、功能
  • 设置导航栏按钮;
  • 设置App的logo;
  • 支持设置标题和子标题;
  • 支持添加一个或多个的自定义控件;
  • 支持菜单Action Menu;

Android Material Design之ToolBar的使用_第1张图片

三、使用

1.布局文件Xml中的设置:

	<androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorAccent"
        app:navigationIcon="@drawable/ic_back_white_24dp"
        app:title="标题"
        app:titleTextColor="@color/white">
	 </androidx.appcompat.widget.Toolbar>

2.在style文件中设置出掉之前的ActionBar样式

<resources>
    <style name="Base.AppTheme" parent="Theme.AppCompat">
        <!--去掉原来的ActionBar-->
        <item name="windowActionBar">false</item>
        <item name="android:windowNoTitle">true</item>
        <!-- API Level 22 编译要去点android -->
        <item name="windowNoTitle">true</item>
 	  </style>
</resources>

3.基本设置:

		public class MainActivity extends AppCompatActivity {
	    @Override
 	   protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
      	 //设置Logo
      	 toolbar.setLogo(R.mipmap.push_4);
        // 主标题
        toolbar.setTitle("Title");
        // 副标题
        toolbar.setSubtitle("Sub Title");
        //设置toolbar
        setSupportActionBar(toolbar);
        //左边的小箭头(注意需要在setSupportActionBar(toolbar)之后才有效果)
        toolbar.setNavigationIcon(R.mipmap.back);
        //菜单点击事件(注意需要在setSupportActionBar(toolbar)之后才有效果)
        toolbar.setOnMenuItemClickListener(onMenuItemClick);
  	  }
	}

4.菜单部分
1).首先给toolbar绑定一个菜单

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
    // 绑定toobar跟menu
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
	}

2)、app>res>menu下创建菜单文件menu_main.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"
      xmlns:tools="http://schemas.android.com/tools"
      tools:context=".MainActivity">
 
    <item
        android:id="@+id/action_edit"
        android:icon="@mipmap/push_3"
        android:orderInCategory="80"
        android:title="@string/action_edit"
        app:showAsAction="never"/>
 
    <item
        android:id="@+id/action_share"
        android:icon="@mipmap/push_3"
        android:orderInCategory="90"
        android:title="@string/action_edit"
        app:showAsAction="never"/>
 
    <item
        android:id="@+id/action_settings"
        android:icon="@mipmap/push_3"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="never"/>
	</menu>

showAsAction的值主要是针对这个菜单的显示起作用的,它有三个可选项:

  • always:总是显示在界面上
  • never:不显示在界面上,只让出现在右边的三个点中
  • ifRoom:如果有位置才显示,不然就出现在右边的三个点中

3)、设置菜单的点击事件,前面我们已经看到了toolbar.setOnMenuItemClickListener(onMenuItemClick);这句代码,那么onMenuItemClick的实现如下:

	private Toolbar.OnMenuItemClickListener onMenuItemClick = new Toolbar.OnMenuItemClickListener() {
    @Override
    public boolean onMenuItemClick(MenuItem menuItem) {
        String msg = "";
        switch (menuItem.getItemId()) {
            case R.id.action_edit:
                msg += "Click edit";
                break;
            case R.id.action_share:
                msg += "Click share";
                break;
            case R.id.action_settings:
                msg += "Click setting";
                break;
        }
 
        if(!msg.equals("")) {
            Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
        }
        return true;
    }

你可能感兴趣的:(Material,Desgin)