Android Material Design之Toolbar

最新推荐文章于 2024-01-03 23:12:34 发布

luckyliuqs

最新推荐文章于 2024-01-03 23:12:34 发布

阅读量608

点赞数

分类专栏： Android Material Design

本文链接：https://blog.csdn.net/qq_35507234/article/details/88882006

版权

Android Material Design 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

1.ActionBar

1.1 ActionBar概述

ActionBar是系统原生的标题栏。每个Activity默认的最顶部的那个标题栏就是ActionBar。

1.2 默认的使用方式

ActionBar到底从哪里来呢？其实是根据项目中指定的主题来显示的。在AndridManifest.xml中默认引入的theme如下所示：
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.luckyliuqs.materialdesign">

    <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>

</manifest>
打开styles.xml文件如下所示：
<resources>
    
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        
        <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，这个DarkActionBar就是一个深色的ActionBar主题，默认出现的ActionBar就是因为指定了这个主题才出现的。

1.3 ActionBar缺陷

ActionBar被限定只能位于Activity的顶部，而不能实现一些Material Design效果，因此官方已经不再建议使用ActinBar了。

2.ToolBar

2.1 概述

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

2.2 ToolBar的引入方式

通过在styles.xml中指定parent主题为不带ActionBar的主题。通常选择有Theme.AppCompat.NoActionBar和Theme.AppCompat.Light.NoActionBar这两种主题。

1）Theme.AppCompat.NoActionBar

表示深色主题，它会将界面的主体颜色设为深色，陪衬颜色设为淡色。如下所示：

2）Theme.AppCompat.Light.NoActionBar

表示淡色主题，它会将界面的主体颜色设为淡色，陪衬颜色设为深色。如下所示：

引入方式如下所示：
<resources>
    
    <style name="ToolBarTheme" parent="Theme.AppCompat.Light.NoActionBar">
        
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>
2.3 Activity界面color位置设置详解

如下图所示：

从上图可以看出，每个属性所指定的颜色的位置不一样。

3.ToolBar实例

3.1 实现效果

实现的效果如下图所示：

3.2 添加action按钮

右击res目录->new->Directory，创建一个menu文件夹，然后右击menu文件夹->new->Menu resource file，创建一个toobar.xml文件如下所示：每一个item就是一个action按钮
<?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/mail"
        android:icon="@drawable/ic_mail"
        android:title="邮箱"
        app:showAsAction="always"/>
    <item android:id="@+id/delete"
        android:icon="@drawable/ic_delete"
        android:title="删除"
        app:showAsAction="ifRoom"/>
    <item android:id="@+id/qq"
        android:icon="@drawable/ic_qq"
        android:title="QQ"
        app:showAsAction="never"/>
</menu>
参数说明：

app:showAsAction=""
always：表示永远显示在ToolBar中，如果屏幕空间不够，则不显示。

ifRoom：表示屏幕空间足够的情况下显示在ToolBar中；不够则显示在菜单中。

never：表示永远显示在菜单中。

注意：ToolBar中的action只会显示图标，而菜单中的action只会显示title文字。

icon 用于指定按钮的图标。
title 用于指定按钮的文字。

3.3 设置布局样式

在activity_mian.xml中：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <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"/>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_margin="35dp" />
</RelativeLayout>
注意：这里使用了xmlns:app指定了一个新的命名空间。正是用于布局文件使用了xmlns:android来指定一个命名空间，才可以使用android:id、andrid:layout_width等等属性。

由于Mater Design是在Android 5.0系统才出现的，所以很多Meterial属性在5.0之前的系统中并不存在，为了兼容之前的老系统，这里使用了xmlns:app，这样就可用使用app:attribute属性了。

3.4 在Activity中处理业务

在MainActivity.java中：
public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = findViewById(R.id.toolbar);
        //设置支持的ActionBar
        setSupportActionBar(toolbar);

    }
    //加载toolbar.xml菜单文件
    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.mail:
                Toast.makeText(this,"点击了邮箱图标",Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(this,"点击了删除图标",Toast.LENGTH_SHORT).show();
                break;
            case R.id.qq:
                Toast.makeText(this,"点击了QQ图标",Toast.LENGTH_SHORT).show();
                break;
        }
        return true;
    }
}

4.自定义Toolbar

4.1 自定义Toolbar样式

可以自定义ToolBar，包括返回键样式，背景，高宽等。通过在布局文件中引入AppBarLayout，在AppBarLayout里面嵌套ToolBar，然后为Toolbar指定theme，在style.xml中自定义theme即可。

效果图如下所示：自定义Toolbar的返回键颜色为白色，背景颜色为橙色，指定高度和标题

布局文件如下所示：在AppBarLayout里面嵌套ToolBar
<android.support.design.widget.AppBarLayout
    android:id="@+id/abl"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent"
    android:theme="@style/AppTheme.AppBarOverlay"
    app:elevation="1dp">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:theme="@style/theme_toolbar_white">

    </android.support.v7.widget.Toolbar>

</android.support.design.widget.AppBarLayout>
在style.xml中自定义theme：其中colorControlNormal指定返回键颜色

<style name="theme_toolbar_white" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="colorControlNormal">@color/white</item>
    <item name="android:actionBarSize">50dp</item>
    <item name="android:background">#FF5722</item>
</style>
    
其部分属性如下所示：

colorControlNormal 指定返回键的颜色
android:actionBarSize 指定Toolbar的高度
android:background 指定Toolbar的背景颜色

4.2 使用系统原生返回键

效果图如下所示：

代码如下所示：
public class BaseTitleActivity extends BaseCommonActivity{

    protected Toolbar toolbar;

    @Override
    protected void initViews() {
        super.initViews();
        toolbar = findViewById(R.id.toolbar);
        //设置标题栏
        setSupportActionBar(toolbar);
    }

    /**
     * 设置标题
     * @param title
     */
    @Override
    public void setTitle(CharSequence title) {
        if(!TextUtils.isEmpty(title)){
            super.setTitle(title);
        }
    }

    /**
     * 开启返回功能
     */
    protected void enableBackMenu(){
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case android.R.id.home:
                finish();
                break;
        }
        return super.onOptionsItemSelected(item);
    }
}
4.3 自定义返回键

效果图如下：这里自定义设置返回键为+

自定义返回键方式有两种，如下：

1）在style.xml的自定义them中添加一个item，自定义返回键样式：
<item name="android:navigationIcon">@drawable/ic_add</item>
2）在布局文件中的Toolbar中指定app:navigationIcon属性
app:navigationIcon="@drawable/ic_add"

luckyliuqs

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Android Material Design之Toolbar

1.ActionBar1.1 ActionBar概述 ActionBar是系统原生的标题栏。每个Activity默认的最顶部的那个标题栏就是ActionBar。1.2 默认的使用方式 ActionBar到底从哪里来呢？其实是根据项目中指定的主题来显示的。在AndridManifest.xml中默认引入的theme如下所示：<?xml ...
复制链接

扫一扫