Material Design之Toolbar的简单使用

  Toolbar也是在一个 Material Design 风格的导航控件 ,以此来取代之前的 Actionbar 。与 Actionbar 相比, Toolbar 明显要灵活的多,可以添加导航栏图标 、 App的logo 、 标题和子标题 、 自定义控件 、以及 ActionMenu等,效果图如下:


Material Design之Toolbar的简单使用_第1张图片

那么我们就来学习一下如何使用它吧。

一、按照惯例,先创建项目,然后添加v7的依赖包

compile 'com.android.support:appcompat-v7:25.1.1'

二、添加布局文件


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_home"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.wangguifa.toolbartest.HomeActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#4054B2">

        
        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="自定义标题"
            android:textColor="#ffffff"
            android:textSize="11sp" />
    android.support.v7.widget.Toolbar>
RelativeLayout>

这样ToolBar就算创建好了,效果如下:


Material Design之Toolbar的简单使用_第2张图片

  你会发现怪怪的,没错,那是因为没有隐藏掉actionBar,通过一下方法隐藏actionBar就可以了:
在布局代码中给activity设置theme:

android:theme="@style/Theme.AppCompat.Light.NoActionBar"

或者在java代码中给activity设置:

requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_home);

他俩效果是一样的。

你以为到这就完了?其实并没有,下面开始我们学习些ToolBar的其他用法吧:

package com.wangguifa.toolbartest;

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

public class HomeActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);
        Toolbar mToolBar = (Toolbar) findViewById(R.id.toolbar);
        // 左上角按钮图标
        mToolBar.setNavigationIcon(R.drawable.back);
        // 设置logo图标
        mToolBar.setLogo(R.mipmap.ic_launcher);
        // 设置主标题,若不设置,则默认为App的名字
        mToolBar.setTitle("主标题");
        // 设置主标题颜色
        mToolBar.setTitleTextColor(Color.WHITE);
        // 设置副标题
        mToolBar.setSubtitle("副标题");
        // 设置副标题颜色
        mToolBar.setSubtitleTextColor(Color.RED);

        // 设置NavigationIcon的点击事件
        mToolBar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 执行对应操作,这里使用Toast演示
                Toast.makeText(HomeActivity.this, "您点击了返回键", Toast.LENGTH_SHORT).show();
            }
        });

        // 加载Menu布局
        mToolBar.inflateMenu(R.menu.toolbar_menu);
        // menu点击事件
        mToolBar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.menu_1:
                        // 执行对应操作,这里使用Toast演示
                        Toast.makeText(HomeActivity.this, "您点击了menu_1", Toast.LENGTH_SHORT).show();
                        return true;
                    case R.id.menu_2:
                        // 执行对应操作,这里使用Toast演示
                        Toast.makeText(HomeActivity.this, "您点击了menu_2", Toast.LENGTH_SHORT).show();
                        return true;
                    case R.id.menu_3:
                        // 执行对应操作,这里使用Toast演示
                        Toast.makeText(HomeActivity.this, "您点击了menu_3", Toast.LENGTH_SHORT).show();
                        return true;
                    default:
                        return false;
                }
            }
        });
    }
}

对应的Menu文件:


<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=".HomeActivity">
    <item
        android:id="@+id/menu_1"
        android:icon="@drawable/ic_menu_camera"
        android:title="menu_1"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/menu_2"
        android:icon="@drawable/ic_menu_gallery"
        android:title="menu_2"
        app:showAsAction="never" />
    <item
        android:id="@+id/menu_3"
        android:icon="@drawable/ic_menu_slideshow"
        android:title="menu_3"
        app:showAsAction="never" />
menu>

  你也许会问app:showAsAction=”ifRoom”这个是什么意思?其实这是跟android:showAsAction属性差不多,showAsAction属性共有五个值:ifRoom、never、always、withText、collapseActionView,可以混合使用。
ifRoom ToolBar如果有位置就显示在ToolBar上,没有则隐藏。
never 永远不会显示在ToolBar上,会存在更多item里面(点击竖向三个点后显示)。
always 无论ToolBar空间是否够,都显示。
withText 该值示意ToolBar要显示文本标题。
collapseActionView 声明了这个操作视窗应该被折叠到一个按钮中,当用户选择这个按钮时,这个操作视窗展开。否则,这个操作视窗在默认的情况下是可见的,并且即便在用于不适用的时候,也要占据操作栏的有效空间。一般要配合ifRoom一起使用才会有效果。
切记这里使用app:showAsAction=”“而不是android:showAsAction。

最后还可以在ToolBar中添加各种需要的控件,如ImageView、TextView、Button等。

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#4054B2">

        
        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="自定义标题"
            android:textColor="#ffffff"
            android:textSize="11sp" />
    android.support.v7.widget.Toolbar>

以上就是ToolBar的简单使用,若有什么不准备或者错误的地方请及时联系我更正。

你可能感兴趣的:(Android)