美文网首页
Material Design 系列之 Toolbar 开发详解

Material Design 系列之 Toolbar 开发详解

作者: Time_x | 来源:发表于2020-12-02 09:16 被阅读0次

    前言

    在 2014 年 Google IO 大会上,Google 推出了一套全新的设计规范 Material Design,这也为广大的 Android 开发者带来了福音,不用像以前一样照着 IOS 视觉稿来开发 Android APP,Material Design 的视觉风格本身就比较炫酷。

    而 Google 也为我们提供符合 Material Design 风格的一系列组件,这大大的提高了我们的开发效率。由于 APP 改版在做 Material Design 化,所以后面会结合项目中的使用情况写几篇关于 Material Design 组件的文章,第一篇就从 Toolbar 开始吧。

    一、ToolBar 介绍

    Toolbar 是 Android5.0 中新引入的一个控件,其出现的目的就是为了取代 ActionBar。

    而 Actionbar 在显示上应该算是应用 UI 的一部分,但是开发者又不能对其进行完全控制,因为它毕竟是由系统创建并对其进行相关参数的初始化。所以在实际开发中,很多开发者都是用布局生成一个模拟的 Actionbar 来代替系统的 Actionbar,基于这一点,Android 在 5.0 后推出一个新的控件 Toolbar 来取代 ActionBar。

    image

    二、ToolBar 属性

    整理 Toolbar 比较常用的属性

    1、toolbar:navigationIcon 设置 navigation button

    2、toolbar:logo 设置 logo 图标

    3、toolbar:title 设置标题

    4、toolbar:titleTextColor 设置标题文字颜色

    5、toolbar:subtitle 设置副标题

    6、toolbar:subtitleTextColor 设置副标题文字颜色

    7、toolbar:titleTextAppearance 设置 title text 相关属性,如:字体,颜色,大小等等

    8、toolbar:subtitleTextAppearance 设置 subtitle text 相关属性,如:字体,颜色,大小等等

    9、toolbar:logoDescription logo 描述

    10、android:background Toolbar 背景

    11、android:theme 主题

    三、ToolBar 使用

    本文是以最新的 androidx 环境下讲解,其实使用一模一样,就是包名有所变化。

    • 使用 ToolBar 确保 Activity 继承的是 AppCompatActivity,

    • 在应用清单中,将 application 元素设置为使用 appcompat 的其中一个 NoActionBar 主题。使用这些主题中的一个可以防止应用使用原生 ActionBar 类提供应用栏。

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

    xml 布局文件中添加 Toolbar 控件

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:subtitleTextColor="#FFF"
            app:titleTextColor="#FFF"
            tools:ignore="MissingConstraints" />
    

    Activity 中初始化 Toolbar 相关属性

          // 设置ToolBar标题
          toolbar.setTitle("ToolBar");
          // 设置ToolBar副标题
        toolbar.setSubtitle("this is toolbar");
        // 设置navigation button
        toolbar.setNavigationIcon(getResources().getDrawable(R.drawable.ic_baseline_arrow_back_24,null));
        // 设置Logo图标
        toolbar.setLogo(getResources().getDrawable(R.drawable.ic_baseline_group_24,null));
          // 设置溢出菜单的图标
        toolbar.setOverflowIcon(getResources().getDrawable(R.drawable.ic_baseline_more_vert_24,null));
        // 设置Menu
        toolbar.inflateMenu(R.menu.toolbar_menu);
    
        // 设置Navigation Button监听
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
          public void onClick(View v) {
                    finish();
        }
      });
    
          // 设置Menu监听
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
              @Override
            public boolean onMenuItemClick(MenuItem item) {
    
            switch (item.getItemId()) {
            case R.id.collect:
                Toast.makeText(ToolBarActivity.this, "收藏", Toast.LENGTH_SHORT).show();
                break;
            case R.id.outLogin:
                Toast.makeText(ToolBarActivity.this, "退出登录", Toast.LENGTH_SHORT).show();
                break;
            case R.id.appModel:
                Toast.makeText(ToolBarActivity.this, "夜间模式", Toast.LENGTH_SHORT).show();
                break;
        }
        return false;
            }
        });
    

    以上代码都是 Toolbar 的基础设置,这里附上 Menu 的布局文件

        <?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/outLogin"
        android:title="退出登录" />
    <item
        android:id="@+id/appModel"
        android:title="夜间模式" />
    
    <item
        android:id="@+id/collect"
        android:icon="@drawable/ic_baseline_stars_24"
        android:title="收藏"
        app:showAsAction="ifRoom" />
        </menu>
    

    menu 文件中我们设置了 3 个 item,但是根据上面图片看到,弹出气泡只显示 2 个,收藏按钮是以图片形式展示的。

    所以需要注意的是:app:showAsAction 属性 ,这个属性是设置菜单该显示方式,取值有 5 种,主要应用的有 ifRoom、never、always 这三种,

    • ifRoom 表示 如果 Toolbar 上有显示空间就显示在 Toolbar 上,如果没有空间就展示在溢出菜单里;
    • never 表是总是显示在溢出菜单里;
    • always 表示总是显示在 Toolbar 上;

    四、ToolBar 案例

    根据以上学习,我们实现一个开发中常见的效果:

    image
          <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:contentInsetStartWithNavigation="0dp"
            app:subtitleTextColor="#FFF"
            app:titleTextColor="#FFF"
            tools:ignore="MissingConstraints">
    
    <EditText
        android:textSize="14dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/shape_toolbar"
        android:hint="请输入搜索关键字"
        android:padding="5dp" />
        </androidx.appcompat.widget.Toolbar>
    

    ``````

         toolbar.setNavigationIcon(getResources().getDrawable(R.drawable.ic_baseline_arrow_back_24, null));
          toolbar.inflateMenu(R.menu.toolbar_case_menu);
    

    注意:默认 NavigationIcon 和 Title 之间有一定间距,要想清除这个间距,很简单,只需要在 Toolbar 属性里加上一行

    <pre data-tool="mdnice编辑器" style="margin: 10px 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.54902) 0px 2px 10px;">app:contentInsetStartWithNavigation="0dp" </pre>

    五、总结

    Material Design 风格的控件,本人特别喜欢,感觉 android UI 界面现在越来越漂亮,很多朋友项目都已经重构,选择 Material Design 风格控件,希望本文对 android 初学者有所帮助,一起共勉!

    相关文章

      网友评论

          本文标题:Material Design 系列之 Toolbar 开发详解

          本文链接:https://www.haomeiwen.com/subject/ftyswktx.html