领购物优惠券9块9包邮
首页 > 移动开发 > Android开发

Toolbar 详解 · Material Design Part 2

   2016-10-13 0
核心提示：这是一个系列文章，在这个系列里，我会按打造一个Material Design App的路线介绍所有应当掌握和值得掌握的系统组件。你会在这些文章里了解到这些组件的使用和内部实现原理，以及它们背后所反映的Material Design的设计思想，希望你会喜欢。往期回顾 Material

Toolbar 详解 · Material Design Part 2

这是一个系列文章，在这个系列里，我会按打造一个Material Design App的路线介绍所有应当掌握和值得掌握的系统组件。

你会在这些文章里了解到这些组件的使用和内部实现原理，以及它们背后所反映的Material Design的设计思想，希望你会喜欢。

往期回顾

Material Design Part 1 · TextInput详解

Tips

我的每一篇博客都会提供详尽的API介绍，如果你想快速查阅某个功能的API或如何实现，建议Ctrl+F（Commad+F）在本页面搜索关键字查找。

Thanks for reading~!

前言

上一篇我介绍了关于文本输入控件的使用，同时也完成了登录页面。接下来，app会进入主页，主页的控件通常是最多的，那么决定介绍的先后顺序便很重要。

原本我打算先介绍我认为 最重要的组件 CoordinatorLayout ，可是写着写着我发现，由于CoordinatorLayout扮演的是一个“协调者”的角色，如果要完成它的介绍，就需要使用到各种其他的组件。如果不先对这些组件进行一一介绍就直接介绍它的话，会导致文章增加很多其他组件的描述，而这些描述通常都做不到完整和详实。

所以我决定在介绍CoordinatorLayout前，将其他会用到的较为简单的组件一一介绍一遍。那么这一篇，就介绍页面最顶部的组件—— Toolbar 。

我原本想把 CollapsingToolbarLayout 和这篇放在一块写的，但是发现前者要写的东西完全足够支撑起一篇新的文章，所以我会在后面的文章介绍CollapsingToolbarLayout。目前先把简单的都给弄完~ 欢迎大家提意见！:blush:

目录

  1. Toolbar简介
  2. Toolbar方法详解
  3. 代码杂烩

Toolbar简介

Material Design的世界其实就是一个真实世界的缩影，而在真实世界中， 物体的光影效果 、 真实的触感 和 明确合理的运动行为 是我们感受大部分物体的主要渠道。所以，如果我们想要在电子屏幕里达到原质化的设计效果，做好这三点就是关键。

今天要介绍的Toolbar，就是这样一个遵循Material Design规范的组件，它于Android 5.0的时候推出（ 呵呵，现在写还真是早啊 ），其目的是用来取代之前的Actionbar作为Android应用的导航栏。与Actionbar相比，Toolbar更加的灵活和美观：它可以被安放到界面的任何地方，也提供了可定制化的空间。

在Material Design对Toolbar的定义里， Toolbar被视为一个台阶，悬浮于会受它影响的内容页面之上 。Toolbar的宽度应受到所有会越过它的其他视图元素的影响（这句翻译的不好，说白了就是它的宽度应是最大的，大到足以包含所有在其之下的子View）。

那么Toolbar中有哪些元素呢？看图：

Toolbar 详解 · Material Design Part 2

从左到右，依次是：

  • 导航按钮
  • logo
  • 标题与子标题
  • 自定义的view（Toolbar本身继承自ViewGroup）
  • Action Menu

这些元素都提供了相应的方法来设置，接下来，我就结合源码来详细介绍一下Toolbar的方法和XML属性。

Toolbar方法详解

XML属性&常用方法

  • navigationIcon： 设置Navigation Button的图标

  • logo： 设置出现在Toolbar开始位置的logo（位于Navigation Button之后）。

  • title、subtitle： 设置Toolbar的title、subtitle。

  • titleTextAppearance subtitleTextAppearance： 设置title和subtitle的文字样式。

  • titleTextColor subtitleTextColor： 设置title和subtitle的文字颜色。

  • titleMargin titleMarginStart titleMarginEnd titleMarginTop titleMarginBottom： 设置title的Margin，

    如果同时设置titleMargin和titleMarginStart(End,Top,Bottom)，则优先取后面的属性值。

    对应方法： getTitleMargin()、getTitleMargin()、getTitleMargin()、getTitleMargin()、getTitleMargin()获取相应的Margin值

  • contentInsetLeft、contentInsetRight、contentInsetStart、contentInsetEnd： Toolbar的左右两侧都是默认有16dp的padding的，如果你需要让Toolbar上的内容与左右两侧的距离有变化，便可以通过以上四个属性来进行相应的设置。

    比如要让内容紧贴左侧或起始侧便可以将contentInsetLeft或contentInsetStart设为0。

    对应方法：

    setContentInsetsRelative(int,int)——对应start和end

    setContentInsetsAbsolute(int,int)——对应left和right

  • contentInsetStartWithNavigation： 同样的，如果该Toolbar有Navigation button的话，同样也默认有16dp的距离。如果你希望navigation button右侧的内容与button之间的距离有变化，便可以通过该属性来进行相应的设置。

    对应方法： setContentInsetStartWithNavigation(int)

  • contentInsetEndWithActions： 详情见上。该属性是设置Action菜单与其左侧内容的距离的，默认为16dp。

    对应方法：

    setContentInsetEndWithActions(int)

    注 ： 原本想说明下内部源码实现细节，但发现描述起来字数太多且容易给人困惑，如果读者有兴趣的话可以自行阅读，遇到问题欢迎交流。

  • theme： 设置Toolbar的Theme

  • popupTheme： 设置Toolbar上弹出菜单的Theme

代码杂烩

效果图

Toolbar 详解 · Material Design Part 2

Toolbar详解·效果视频1—在线播放—优酷网，视频高清在线观看 http://v.youku.com/v_show/id_XMTc1NzY2OTAxMg==.html

layout/activity_toolbar_demo.xml 

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_toolbar_demo"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.jiandanxinli.smileback.materiallogin.ToolbarDemoActivity">


    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        app:contentInsetEnd="0dp"
        app:contentInsetEndWithActions="0dp"
        app:contentInsetLeft="0dp"
        app:contentInsetStart="0dp"
        app:contentInsetStartWithNavigation="0dp"
        app:logo="@mipmap/ic_launcher"
        app:navigationIcon="@drawable/ic_home_white_24dp"
        app:popupTheme="@style/AppToolbarPopup"
        app:subtitle="子标题"
        app:subtitleTextColor="@color/colorWhite"
        app:theme="@style/AppToolbar"
        app:title="标题"
        app:titleTextColor="@color/colorWhite">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="horizontal">

            <CheckBox
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="hello~"
                android:textColor="@color/colorWhite"
                android:textSize="18sp" />

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

style/AppToolbar.xml 

<style name="AppToolbar" parent="AppTheme">
        <item name="android:textColorSecondary">@color/colorWhite</item>
</style>

style/AppToolbarPopup.xml 

<style name="AppToolbarPopup" parent="AppTheme">
        <item name="actionMenuTextColor">@color/textPrimary</item>
</style>

activity_toolbar_demo_menu.xml 

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:appcompat="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/search"
        android:icon="@drawable/ic_search_white_24dp"
        android:title="搜索"
        android:visible="true"
        appcompat:showAsAction="ifRoom"/>

    <item
        android:id="@+id/notification"
        android:icon="@drawable/ic_notifications_white_24dp"
        android:title="通知"
        android:visible="true"
        appcompat:showAsAction="ifRoom"/>

    <item
        android:id="@+id/feedback"
        android:title="反馈意见"
        android:visible="true"
        appcompat:showAsAction="ifRoom"/>

    <item
        android:id="@+id/about"
        android:title="关于"
        android:visible="true"
        appcompat:showAsAction="ifRoom"/>

</menu>
ToolbarDemoActivity.java 
public class ToolbarDemoActivity extends AppCompatActivity {

    @BindView(R.id.toolbar)
    Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_toolbar_demo);
        ButterKnife.bind(this);

        setSupportActionBar(toolbar);
        if (getSupportActionBar() != null) {
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        }

        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showSnackBar("欢迎来到首页！", toolbar);
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_toolbar_demo_menu, menu);
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.search:
                showToast("搜索功能尚未开放");
                break;
            case R.id.notification:
                showToast("暂时没有未读的通知");
                break;
            case R.id.feedback:
                showToast("客服还没有上班~");
                break;
            case R.id.about:
                showToast("关于页面还在路上~");
                break;
        }
        return super.onOptionsItemSelected(item);
    }

    private void showToast(String message) {
        Toast.makeText(getApplicationContext(), message, Toast.LENGTH_SHORT).show();
    }

    private void showSnackBar(String message, View view) {
        Snackbar.make(view, message, Snackbar.LENGTH_SHORT).show();
    }
}

参考文章

Toolbar | Android官方文档

微信公众号: BugDev「bugdev」

欢迎关注啦~

 
标签： Material Design
反对 0举报 0 评论 0
 

免责声明：本文仅代表作者个人观点，与乐学笔记（本网）无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责，若因作品内容、知识产权、版权和其他问题，请及时提供相关证明等材料并与我们留言联系，本网站将在规定时间内给予删除等相关处理.

  • 我如何将Material Deisgn带入实际产品中
    我如何将Material Deisgn带入实际产品中
    最近，与上海的“谷歌开发者社区”（GDG）一起策划并与大家进行了一期关于Material Design在的话题分享会。这几天我抽空将当天分享的PPT内容再精简整理了一下，并在关键页面配上了对应的文字说明，便于分享给没有来得及到场及更多的朋友。我问过很多人这个问
    12-11 MaterialDesign移动设计
  • Material Design让我打破的思维局限
    Material Design让我打破的思维局限
    这段时间为了研究控件，细看了一下 Material Design，结果发现了很多创新、好用又有趣的东西。如果你想看一看 Material Design 的译文或者控件目录，这样的资源想必你能搜到不少。所以，我就不再锦上添花了，这里主要写的是 Material Design 给我带来的打破思
    11-22 MaterialDesign设计
  • 导航栏分析：iOS 与 Material Design的对比分析
    导航栏分析：iOS 与 Material Design的对比分析
    前阵师傅带着整理设计规范，结束项目后从规范角度去反思，会发现自己还有很多东西要学。交互设计师真的是一个很专业的职业（划重点！），虽然国内市场入门门槛低，但是要做出合理的方案是需要有专业的知识储备的。定义iOS：导航栏能够实现在应用不同信息层级
    11-22 MaterialDesign移动设计
  • Muse UI — Vue2.0 和 Material Design 结合
    Muse UI — Vue2.0 和 Material Design 结合
    Vue 2.0 发布以来，很多 vue 的开源项目都开始了升级计划，我也思考着 vue-carbon 的升级之路，9月开工，11月完工， Muse UI 闪亮登场。 先睹为快 Muse UI 主要用于移动端和一些对浏览器兼容性要求不高的桌面端应用，先上地址: https://github.com/museui/mus
    11-13 Vue.jsMaterialDesign
  • Drawer 详解 ·Material Design Part 3
    Drawer 详解 ·Material Design Part 3
    这是一个系列文章，在这个系列里，我会按打造一个Material Design App的路线介绍所有应当掌握和值得掌握的系统组件。你会在这些文章里了解到这些组件的使用和内部实现原理，以及它们背后所反映的Material Design的设计思想，希望你会喜欢。往期回顾 Material
    11-13 安卓开发
  • Material Design
    Material Design
    经过一周的学习，整合梳理自己学到的知识，与大家分享以下是自己将Material Design中认为比较重要的知识点整合所得，有遗漏或者补充的欢迎大家指出，共同进步！！Material Design（材质设计）一、Material Design是什么？Material Design，中文名：原质化设计
    11-13 设计MaterialDesign
  • Material Animations 4：Circular Reveal Animations
    Material Animations 4：Circular Reveal Anima
    Circular Reveal Animations，官方称之为循环揭露动画效果，是一种用来显示/隐藏一组UI界面元素的动画效果，它是在API 21引入的，对应的类是 ViewAnimationUtils 。 循环揭露动画效果可以和共享元素变换动画组合，用来创造一些有意义的动画效果，自然地告诉用
    10-13 安卓开发
  • Material Design风格常用控件的使用与定制
    Material Design风格常用控件的使用与定制
    你是否还在使用selector来定制Button普通状态、按下状态的变化呢？你是否也想自己的Button有Material Design的阴影效果呢？你是否也想让各种控件轻松变换各种颜色风格呢？那么看完这篇分享，你就会有答案了。二、4种风格的Button 系统默认有4种风格的Button效
    10-07 MaterialDesign
  • 「最美应用」解决通讯录头像难题
    「最美应用」解决通讯录头像难题
    让用户一个人去维护整个通讯录的头像更新十分不现实。一加推出的氢 OS 直戳用户痛点，自动用几何线条去匹配用户头像，使通讯录更倾向于 Material Design 风格，以与系统协调。当然短时间内，氢 OS 并没有匹配其他手机的意愿。 Micopi Pico 可以提供类似氢OS的
    10-07 MaterialDesign
  • Material Animations 2：Shared Element Transition
    Material Animations 2：Shared Element Transi
    元素共享变换（shared element transition）决定了共享的view元素从一个Activity/Fragment 到另一个Activity/Fragment的切换中是如何动画变化的。 请记住，共享元素变换并不是真正实现了两个Activity或者Fragment之间元素的共享，界面还是两个不同界面，只不
    10-07 安卓开发
更多>其他开发
KendoUI2014移动调查报告：HTML5vs原生之辩 WebComponents-面向未来的组件标准
更多>Android开发
说一说Android Studio和IDEA中一个很有用的内存调试插件 安卓中通知功能的具体实现
更多>IOS开发
详解iOS开发中的转场动画和组动画以及UIView封装动画 iOS开发基础之C语言
更多>WP开发
微软官方公布Win10家庭版欧美地区零售价 Win10 Mobile预览版10149已知问题与解决办法汇总
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  网站留言  |  违规举报