Design Library出来已经快有一个月了,当时大概看了一下介绍这个新版本变化的译文,内容不多,给我印象最深的就是Percent lib、AppBarLayout 和NavigationView的变化,当然还有Design Lib的一些控件内部实现的变化没有介绍,从而使得在使用新版本的控件时候难免因为版本的不同会发生一些异常,而本人正好在上个星期对一个项目换库时发现了这个问题,什么问题呢?

NavigationView使用注意的问题

就是NavigationView的内部实现发生了改变,它在23.1.0版本之前内部实现是ListView实现的,而在23.1.0(包括这个版本)之后改为由RecyclerView实现,在一般我们使用时候并不会发生什么异常,而我们如果需要添加一个headerView的时候,这时候就需要注意了,如果我们需要获取headerView里面的控件的话,按之前的做法我们只需要直接findViewById()或者通过navigationView.findViewById()就能获取到并使用,而在23.1.0版本之后,由于内部实现发生了改变,此时如果通过findViewById()或者通过navigationView.findViewById()获取headerView里面的控件的话,则会报NullPointerException空指针异常,说明在23.1.0版本之后按这样的方法并不能获取到headerView内控件的实例。

那么我们就来看看NavigationView源码,来看看它的内部实现到底是不是改变了呢?

我找来了两个版本的Design包:分别为23.0.1版本和23.1.0版本。

我们先来看看旧版本的(23.0.1)NavigationView的源码实现:

贴几个主要的,通过一层一层查看,我们发现了导航栏菜单的实现类NavigationMenuView ,它继承于ListView

public class NavigationMenuView extends ListView implements MenuView {...}

而23.1.0版本改变了这个实现,采用RecyclerView实现:

public class NavigationMenuView extends RecyclerView implements MenuView {...}

在23.1.0以后正确做法是不在xml布局中addHeaderLayout,而是在代码中通过inflateHeaderView()添加,这个方法会返回当前inflate的View实例,通过它我们可以找到headerView内的控件:

        View headerView = mNavigationView.inflateHeaderView(R.layout.header);
        mHeaderButton = (Button) headerView.findViewById(R.id.btn_header);
        mHeaderButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "click button!", Toast.LENGTH_SHORT).show();
            }
        });

Design Library 23.1.0的新变化

TextInputLayout添加字符计数功能

平时我们使用EditText用来写入长文本时,通常会在右下角显示一个文本,用来显示当前EditText目前有多少字符了,以前我们实现这个功能通过都是用TextWatcher来监听文本的变化来计算,而新版本的Design包为TextInputLayout添加了这个功能,我们只需要在xml中设置

app:counterEnabled="true"

来开启计数功能,它默认是不开启的,或在代码中设置:

TextInputLayout textInputLayout = (TextInputLayout) findViewById(R.id.til);
        textInputLayout.setCounterEnabled(true);

这样我们的EditText就有计数功能了,效果为:



当然我们还可以设置最大字数限制:

在xml中设置:

app:counterMaxLength="100"

在代码中设置:

TextInputLayout textInputLayout = (TextInputLayout) findViewById(R.id.til);
textInputLayout.setCounterEnabled(true);
textInputLayout.setCounterMaxLength(100);

显然如果需要设置最大的字数,肯定是需要先开启计数功能,设置counterEnabled为true

效果为:

当然这个最大字数的限制仅仅只是个提示作用,意思就是我们输入的字符数量达到这个限额的时候,还可以继续输入,如:



所以,禁止输入的逻辑需要我们自己来实现,我们可以通过结合TextWatcher来实现限制最大字数的逻辑,通过判断当达到最大限额数量时候禁止继续输入

假如你如果想同时使用错误提示和计数这两个功能,那么当然也可以,只不过计数就放到了右下角了,效果如图:

当然还有其它的一些api,虽然并不是新增的,顺便也一起说明一下:

app:hintAnimationEnabled=”true” —设置hint过度到左上角显示是否使用动画过度,默认为true,如果设为false则过度非常生硬

app:hintTextAppearance=”” —设置hint的字体样式,值为一个style

app:errorTextAppearance=”” —设置错误提示的字体样式

app:counterTextAppearance=”” —设置计数字体的样式

app:counterOverflowTextAppearance=”” —这个api比较有趣,这个触发的时机是达到最大输入字数时候,这时计数的字体样式会变为这里设置的样式

下面就演示app:counterOverflowTextAppearance这个api的效果,比如我们可以为它设置当字数达到上限的时候,计数字体就变大和显示另外一种颜色:



这样就非常明显的可以看到区别了。

AppBarLayout新的滚动Flag—snap

按照Google给的解释来说,这个Flag主要是为了确保滚动结束时,View将不会以滚动的中间状态显示,即不会让滚动时未完成的部分显示出来,相反,它会滚动到最近的边缘位置,使其以完全可见或滚动完全的状态显示在屏幕上,这段话可能难以联想到这种效果,那么就以实际效果来看看设置这个snap标志和不设置的区别:

设置snap

为了代码简短,我只截取了AppBarLayout的代码:

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="256dp"
            android:theme="@style/AppTheme.AppBarOverlay">

            <android.support.design.widget.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:contentScrim="@color/colorPrimary"
                app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src="@mipmap/bg"
                    app:layout_collapseMode="parallax"
                    app:layout_collapseParallaxMultiplier="0.7" />

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin"
                    app:popupTheme="@style/AppTheme.PopupOverlay" />
            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>

效果为:

不设置snap

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="256dp"
            android:theme="@style/AppTheme.AppBarOverlay">

            <android.support.design.widget.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:contentScrim="@color/colorPrimary"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src="@mipmap/bg"
                    app:layout_collapseMode="parallax"
                    app:layout_collapseParallaxMultiplier="0.7" />

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin"
                    app:popupTheme="@style/AppTheme.PopupOverlay" />
            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>

效果为:

根据上面两个效果的对比,很明显的就可以发现,snap标志主要的作用就是不会让滚动时未完成的部分显示出来,效果图中加了snap标志的很明显,当往上滚动一点距离的时候,它会弹回来,而滚动到快要到结束状态的时候,则是滚动到最近的边缘位置,使其隐藏起来,此时往下滑动一下,Toolbar就显示出来了,而不加snap标志的效果,则是可以显示滚动时未完成的部分。

支持从AppBarLayout内开始滚动

AppBarLayout现在允许用户滚动从AppBarLayout内,而不是只能从滚动视图内滚动 ,另外可以通过添加DragCallback这种行为可以控制是否可以从AppBarLayout内滚动

为了更好的理解,来两张效果图吧:

23.1.0版本:



23.0.1以前版本:

为了有23.0.1以前版本的效果,我特意找来了我一个在23.0.1以前版本上写的demo来演示



从这两个效果中就可以看出,在旧版本上,我们在AppBarLayout中进行滚动时,发现不能滚动,而在新版本23.1.0上滚动时,却可以在AppBarLayout内进行滚动,这就是新版本的改进

NavigationView可以扩展自定义视图

通过使用app:actionLayout或MenuItemCompat.setActionView()能够为抽屉的菜单项添加自定义视图,这使得NavigationView得到了更好的扩展性

来看一张效果图:



在menu.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">
    <group android:checkableBehavior="single">
        <item
            android:icon="@mipmap/ic_launcher"
            android:title="one"
            app:actionLayout="@layout/action" />
            ...
    </group>
</menu>

或者在代码中设置:

        MenuItem menuItem = mNavigationView.getMenu().getItem(1);
        MenuItemCompat.setActionView(menuItem,R.layout.action);

可以看到菜单项在后面添加了自定义的视图,这更能方便我们扩展功能,就比如博主本人前段时间写的简邮App,菜单项都是一些收件箱、发件箱、草稿箱等,而这些正好需要有提醒邮件数量的功能,之前由于NavigationView扩展性太差,导致这个功能没有加入,而在23.1.0的版本上,对NavigationView的扩展性做了改进,看到图中第二个item项的蓝色区域了吧,这个区域就是随便我们怎么定制视图,从而使得NavigationView和一些第三方的抽屉可以媲美了

Percent百分比布局库新增支持宽高比

百分比布局库按我的理解就是:

百分比布局库是以父ViewGroup的宽高为基础,根据子View(ViewGroup)所设置的百分比来动态设置子View(ViewGroup)的宽高

以往百分比布局只支持分别设置宽和高的百分比来设置的,而这次新增的功能,是可以通过设置宽高比来设置了,通过设置只有一个单一的宽度或高度和使用app:aspectRatio设置宽高比,那么PercentFrameLayout或PercentRelativeLayout会自动调整其它尺寸

Palette支持从一个Bitmap的特定区域提取颜色

Palette可以从图像中获取颜色,现在新增了一个方法setRegion(),支持从一个位图的一个特定区域提取

RecyclerView的动画系统变得更好

通过使用ItemAnimator新增的canReuseUpdatedViewHolder()方法,你可以选择重用现有ViewHolder,使得其支持Item的内容动画

之前我们定义RecyclerView的Item动画往往是通过继承RecyclerView.ItemAnimator来实现的,而新版本则推荐我们继承于RecyclerView.SimpleItemAnimator类来实现我们的动画,因为这个类封装新的api同时也提供了旧的api的支持,而且有些方法已经从这个版本中移除了,比如以前我们是通过recyclerView.getItemAnimator().setSupportsChangeAnimations(false)这个方法来设置Item的内容改变时的动画支持,而新版本中这个方法将不再有效,而是需要通过下面的代码设置:

ItemAnimator animator = recyclerView.getItemAnimator();
if (animator instanceof SimpleItemAnimator) {
  ((SimpleItemAnimator) animator).setSupportsChangeAnimations(false);
}

Material Design Library 23.1.0的新变化与代码实战的更多相关文章

  1. [转]Material Design Library 23.1.0的新变化与代码实战

    Design Library出来已经快有一个月了,当时大概看了一下介绍这个新版本变化的译文,内容不多,给我印象最深的就是Percent lib.AppBarLayout 和NavigationView ...

  2. C# 6.0的新变化

    自动属性初始化 (Initializers for auto-properties) 以前我们是这么写的 为一个默认值加一个后台字段是不是很不爽,现在我们可以这样写 只读属性的初始化(Getter-o ...

  3. 自定义 Material Design风格的提示框

    关闭 自定义 Material Design风格的提示框 2016-04-24 10:55 152人阅读 评论(0) 收藏 举报 版权声明:本文为博主原创文章,未经博主允许不得转载. 其实在14年谷歌 ...

  4. 【Android】进入Material Design时代

    由于本文引用了大量官方文档.图片资源,以及开源社区的Lib和相关图片资源,因此在转载的时候,务必注明来源,如果使用资源请注明资源的出处,尊重版权,尊重别人的劳动成果,谢谢! Material Desi ...

  5. Android 5.0 技术新趋势

    由于 Android 的版本分裂比较严重,整个新系统升级可能需要一两年甚至更长时间.所以目前使用 Android 5.0 的大部分是喜欢尝鲜的用户,同时现在市场上能够很好支持 Android 5.0 ...

  6. Android Material Design-Creating Apps with Material Design(用 Material Design设计App)-(零)

    转载请注明出处:http://blog.csdn.net/bbld_/article/details/40400031 翻译自:http://developer.android.com/trainin ...

  7. Android Lollipop 5.0 经典新特性回顾

    *Tamic 专注移动开发! 更多文章请关注 http://blog.csdn.net/sk719887916 虽然Android已到了7.0 ,但是我们还是不能忘怀视觉革命性改变的5.0,今天回顾下 ...

  8. 使用Material Design Tint和视图详解

    视图 首先来讲Material Design 视图的概念,在新的api中,新添加了z轴的概念,z轴垂直于屏幕,用来表现元素的层叠关系,z值(海拔高度)越高,元素离界面底层(水平面)越远,投影越重,这里 ...

  9. 用户登录(Material Design + Data-Binding + MVP架构模式)实现

    转载请注明出处: http://www.cnblogs.com/cnwutianhao/p/6772759.html MVP架构模式 大家都不陌生,Google 也给出过相应的参考 Sample, 但 ...

随机推荐

  1. ABP文档 - Javascript Api - Message

    本节内容: 显示信息 确认 Message API给用户显示一个信息,或从用户那里获取一个确认信息. Message API默认使用sweetalert实现,为使sweetalert正常工作,你应该包 ...

  2. Linux学习日记(二)

    在linux上运行.Net程序 并安装Linux网站 一.环境 ubuntu14.10(桌面版 官网下载的最新版) jexus5.6.3 正式版 MonoDevloper (安装完后里面有个Ubunt ...

  3. Nginx+PHP On windows

    前期准备 Nginx 下载 http://nginx.org/   PHP下载 PHP Windows binaries       问题 问题1: opened a DOS window to la ...

  4. 2016 Web开发资源工具大搜罗

    来源于:https://zhuanlan.zhihu.com/p/22730771 作者:余博伦链接:https://zhuanlan.zhihu.com/p/22730771来源:知乎著作权归作者所 ...

  5. css secrets----multiple borders

    原始文档: https://www.zybuluo.com/freeethy/note/193574 box-shadow solution 只能实现solid border box-shadow表现 ...

  6. Jmeter使用入门

    修改时间 修改内容 修改人 2016.3.12 创建 刘永志 2016.6.18 完成 刘永志 Jmeter简介 Jmeter的基本概念 百度百科: Apache JMeter是Apache组织开发的 ...

  7. XMLHTTP中setRequestHeader方法和参数

    注意:在FF里面需要将open方法放在setRequestHeader之前 一.为何要用到setRequestHeader 通 常在HTTP协议里,客户端像服务器取得某个网页的时候,必须发送一个HTT ...

  8. 新浪微博客户端(35)-使用NSMutableAttributedString实现多行文本的效果

    DJComposeViewController.m import "DJComposeViewController.h" #import "DJAccountTool.h ...

  9. HttpClient请求返回JSON、图片

    /** * Created by RongGuang on 2015/9/19. */ public class RongHttp { /** * Http Post请求 * @param url * ...

  10. jquery选中下拉列表的某个值

    $('#villageToiletAnn').val('xxx'); id是select的ID,不是option的ID