Material Design系列--Toolbar详细

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

怂猫

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

阅读量647

点赞数

分类专栏： Material库轮子文章标签： android 设计 Material Toolbar 控件

本文链接：https://blog.csdn.net/qq_33306988/article/details/53642160

版权

轮子同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

Material库

4 篇文章 0 订阅

订阅专栏

Material Design
简介：
Material Design，中文名：材料设计语言，是由Google推出了全新的设计语言，谷歌表示，这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。
目的：
让所有应用就有统一的外观

Toolbar

Toolbar 是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件 ，Google 非常推荐大家使用 Toolbar 来作为Android客户端的导航栏，以此来取代之前的 Actionbar 。与 Actionbar 相比，Toolbar 明显要灵活的多（补充：Toolbar继承了Actionbar的所有功能）。它不像 Actionbar一样，一定要固定在Activity的顶部，而是可以放到界面的任意位置。除此之外，在设计Toolbar 的时候，Google也留给了开发者很多可定制修改的余地，这些可定制修改的属性在API文档中都有详细介绍，如：

设置导航栏图标；
设置App的logo；
支持设置标题和子标题；
支持添加一个或多个的自定义控件；
支持Action Menu；

1）. 首先我们先隐藏掉原有的ActionBar
2）.布局引入，为了复用，新建一个toolbar_item布局（其实还有添加依赖的，但是我们建项目的时候，自动添加了）
3）.主布局引入<include layout="@layout/toolbar_item"></include>
4）.Activity设置相关属性
5）.菜单设置
这里写图片描述

1）. 首先我们先隐藏掉原有的ActionBar

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

在配置中可以看到theme是引用style.xml中的AppTheme,如下：

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

这里定义了一个AppTheme的主题，其parent（继承）是Theme.AppCompat.Light.NoActionBar
而我们现在是要用Toolbar替代ActionBar,所以需要指定它是一个不带ActionBar的主题，通常有两种选择，Theme.AppCompat.Light.NoActionBar 和Theme.AppCompat.NoActionBar ，前一种是淡色主题，后者是深色主题，如下图：

这里写图片描述

顺便说下AppTheme下的item的作用，下图的标签跟item的name一一对应，可以在这里直接更改颜色

这里写图片描述

2）.布局引入，为了复用，新建一个toolbar_item布局

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

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

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

这里写图片描述

这时会提示xmlns:app="http://schemas.android.com/apk/res-auto" ，为什么会这样呢？
首先使用xmlns:android 指定一个命名空间，layout_width，layout_height等属性才能用
同理xmlns:app 是指定一个新的命名空间，app:attribute等属性才能用，这是由于Material 很多属性在5.0之前是不存在的，为了兼容以前的系统，我们使用了app:attribute也替换以前的android：attribute
?attr/actionBarSize：有时候我们需要把颜色，数值写成attr属性，这样做是为了屏蔽开发者对应具体数值，比如我们需要设置不同主题下的主色，副色，或者是不同版本的ActionBar大小，亦或者是不同Dpi下的DrawerLayout的宽度等。总的来说就两个字：适应

3）.主布局引入<include layout="@layout/toolbar_item"></include>

4）.Activity中设置属性，看图看代码

这里写图片描述

   private Toolbar mToolbar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //findViewById得到实例，setSupportActionBar（）将实例传入
        mToolbar= (Toolbar) findViewById(R.id.id_Item_toolbar);
        setSupportActionBar(mToolbar);
        //设置Toolbar的属性
        ActionBar actionBar=getSupportActionBar();
        if (actionBar!=null){
            actionBar.setTitle("这是标题");
            actionBar.setSubtitle("这是副标题");
            actionBar.setLogo(R.mipmap.ic_launcher);
            //让导航图标（最左边的图标<-）显示出来，跟drawerLayout配合使用，下一章会用
//        actionBar.setDisplayHomeAsUpEnabled(true);
            //设置导航图标
//        actionBar.setHomeAsUpIndicator(R.mipmap.ic_launcher);
        }

    }

5).接下来实现菜单（Toolbar右边）的显示
这里写图片描述

A、首先在res目录下new->Directory,创建一个menu文件夹，然后再该文件夹中new->Menu resource file，创建一个xml文件，写入几个item

<?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/id_menu_site"
        android:icon="@mipmap/site"
        android:title="位置"
        app:showAsAction="always"/>
    <item
        android:id="@+id/id_menu_search"
        android:icon="@mipmap/abc_ic_search_api_mtrl_alpha"
        android:title="搜索"
        app:showAsAction="ifRoom"
        />
    <item
        android:id="@+id/id_menu_time"
        android:icon="@mipmap/start_time"
        android:title="时间"
        app:showAsAction="never"/>
    <item
        android:id="@+id/id_menu_publish"
        android:icon="@mipmap/publish"
        android:title="编写"
        app:showAsAction="ifRoom|collapseActionView"/>
    <item
        android:id="@+id/id_menu_withText"
        android:icon="@mipmap/ic_launcher"
        android:title="withText"
        android:showAsAction="withText"/>
</menu>

item中的属性有id，icon,title,app:showAsAction ,记住是app:showAsAction=”“而不是 android:showAsAction=”“,否则图标是出不来的， xmlns:app=”http://schemas.android.com/apk/res-auto” 这个就不说了
而app:showAsAction：

app:showAsAction  它有三个可选项
1.always：总是显示在界面上
2.never：不显示在界面上，只让出现在右边的三个点中
3.ifRoom：如果有位置才显示，不然就出现在右边的三个点中

android:showAsAction  这个属性可接受的值有：

1.alaways:这个值会使菜单项一直显示在ActionBar上。

2.ifRoom:如果有足够的空间,这个值会使菜单显示在ActionBar上。

3.never:这个值菜单永远不会出现在ActionBar是。

4.withText:这个值使菜单让它的图标和菜单文本一起显示。（测试只有文本，原因未知）

collapseActionView 
声明了这个操作视窗应该被折叠到一个按钮中，当用户选择这个按钮时，这个操作视窗展开。
否则，这个操作视窗在默认的情况下是可见的，并且即便在用于不适用的时候，也要占据操作栏的有效空间。
一般要配合ifRoom一起使用才会有效果。（不懂，懵）

B、Activity中引入


    @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.id_menu_time:
                Toast.makeText(MainActivity.this,"点击了时间",Toast.LENGTH_SHORT).show();
                break;
            case R.id.id_menu_site:
                Toast.makeText(MainActivity.this,"点击了位置",Toast.LENGTH_SHORT).show();
                break;
            case R.id.id_menu_publish:
                Toast.makeText(MainActivity.this,"点击了编辑",Toast.LENGTH_SHORT).show();
                break;
            case R.id.id_menu_search:
                Toast.makeText(MainActivity.this,"点击了搜索",Toast.LENGTH_SHORT).show();
                break;
            case R.id.id_menu_withText:
                Toast.makeText(MainActivity.this,"点击了withText",Toast.LENGTH_SHORT).show();
                break;
        }
        return true;
    }