Material design学习笔记-CoordinatorLayout,NestedScrollView,AppBarLayout,CollapsingToolbarLayout学习
来源:互联网 发布:淘宝上宝贝卖点怎么写 编辑:程序博客网 时间:2024/05/01 08:29
MD学习大概效果实现后是这样:
这里的具体控件使用:
下面具体来看一下吧~
CoordinatorLayout
CoordinatorLayout 实现了多种Material Design中提到的滚动效果,用layout_gravity设置内部相关控件的位置。一般会和AppBarLayout、NestedScrollView等一起使用。
可以实现的效果:
- 让浮动操作按钮上下滑动,为Snackbar留出空间。
- 扩展或者缩小Toolbar或者头部,让主内容区域有更多的空间。
- 控制哪个view应该扩展还是收缩,以及其显示大小比例,包括视差滚动效果动画。
<android.support.design.widget.CoordinatorLayout 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/parentView" android:layout_width="match_parent" android:layout_height="match_parent"></android.support.design.widget.CoordinatorLayout>
CollapsingToolbarLayout
CollapsingToolbarLayout包裹 Toolbar 的时候提供一个可折叠的
Toolbar,一般作为AppbarLayout的子视图使用,CollapsingToolbarLayout的子视图类似与LinearLayout垂直方向排放。
<android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="230dp" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="230dp" app:contentScrim="@color/colorPrimary" app:expandedTitleMarginStart="10dp" app:expandedTitleTextAppearance="@style/CollapsingToolbarLayoutStyle" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <LinearLayout android:layout_width="match_parent" android:layout_height="230dp" android:background="@mipmap/header" android:orientation="vertical" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.7"> </LinearLayout> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@android:color/transparent" app:layout_collapseMode="pin" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout>
使用CollapsingToolbarLayout实现折叠效果,需要注意3点
- AppBarLayout的高度固定
- CollapsingToolbarLayout的子视图设置layout_collapseMode属性
关联悬浮视图设置app:layout_anchor,app:layout_anchorGravity属性
比较重要的一些属性:
layout_scrollFlags:- scroll - 想滚动就必须设置这个。
- enterAlways - 实现quick return效果, 当向下移动时,立即显示View(比如Toolbar)。
- exitUntilCollapsed - 向上滚动时收缩View,但可以固定Toolbar一直在上面。
- enterAlwaysCollapsed - 当你的View已经设置minHeight属性又使用此标志时,你的View只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。
其中还设置了一些属性,简要说明一下:
- contentScrim - 设置当完全CollapsingToolbarLayout折叠(收缩)后的背景颜色。
- expandedTitleMarginStart - 设置扩张时候(还没有收缩时)title向左填充的距离。
- layout_collapseMode (折叠模式) - 有两个值:
· pin - 设置为这个模式时,当CollapsingToolbarLayout完全收缩后,Toolbar还可以保留在屏幕上。
· parallax - 设置为这个模式时,在内容滚动时,CollapsingToolbarLayout中的View(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用。
layout_collapseParallaxMultiplier(视差因子) - 设置视差滚动因子,值为:0~1。
或者如果你想要在折叠和展开状态时改变文本的显示。你可以这样来简单的实现:设置 TextAppearance,分别通过 app:collapsedTitleTextAppearance 和app:expandedTitleTextAppearance 来设置。
expandedTitleTextAppearance:这个可以设置样式,开始的时候为透明这样toolbar中的text会有有种渐变显示的效果
这里我们看到我们是在CollapsingToolbarLayout区域使得Toorbar可以滚动,但是一般情况下我们都是下面内容滑动同时带动Toorbar的滚动。这个就是下面要说的。
NestedScrollView
为了使得Toolbar可以根据下面内容的滑动的相应的滑动,我们必须还得有个条件,就是CoordinatorLayout布局下包裹一个可以滑动的布局,比如 RecyclerView,NestedScrollView(经过测试,ListView,ScrollView不支持)具有滑动效果的组件。并且给这些组件设置如下属性来告诉CoordinatorLayout,该组件是带有滑动行为的组件,然后CoordinatorLayout在接受到滑动时会通知AppBarLayout 中可滑动的Toolbar可以滑出屏幕了。记得要给 RecyclerView,NestedScrollView设置app:layout_behavior=@string/appbar_scrolling_view_behavior,这样才会在appBarLayout的下方。
这里还有一个属性,可以移动位置,稍微做偏移:
- behavior_overlapTop:30dp 盖住上方控件30dp
这个代码的布局是
<android.support.design.widget.CoordinatorLayout ...... > <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="230dp" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> ...... </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:visibility="gone" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <android.support.v7.widget.RecyclerView android:id="@+id/recycleView" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </android.support.v4.widget.NestedScrollView> <android.support.design.widget.FloatingActionButton ...... /></android.support.design.widget.CoordinatorLayout>
当然你写成这样也是可以的:
<android.support.design.widget.CoordinatorLayout ...... > <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="230dp" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> ...... </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/recycleView" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_behavior="@string/appbar_scrolling_view_behavior"/> <android.support.design.widget.FloatingActionButton ...... /></android.support.design.widget.CoordinatorLayout>
效果是一样的:
Snackbar
Snackbar是design support library中另一个组件,使用Snackbar我们可以在屏幕底部(大多时候)快速弹出消息,它和Toast非常相似,但是它更灵活一些。它显示一段时间后或用户与屏幕交互时它会自动消失。
- 可以自定义action-可选操作。
- swiping it off the screen可以让FAB消失
- 它是context sensitive message(自己理解吧),所以这些消息是UI screen的一部分并且它是显示在所有屏幕其它元素之上(屏幕最顶层),并不是像Toast一样覆盖在屏幕上。
同一时间只能显示一个snackbar。
Snackbar基本上继承了和Toast一样的方法和属性,例如LENGTH_LONG 和 LENGTH_SHORT用于设置显示时长。
- make() – 生成Snackbar消息
- setAction() – 设置action
- make() – 显示Snackbar消息
- setActionTextColor -设置action的字体颜色
make()方法的第一个参数是一个view, snackbar会试着寻找一个父view来hold这个view. Snackbar将遍历整个view tree 来寻找一个合适的父view,它可能是一个coordinatorLayout也可能是window decor’s content view,随便哪一个都行。
正如上面所提到,duration参数和Toast中的duration参数类似,只能是LENGTH_SHORT 或 LENGTH_LONG,不能是其它任何随机数。
Snackbar.make(parentView, "Hello Snackbar!", Snackbar.LENGTH_INDEFINITE).setActionTextColor(Color.parseColor("#009933")).setAction("Undo", new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(MainActivity.this,"Hello Toast!",Toast.LENGTH_LONG).show(); } }).show();
效果:
FloatingActionButton
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/parentView" xmlns:app="http://schemas.android.com/apk/res-auto" tools:context="androidviewdemo.example.com.demo.MainActivity2"></RelativeLayout>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/parentView" xmlns:app="http://schemas.android.com/apk/res-auto" tools:context="androidviewdemo.example.com.demo.MainActivity2"></android.support.design.widget.CoordinatorLayout>
这个就是上面说的让浮动操作按钮上下滑动,为Snackbar留出空间。在CoordinatorLayout中才会用效果。
FloatingActionButton正常显示的情况下有个填充的颜色,有个阴影;点击的时候会有一个rippleColor,并且阴影的范围可以增大(图显示的有点卡T ——T)
根据上图我们来看一下FloatingActionButton中使用到的几个属性:
borderWidth:边框宽度,通常设置为0 ,用于解决Android 5.X设备上阴影无法正常显示的问题
当我们设置10dp的时候样式是:
也是有立体感的。但是当设置的值特别大的时候比如50,就会是下面这个效果:
backgroundTint:按钮的背景颜色,不设置,默认使用theme中colorAccent的颜色
app:rippleColor=:点击的边缘阴影颜色,比如我们设置的是红色,点击的时候就会显示
app:elevation:边缘阴影的宽度,就是一般状态下的阴影大小
app:pressedTranslationZ:点击按钮时,按钮边缘阴影的宽度,通常设置比elevation的数值大
app:layout_anchor 设置FAB的锚点,即以哪个控件为参照点设置位置。
要是想自己定义阴影的话可以参考鸿样大大的这个FloatingActionButton 完全解析[Design Support Library(2)]
DrawerLayout
这个不是design的包了,这是android.support.v4.widget里的控件。用的最多的就是现实抽屉效果导航菜单。
既然要有导航效果,这里就得先说一下这个控件:NavigationView
NavigationView
先看一下粗糙的效果(配色啥的请轻喷T_T):
<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout 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/parentView" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="androidviewdemo.example.com.demo.MainActivity2"> <android.support.v7.widget.RecyclerView android:id="@+id/recycleView" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <!--左侧登录的相关问题--> <android.support.design.widget.NavigationView android:id="@+id/navigation" android:background="#093" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/nav_hear" app:itemIconTint="@color/white" app:itemTextColor="@color/white" app:menu="@menu/navigation_drawer_items"> </android.support.design.widget.NavigationView></android.support.v4.widget.DrawerLayout>
注意这个view的两个属性 app:headerLayout=”@layout/activity_main”
和 app:menu=”@menu/navigation_drawer_items”,
分别代表drawer布局中的header和menuitem区域,当然你可以根据自己的情况使用。
比如我们这里的我的headerLayout用的是nav_hear.xml
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <RelativeLayout android:layout_width="match_parent" android:layout_height="250dp" android:background="@color/colorPrimary" > <ImageView android:id="@+id/userImg" android:layout_width="160dp" android:layout_height="160dp" android:layout_centerInParent="true" android:src="@mipmap/avatar_circle" /> <TextView android:id="@+id/setting" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="NavgationView的Header布局" android:textColor="@color/white" android:layout_below="@+id/userImg" android:layout_marginTop="10dp" android:layout_centerHorizontal="true" /> </RelativeLayout></RelativeLayout>
navigation_drawer_items.xml:
<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:checkableBehavior="all"> <item android:id="@+id/navItem1" android:icon="@mipmap/ic_launcher" android:title="用户信息"/> <item android:id="@+id/navItem2" android:icon="@mipmap/ic_launcher" android:title="充值记录"/> <item android:id="@+id/navItem3" android:icon="@mipmap/ic_launcher" android:title="我的收藏"/> <item android:id="@+id/navItem4" android:icon="@mipmap/ic_launcher" android:title="浏览记录"/> </group></menu>
效果:
我们发现这里item的图标是实心的并不是显示我们想要的效果这个需要在代码中添加:
navigationView.setItemTextColor(null);navigationView.setItemIconTintList(null);
这里的字体由于上面两句话最终显示黑色,那我们要实现点击更换颜色怎么破?可以用一个selector
nav_menu_text_color.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:color="@color/colorPrimary"/> <item android:state_checked="false" android:color="@color/white"/></selector>
代码中更改将null修改成nav_menu_text_color.xml:
navigationView.setItemTextColor(getResources().getColorStateList(R.drawable.nav_menu_text_color, null));
效果:
最后,头部控件可以通过下面方式获取:
View view = navigationView.getHeaderView(0);
这里就实现最开始的效果了。
demo下载
参考:感谢感谢
CoordinatorLayout与滚动的处理
MD中文版1
MD中文版2
android CoordinatorLayout使用
Snackbar的使用
Android 嵌套滑动机制(NestedScrolling)这个还没有看,先攒着
- Material design学习笔记-CoordinatorLayout,NestedScrollView,AppBarLayout,CollapsingToolbarLayout学习
- Material Design学习:CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout
- AppBarLayout、CoordinatorLayout、CollapsingToolbarLayout、NestedScrollView
- Material Design风 第二话(CollapsingToolbarLayout+AppBarLayout+NestedScrollView)
- Android Material Design(5) CoordinatorLayout,AppBarLayout,Toolbar,CollapsingToolbarLayout的使用
- CoordinatorLayout、AppBarLayout、TableLayout、CollapsingToolbarLayout、NestedScrollView的使用
- Material Design学习之CollapsingToolbarLayout
- Material Design学习之AppbarLayout
- Material Design:CoordinatorLayout,CollapsingToolbarLayout,AppBarLayou
- Material Design之CoordinatorLayout CollapsingToolbarLayout
- Design 四: CoordinatorLayout + AppBarLayout+ Toolbar+NestedScrollView
- Design 四: CoordinatorLayout + AppBarLayout+ Toolbar+NestedScrollView
- Material Design——CollapsingToolbarLayout+AppBarLayout+CoordinatorLayout实现菜单栏炫酷折叠效果
- Material Design学习之CoordinatorLayout
- CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout,Toolbar,NestedScrollView,RecyclerView结合使用
- CoordinatorLayout、AppBarLayout、 Toolbar、CollapsingToolbarLayout、NestedScrollView 综合使用,详细解析
- Android学习系列Toolbar,AppBarLayout,CoordinatorLayout,CollapsingToolbarLayout使用小结
- Android学习系列Toolbar,AppBarLayout,CoordinatorLayout,CollapsingToolbarLayout使用小结
- 前端参考文档及资源整理(持续更新)
- 排序
- 被忽略的shell技巧
- C#获取视频流
- HttpWebRequest的GetResponse或GetRequestStream 超时决办法
- Material design学习笔记-CoordinatorLayout,NestedScrollView,AppBarLayout,CollapsingToolbarLayout学习
- (转)总结一下最近关于domain object以及相关的讨论(来自JavaEye,作者robin)
- 取消window下应用报错后弹出的对话框程序已停止要求关闭程序对话框
- 多维数组下指针使用总结
- Android官方数据绑定框架DataBinding(一)
- Struts2的配置文件
- 安卓1113_版本介绍和控制 SVN GIT
- hdu2992 Hotel booking (floyd+spfa+map)
- vi + cscope使用