在项目中运用Meterial Design实现动画效果

image.png

什么是 CoordinatorLayout

CoordinatorLayout，是继承自 FrameLayout 。该布局非常好用，能够协调子元素之间的依赖关系。CoordinatorLayout通过协调调度子布局的形式实现触摸影响布局的形式产生动画效果。常常与CoordinatorLayout一起使用的控件有AppBarLayout、CollapsingToolbarLayout、NestedScrollView、Toolbar。这几个控件相互配合，可以写出一个类似上面效果图不错的页面出来。
这边附上官网的介绍链接，有兴趣看英文文档的强烈推荐：
http://android-developers.blogspot.com/2015/05/android-design-support-library.html

实现的核心代码

main_activity.xml 代码如下：

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);
    }
}

常用属性讲解

看到上面核心代码，是不是觉得使用起来很简单，其实关键代码就是一个布局。外层是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：视差模式，在折叠的时候会有个视差折叠的效果。

简单介绍CoordinatorLayout的用法，没有深入介绍，大家如果需要深入了解这个控件的使用，在这里推荐一篇我认为写的好的博客给大家深入学习。
链接如下：http://blog.csdn.net/xyz_lmn/article/details/48055919

原：https://mp.weixin.qq.com/s?__biz=MzA5NzgzODI5NA==&mid=2454031218&idx=1&sn=42c611b13220dd09a8a71bc8d4e9c87b&chksm=872b9ecbb05c17dd8702e61bc940c0311e9112bc30a30b5764c9609406039f5880df51f7e93a&mpshare=1&scene=1&srcid=10103rbeuulADZb9GDDO5WX5#rd