CoordinatorLayout效果图
运行效果图:(录屏分辨率有点低,导致图片模糊,实际效果是很清晰的)
什么是 CoordinatorLayout
CoordinatorLayout,是继承自 FrameLayout 。该布局非常好用,能够协调子元素之间的依赖关系。CoordinatorLayout通过协调调度子布局的形式实现触摸影响布局的形式产生动画效果。常常与CoordinatorLayout一起使用的控件有AppBarLayout、CollapsingToolbarLayout、NestedScrollView以及Toolbar。这几个控件相互配合,可以写出一个类似上面效果图不错的页面出来。
这边附上官网的介绍链接,有兴趣看英文文档的强烈推荐:
http://android-developers.blogspot.com/2015/05/android-design-support-library.html
3实现的核心代码
main_activity.xml 代码如下:
<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <View android:layout_width="0dp" android:layout_height="0dp" android:focusable="true" android:focusableInTouchMode="true" /> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="wrap_content" app:contentScrim="#30469b" app:expandedTitleMarginBottom="160dp" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:id="@+id/iv_img" android:layout_width="wrap_content" android:layout_height="250dp" android:scaleType="centerCrop" android:src="@drawable/aa" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.5" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:layout_marginBottom="22dp" android:layout_marginLeft="38dp" android:layout_marginRight="34dp" android:textColor="@android:color/black" android:textSize="16sp" android:text="Android是一种基于Linux的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由Google公司和开放手机联盟领导及开发" app:layout_collapseMode="parallax" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?android:attr/actionBarSize" app:layout_collapseMode="pin" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/content" android:lineSpacingExtra="8dp" android:textSize="20sp" /> </android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout>
mainActivity.java
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); toolbar.setTitle("Android 概要简述"); setSupportActionBar(toolbar); toolbar.setNavigationIcon(R.drawable.back); } }
4常用属性讲解
看到上面核心代码,是不是觉得使用起来很简单,其实关键代码就是一个布局。外层是CoordinatorLayout 包裹,因为CoordinatorLayout前面说了,它是继承自五大布局中的 FrameLayout,所以用法与之类似。
这个动画效果最重要重点使用了CollapsingToolbarLayout可实现Toolbar的折叠效果。
有几个重要的属性需要重点介绍下:
1、app:contentScrim="#30469b"
设置当完全CollapsingToolbarLayout收缩后ToolBar的背景颜色。
2、app:layout_scrollFlags="scroll|exitUntilCollapsed"
当用户向上拉时收缩时,可以固定Toolbar一直在上面。
3、app:expandedTitleMarginStart="48dp"
可以设置扩张时候标题向左填充的距离。
4、 app:layout_collapseParallaxMultiplier="0.5"
CollapsingToolbarLayout滑动时,子视图的视觉差,可以通过这个属性来改变。值的范围[0.0,1.0],值越大视察越大。
5、app:layout_collapseMode=”parallax”
app:layout_collapseMode="pin"
子视图的折叠模式,有两种,经常使用:
pin:设置为这个模式时,当CollapsingToolbarLayout完全收缩后,Toolbar还可以保留在屏幕上,在折叠的时候最后固定在顶端;
parallax:视差模式,在折叠的时候会有个视差折叠的效果。
最后,如果想要本文代码的同学,只需要在微信公众号「程序IT圈」的后台,回复:CoordinatorLayout 。即可获得本文代码。
总结
简单介绍CoordinatorLayout的用法,没有深入介绍,大家如果需要深入了解这个控件的使用,在这里推荐一篇我认为写的好的博客给大家深入学习。
链接如下:http://blog.csdn.net/xyz_lmn/article/details/48055919
本文属于原创,如有转载,请标注原作者,版权归本公众号所有。如果你喜欢我写的文章请关注 程序IT圈 ,欢迎大家继续关注本公众号的技术博文。如果您觉得这篇文章对你有所帮助的话,不妨点个赞或给个赞赏哈,您的支持就是我坚持原创的动力~~