原文地址:http://blog.csdn.net/lavor_zl/article/details/51295364
谷歌在推出Android5.0的同时推出了全新的设计Material Design,谷歌为了给我们提供更加规范的MD设计风格的控件,在2015年IO大会上推出了Design支持包,Design常用的新控件有下面8种。

1. TextInputLayout(文本输入布局)


TextInputLayout的作用是将EditText包裹起来,使得EditText的android:hint属性的值以浮动标签的形式显示出来,同时可以通过setErrorEnabled(boolean)setError(CharSequence)来显示错误信息。

在xml文件中定义TextInputLayout:

    <android.support.design.widget.TextInputLayoutandroid:id="@+id/text_input_layout"android:layout_width="match_parent"android:layout_height="wrap_content"><EditTextandroid:hint="作者"android:layout_width="match_parent"android:layout_height="wrap_content" /></android.support.design.widget.TextInputLayout>

在java文件中设置错误信息:

        this.textinputlayout.setErrorEnabled(true);this.textinputlayout.setError("作者不能包含标点符号");

2. TabLayout(选项卡布局)


Tablayout提供横向布局显示选项卡,它取代了ActionBar添加选项卡的方式。它经常与ViewPager配合使用。

在xml文件中定义TabLayout:

        <android.support.design.widget.TabLayoutandroid:id="@+id/tab_layout"android:layout_width="match_parent"android:layout_height="wrap_content"></android.support.design.widget.TabLayout>  

在java文件中添加选项卡:

        tablayout.addTab(tablayout.newTab().setText("Tab1"));tablayout.addTab(tablayout.newTab().setText("Tab2"));tablayout.addTab(tablayout.newTab().setText("Tab3"));

Tablayout与ViewPager配合使用:
- tablayout.setupWithViewPager();
这种方法下面选项卡的标题由ViewPager决定
- viewPager.addOnPageChangeListener(new TabLayoutOnPageChangeListener(tablayout));
这种方法下面选项卡的标题由Tablayout决定

3. Snackbar


Snackbar提供比Toast轻量级的反馈操作,谷歌推荐使用Snackbar替代Toast。Snackbar显示或者消失的时候有一个回调方法。

        //tablayout是Snackbar努力找到持有自己的视图Snackbar snackbar=Snackbar.make(tablayout,"我是Snackbar",Snackbar.LENGTH_LONG);//为snackbar设置回调方法snackbar.setCallback(new Snackbar.Callback() {@Overridepublic void onDismissed(Snackbar snackbar, int event) {super.onDismissed(snackbar, event);Log.i("Snackbar","Snackbar消失了");}@Overridepublic void onShown(Snackbar snackbar) {super.onShown(snackbar);Log.i("Snackbar","Snackbar出现了");}});//显示snackbarsnackbar.show();  

4. FloatingActionButton(浮动按钮)


FloatingActionButton在用户界面中通常是一个漂浮的小圆圈,它有自身独特的动态效果,比如变形、弹出、位移等等。

FloatingActionButton默认的背景颜色是主题的colorAccent,还可以通过app:backgroundTint来修改,也可以通过android:backgroundTint属性修改,但是android:backgroundTint属性只能在API21及以上使用。

FloatingActionButton的定义很简单:


            <android.support.design.widget.FloatingActionButtonandroid:id="@+id/fab_add_task"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/ic_add_circle_pink_400_18dp"app:backgroundTint="@color/blue"app:fabSize="normal" />  

5. NavigationView(导航视图)


NavigationView顾名思义是导航视图,一般与DrawerLayout(抽屉布局)联合使用。它为应用程序提供标准的导航菜单,菜单内容可以通过一个xml菜单文件来填充。

在xml文件中定义NavigationView


            <android.support.design.widget.NavigationViewandroid:id="@+id/navigation_menu"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_gravity="start"android:fitsSystemWindows="true"app:headerLayout="@layout/drawer_navigation_header"app:menu="@menu/drawer_navigation_menu"/>  
  • app:headerLayout:表示NavigationView的头部布局
  • app:menu:表示NavigationView的导航菜单

头部布局很简单就是一个普通的布局文件,我们来看看导航菜单的定义吧。


<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android"><group android:checkableBehavior="single"><item
            android:id="@+id/drawer_home"android:icon="@drawable/ic_home_black_24dp"android:title="@string/home" /><item
            android:id="@+id/section"android:icon="@drawable/ic_more_horiz_black_24dp"android:title="分组1"><menu><item
                    android:id="@+id/drawer_favourite"android:icon="@drawable/ic_favorite_black_24dp"android:title="@string/favourite" /><item
                    android:id="@+id/drawer_downloaded"android:icon="@drawable/ic_file_download_black_24dp"android:title="@string/downloaded" /></menu></item><item
            android:id="@+id/section2"android:title="分组2"><menu><item
                    android:id="@+id/drawer_more"android:icon="@drawable/ic_more_horiz_black_24dp"android:title="@string/more" /><item
                    android:id="@+id/drawer_settings"android:icon="@drawable/ic_settings_black_24dp"android:title="@string/settings" /></menu></item></group></menu>  

我们来分析一下该xml文件:
group:表示组
android:checkableBehavior:可以接受下面3种值
- single 组中只有一个菜单项可以checked
- all 组中所有菜单项可checked
- none 组中所有菜单项都不可checked

item:表示项,下面可以有子菜单, itemitem会默认有分割线分开。

6. AppBarLayout(应用程序栏布局)


AppBarLayout是一个垂直的线性布局,实现了Material Design概念的应用程序栏,支持滚动手势。
它的子视图提供所需的滚动行为:
- 在java文件中通过setScrollflags(int)设置
- 在xml布局文件中通过““

AppBarLayout经常作为CoordinatorLayout的直接子视图使用。
AppBarLayout的作用是把AppBarLayout包裹的内容都作为应用程序栏。

我们在xml文件中定义一个AppBarLayout,AppBarLayout下面有一个Toolbar和一个TabLayout


         <android.support.design.widget.AppBarLayoutandroid:id="@+id/app_bar_layout"android:layout_width="match_parent"android:layout_height="wrap_content"><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"app:layout_scrollFlags="scroll|enterAlways"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="?attr/colorPrimary"android:fitsSystemWindows="true"app:popupTheme="@style/ThemeOverlay.AppCompat.Light"app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"></android.support.v7.widget.Toolbar><android.support.design.widget.TabLayoutandroid:id="@+id/tab_layout"android:layout_width="match_parent"android:layout_height="wrap_content"></android.support.design.widget.TabLayout></android.support.design.widget.AppBarLayout>  

我们向上滑动AppBarLayout看看有什么效果

此时我们发现Toolbar被隐藏了,我们再在向下滑动AppBarLayout,发现Toolbar又出来了。
这就相当于是一个可以折叠的工具栏。

这是因为Toolbar设置了app:layout_scrollFlags="scroll|enterAlways"
app:layout_scrollFlags属性里面必须至少启用scroll这个flag,这样这个view才会滚动出屏幕,否则它将一直固定在顶部。可以使用的其他flag有:
- enterAlways: 一旦向下滚动,不管是否继续滚动,该view都会变为可见。
- enterAlwaysCollapsed: 这个属性是作为enterAlways属性的附加属性使用的,这个flag定义的是何时进入,,当你定义了一个minHeight,并且定义了enterAlways属性,那么view将在到达这个最小高度的时候开始显示,并且从这个时候开始慢慢展开,当滚动到顶部的时候展开完。
- exitUntilCollapsed: 这个flag时定义何时退出,当你定义了一个minHeight,这个view将在滚动到达这个最小高度的时候开始慢慢消失。

app:layout_scrollFlags这个属性其实一般就只有下面4种使用情况,我们来一一讲解。


1. app:layout_scrollFlags="scroll"

  • 该view显示时,只有在滚动视图顶部向上滚动时,该view才会慢慢消失。
  • 该view消失后,只有在滚动视图顶部向下滚动时,该view才会慢慢出现。

2. app:layout_scrollFlags="scroll|enterAlways"

  • 该view显示时,只要滚动视图向上滚动,该view就会慢慢消失。
  • 该view消失后,只要滚动视图向下滚动,该view就会慢慢出现。

3. app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed",同时该view设置了minHeight

  • 该view显示时,只要滚动视图向上滚动,该view就会慢慢消失。
  • 该view消失后,只要滚动视图向下滚动,该view就会慢慢出现:
    • 当滚动视图不在顶部时,该view只会慢慢出现minHeight高度的内容
    • 当滚动视图在顶部时,该view会慢慢出现全部的内容

4. app:layout_scrollFlags="scroll|exitUntilCollapsed",同时该view设置了minHeight

  • 该view显示时,只有在滚动视图顶部向上滚动时,该view才会慢慢消失,但不会完全消失,会保留着 minHeight高度的内容依然可见。
  • 该view消失后,只有在滚动视图顶部向下滚动时,该view才会慢慢出现。

注意:只有AppBarLayout第一个设置app:layout_scrollFlags属性的直接子视图可以折叠

7. CoordinatorLayout(协作布局)


CoordinatorLayout是一个超级强大的FrameLayout。
CoordinatorLayout有两个主要用途:
- 作为顶级应用程序的装饰或着色布局
- 作为特定交互的容器,与一个或多个孩子视图交互

CoordinatorLayout作为一个父视图,它的孩子可以通过特定的行为与CoordinatorLayout别的孩子交互。
当视图类作为CoordinatorLayout的孩子时,可以定义特定的行为。
- 在xml文件中使用app:layout_behavior
- 在view类使用@DefaultBehavior修饰符来添加注解。


在CoordinatorLayout的孩子视图FloatingActionButton中设置
app:layout_behavior="com.lavor.designnewcontrols.ScrollBehavior"
com.lavor.designnewcontrols.ScrollBehavior的代码如下:


public class ScrollBehavior extends CoordinatorLayout.Behavior<View> {/*** 因为是在XML中使用app:layout_behavior定义静态的这种行为,* 必须实现一个构造函数使布局的效果能够正常工作。* 否则 Could not inflate Behavior subclass error messages.*/public ScrollBehavior(Context context, AttributeSet attrs) {super();}/*** 开始滚动时*/@Overridepublic boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {//如果child可见,设置其不可见if(child.getVisibility()==View.VISIBLE){((FloatingActionButton)child).hide();}//如果child不可见,设置其可见else{((FloatingActionButton)child).show();}return super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);}
}  

CoordinatorLayout的子视图可以设置app:layout_anchor属性,该属性的值对应着CoordinatorLayout中其它子视图(不能是该视图本身或其子视图)的android:id属性。这可以将浮动视图放在任意地方。


                <android.support.design.widget.FloatingActionButtonandroid:id="@+id/fab_add_task"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/ic_add_circle_pink_400_18dp"app:fabSize="normal"app:layout_anchor="@id/toolbar"app:layout_anchorGravity="bottom|right|end" />  

我们将FloatingActionButton(浮动按钮)放置到Toolbar的右下方结束位置。

注意:使用CoordinatorLayout时,AppBarLayout下面有一个RecyclerView时,RecyclerView会与AppBarLayout重叠,因为CoordinatorLayout是帧布局。

要解决这个问题可以设置RecyclerView的app:layout_behavior="@string/appbar_scrolling_view_behavior",其实此时该属性的值就是android.support.design.widget.AppBarLayout$ScrollingViewBehavior

8. CollapsingToolbarLayout(折叠工具栏布局)


CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar,它继承至FrameLayout,它通常是作为AppBarLayout直接子视图使用。它提供的折叠工具栏更高级,还可以制造视觉差。

对于CollapsingToolbarLayout,我们通常是这样使用的,将其定义为AppBarLayout的第一个直接子视图,并且其自身定义如下:它里面有一个ImageView和一个Toolbar,形成折叠工具栏。


            <android.support.design.widget.CollapsingToolbarLayoutapp:layout_scrollFlags="scroll|exitUntilCollapsed"app:contentScrim="?attr/colorPrimary"app:expandedTitleMarginStart="48dp"android:layout_width="match_parent"android:layout_height="wrap_content"><ImageViewandroid:src="@drawable/bg"android:scaleType="centerCrop"app:layout_collapseMode="parallax"android:layout_width="match_parent"android:layout_height="wrap_content" /><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="60dp"app:layout_collapseMode="pin"android:background="?attr/colorPrimary"android:fitsSystemWindows="true"></android.support.v7.widget.Toolbar></android.support.design.widget.CollapsingToolbarLayout>
  • 首先,CollapsingToolbarLayout要设置app:layout_scrollFlags,这个属性在介绍AppBarLayout的时候已经讲过了,app:contentScrim表示滚动达到一定阈值后Toolbar的背景颜色,app:expandedTitleMarginStart设置扩张时候(还没有收缩时)title向左填充的距离。
  • 其次, ImageView的app:layout_collapseMode属性的值为parallax,设置为这个模式时,在内容滚动时,CollapsingToolbarLayout中的View(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和app:layout_collapseParallaxMultiplier属性(设置视差因子)搭配使用,其值为0~1。
  • 最后,Toolbar的app:layout_collapseMode属性的值为pin,设置为这个模式时,当CollapsingToolbarLayout完全收缩后,Toolbar还可以保留在屏幕上。

程序源代码下载:一个Activity掌握Design新控件

关于Design新控件国外有一篇不错的教程:https://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout
该教程源代码的github地址:https://github.com/chrisbanes/cheesesquare

来自为知笔记(Wiz)

转载于:https://www.cnblogs.com/ut2016-progam/p/5750506.html

一个Activity掌握Design新控件 (转)相关推荐

  1. 视频教程-Android Material Design 新控件-Android

    Android Material Design 新控件 刘志远,北京邮电大学硕士研究生, 北京育华志远科技有限公司创始人, 育华志远教育品牌负责人,育华志远课程体系打造者. 率领团队为互联网行业培训千 ...

  2. Android Design新控件之TextInputLayout 文本输入布局与自定义颜色简介

    Android 从5.0版本开始,新增了Android Materia Design库,让开发者高效的实现炫酷的UI效果 推荐: TextInputLayout(文本输入布局) TabLaout(选项 ...

  3. android 获取多个控件,Android----获取activity上所有的控件

    /** * @note 获取该activity所有view * @author liuh * */ public List getAllChildViews() { View view = this. ...

  4. 一个Demo学会用Android兼容包新控件

    2019独角兽企业重金招聘Python工程师标准>>> 前言 伟大的Google为Android推出了一系列的兼容包,最新的就是Design Support Library了,这里我 ...

  5. android Snackbar新控件解析

    Dialog和Toast,我们在日常的开发中一定非常熟悉,常常被用来作为Android应用内提示性信息的两种展示方式.然而Google在Design包中又提供了一种新的选择,那就是Snackbar.今 ...

  6. 【Android】Anroid5.0+新控件---酷炫标题栏的简单学习

    Android5.0+推出的新控件感觉特别酷,最近想模仿大神做个看图App出来,所以先把这些新控件用熟悉了. 新控件的介绍.使用等等网上相应的文章已经特别多了,题主也没那能力去写篇详解出来,本篇随笔记 ...

  7. CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar-Android M新控件

    效果图 CoordinatorLayout 概述 CoordinatorLayout官方API 从官方文档中我们可以看到: CoordinatorLayout是一个增强型的FrameLayout. 两 ...

  8. NavigationDrawer和NavigationView-Android M新控件

    Translucent System Bars-4.4新特性 Toolbar-5.0新特性 NavigationDrawer 简介 NavigationDrawer 是 Google 在 Materi ...

  9. 【转】Android M新控件之AppBarLayout,NavigationView,CoordinatorLayout,CollapsingToolbarLayout的使用...

    Android M新控件之AppBarLayout,NavigationView,CoordinatorLayout,CollapsingToolbarLayout的使用 分类: Android UI ...

最新文章

  1. 张一鸣:做CEO要避免理性的自负!
  2. windows XP cmd命令集
  3. 比较二进制_浮点数比较的精度问题
  4. Flutter中嵌入Android 原生TextView
  5. (转)分布式文件存储FastDFS(二)FastDFS安装
  6. Linux用户登录日志查询
  7. linux curl 显示请求耗时和dns解析
  8. centos 中如何将python更新到最新的版本
  9. MySQL体系结构图详解
  10. css flex布局iOS8兼容性问题
  11. android 多版本共存,Android 多版本共存的处理方式
  12. 360Tray.exe是什么进程?360Tray.exe程序及常见问题介绍
  13. 从卡牌类游戏初探游戏服务器
  14. Sklearn常用数据预处理方法介绍
  15. 测站数据批量脚本下载
  16. Quartz框架介绍
  17. 执行若依(ruoyi)项目
  18. 无线传感网络的自适应协作数据传输方法
  19. 最易理解的C语言教学 第一章
  20. C语言结构体数组,结构体数组的定义,结构体数组的输出,结构体的应用

热门文章

  1. 计算机网络面试问题汇总
  2. 树莓派初始设置无法连接WiFi,设置路由器信道可解决
  3. 获取json对象的key
  4. 基于贝叶斯优化混合核支持向量机的回归方法
  5. python 多线程 setdaemon_Python多线程join和setDaemon区别与用法
  6. 【3D视觉创新应用竞赛作品系列​】多楼层室内环境下的三维几何重建
  7. 2. 互联网密钥交换协议 IKE
  8. Android开发-使用FTP协议和HTTP协议进行文件下载和上传
  9. android和emui的版本对应,EMUI11是基于安卓开发的吗?EMUI和安卓的区别
  10. TryHackMe - Poster靶场