12Material Design-Toolbar

2018-04-04 本文已影响86人何惧l

Toolbar的强大之处，它不仅继承了ActionBar的所有功能，而且灵活性高，可以配合其他控件完成一些Material Design的效果

Toolbar的基本使用

首先你要知道，任何一个新建的项目，默认都是ActionBar，那么这个ActionBar到底是从哪里来的呢，打开这个AndrioidManifest.xml文件看看

 <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
       ...
    </application>

在这里，ndroid:theme属性指定了AppTheme主题，那么这个主题又是在哪里定义的呢，打开res/vaalues/style.xml文件

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

可以看到parent主题就是Theme.AppCompat.Light.DarkActionBar，这个就是一个深色的主题，之前项目中自带的ActionBar就是因为指定这个主题才出现的
现在要用Toolbar替代ActionBar，因此要指定一个不到ActionBar主题，通常有Theme.AppCompat.NoActionBar(表示深色主题，将会将界面主题颜色设置为深色，陪衬颜色是淡色)和Theme.AppCompat.Light.NoActionBar(表示淡色主题，将会界面主题颜色设置为淡色，陪衬的颜色是深色)，这里使用淡色主题

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

现在已将ActionBar隐藏起来了，那么接下来就是使用Toolbar来替换ActionBar，修改activity_main.xml中的代码

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
 >

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        />

</FrameLayout>

首先看第四行，这里使用的xmlns:app指定了一个i性能的命名空间，为了是能够兼容之前的老系统
定义一个Toolbar控件，这个控件是V7库提供的，

完成了布局，接下来在MainActivity中

package com.example.tool;

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);
        setSupportActionBar(toolbar);
    }
}

这里只有两行代码，首先找到这个实例，然后调用setSupportActionBar()方法将Toolbar的实例传入，这个就可以，运行程序就可以看到

Toolbar的标准界面.png
虽然看上去和平时没有什么两样，但是他已经是Toolbar，具备了MaterialDesign效果的能力

Toolbar的常用功能

比如修改标题栏上显示的文字，在AndroidManifest.xml中指定

 <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="山丘"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        ...
    </application>

这里的label就是默认的应用名称，当然了也可以自己指定

这样只有一个标题的Toolbar还是太单调了，首先提前准备几张图片来作为按钮的图标，还可以添加一些按钮，右击res-->new-->Driectory，创建一个新的menu文件夹，然后右击这个文件夹，new -->Menu resource file，创建一个toolbar.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">

    <item
        android:id="@+id/backup"
        android:icon="@drawable/ic_backup"
        android:title="Backup"
        app:showAsAction="always"
        />

    <item
        android:id="@+id/delete"
        android:icon="@drawable/ic_delete"
        android:title="Delete"
        app:showAsAction="always"
        />
    <item
        android:id="@+id/settings"
        android:icon="@drawable/ic_settings"
        android:title="Settings"
        app:showAsAction="never"
        />

</menu>

这里使用<item>标签定义action按钮，icon用于指定图标，title用于指定文字
showAsAction来指定按钮显示的位置，常用的有几个
- always表示永远显示在Toolbar中，如果屏幕空间不够则不显示
- ifRoom表示屏幕空间足够的情况下显示在Toolbar中，不够的话就显示在菜单中
- never则表示永远显示在菜单中

修改MainActivity中的代码

package com.example.tool;

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);
        setSupportActionBar(toolbar);
    }


    // 加载这个菜单
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar,menu);
        return true;
    }

    // 处理各个按钮的点击事件
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case R.id.backup:
                Toast.makeText(this,"you clicked Backup",Toast.LENGTH_SHORT).show();
                break;

            case R.id.delete:
                Toast.makeText(this,"you clicked Delete",Toast.LENGTH_SHORT).show();
                break;
            case R.id.settings:
                Toast.makeText(this,"you clicked Settings",Toast.LENGTH_SHORT).show();
                break;
            default:
        }

        return true;
    }
}

onCreateOptionsMenu()方法用于加载我们自定义的菜单文件，
onOptionsItemSelected()方法用于处理各个按钮事件

带有按钮的Toolbar.png
可以看到上面只有两个按钮，因为设置的always，而Settings设置的nerve，这就表示这个永远的显示在菜单中，就是三个点那
当然了，这只是最简单的用法

12Material Design-Toolbar

Toolbar的基本使用

Toolbar的常用功能

猜你喜欢

热点阅读