仿钉钉联系人详情界面--Material Design的使用

最近无意中看到钉钉这个App，发现联系人详情这个界面的效果还是蛮好看的。正好最近在看Material Design，所以想看看可不可用Android系统原生的来实现这种效果。

先看效果图：

这是有一个推滑的特效的，在钉钉上有一个头像联动的效果，这个暂时没有实现，有点区别。

主要特点：
1.名字大小的缩放
2.圆形头像的固定
3.背景的模糊效果
4.下面详情的推滑效果

以上的效果都是用Material Design自带的元素来实现的，看起来还是蛮不错的。看下布局文件：

<?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"    android:clipToPadding="true"    android:fitsSystemWindows="true">    <android.support.design.widget.AppBarLayout        android:id="@+id/appBarLayout"        android:layout_width="match_parent"        android:layout_height="@dimen/dp700"        android:fitsSystemWindows="true"        android:orientation="vertical"        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">        <android.support.design.widget.CollapsingToolbarLayout            android:id="@+id/collapsingToolbarLayout"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:fitsSystemWindows="true"            app:layout_scrollFlags="scroll|exitUntilCollapsed">            <ImageView                android:id="@+id/imageView_bg"                android:layout_width="match_parent"                android:layout_height="match_parent"                android:contentDescription="@null"                android:fitsSystemWindows="true"                android:scaleType="centerCrop"                app:layout_collapseMode="parallax"                app:layout_collapseParallaxMultiplier="0.6" />            <ImageView                android:layout_width="match_parent"                android:layout_height="match_parent"                android:background="#80000000"                android:contentDescription="@null"                android:fitsSystemWindows="true"                android:scaleType="centerCrop"                app:layout_collapseMode="parallax"                app:layout_collapseParallaxMultiplier="0.6" />            <android.support.v7.widget.Toolbar                android:id="@+id/toolbar"                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                app:layout_collapseMode="pin" />        </android.support.design.widget.CollapsingToolbarLayout>    </android.support.design.widget.AppBarLayout>    <android.support.design.widget.FloatingActionButton        android:id="@+id/floatingActionButton"        android:layout_width="@dimen/dp300"        android:layout_height="@dimen/dp300"        android:background="@android:color/transparent"        app:borderWidth="0dp"        app:layout_anchor="@id/collapsingToolbarLayout"        app:layout_anchorGravity="bottom|center_horizontal" />    <android.support.v4.widget.NestedScrollView        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:layout_behavior="@string/appbar_scrolling_view_behavior">        <LinearLayout            android:layout_width="match_parent"            android:layout_height="match_parent"            android:layout_marginEnd="@dimen/dp68"            android:layout_marginStart="@dimen/dp68"            android:paddingBottom="@dimen/dp300"            android:orientation="vertical">            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:paddingTop="@dimen/dp100"                android:text="@string/company_info"                android:textColor="#3E50B4"                android:textSize="@dimen/sp50" />            <TextView                android:id="@+id/textView_name"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginTop="@dimen/dp60"                android:textColor="#333333"                android:textSize="@dimen/sp45" />            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginTop="@dimen/dp10"                android:text="@string/contacts_name"                android:textColor="#b7b7b7"                android:textSize="@dimen/sp40" />            <View                android:layout_width="match_parent"                android:layout_height="1px"                android:layout_marginTop="@dimen/dp40"                android:background="#ececec" />            <TextView                android:id="@+id/textView_phone"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginTop="@dimen/dp40"                android:textColor="#222222"                android:textSize="@dimen/sp45" />            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginTop="@dimen/dp10"                android:text="@string/contacts_phone"                android:textColor="#b7b7b7"                android:textSize="@dimen/sp40" />            <View                android:layout_width="match_parent"                android:layout_height="1px"                android:layout_marginTop="@dimen/dp40"                android:background="#ececec" />            <TextView                android:id="@+id/textView_email"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginTop="@dimen/dp40"                android:textColor="#222222"                android:textSize="@dimen/sp45" />            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginTop="@dimen/dp10"                android:text="@string/contacts_email"                android:textColor="#b7b7b7"                android:textSize="@dimen/sp40" />            <View                android:layout_width="match_parent"                android:layout_height="1px"                android:layout_marginTop="@dimen/dp40"                android:background="#ececec" />            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginTop="@dimen/dp100"                android:text="@string/person_info"                android:textColor="#3E50B4"                android:textSize="@dimen/sp50" />            <TextView                android:id="@+id/textView_birthday"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginTop="@dimen/dp40"                android:textColor="#222222"                android:textSize="@dimen/sp45" />            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginTop="@dimen/dp10"                android:text="@string/contacts_birthday"                android:textColor="#b7b7b7"                android:textSize="@dimen/sp40" />            <View                android:layout_width="match_parent"                android:layout_height="1px"                android:layout_marginTop="@dimen/dp40"                android:background="#ececec" />            <TextView                android:id="@+id/textView_sex"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginTop="@dimen/dp40"                android:textColor="#222222"                android:textSize="@dimen/sp45" />            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginTop="@dimen/dp10"                android:text="@string/contacts_sex"                android:textColor="#b7b7b7"                android:textSize="@dimen/sp40" />            <View                android:layout_width="match_parent"                android:layout_height="1px"                android:layout_marginTop="@dimen/dp40"                android:background="#ececec" />            <TextView                android:id="@+id/textView_address"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginTop="@dimen/dp40"                android:textColor="#222222"                android:textSize="@dimen/sp45" />            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginTop="@dimen/dp10"                android:text="@string/contacts_address"                android:textColor="#b7b7b7"                android:textSize="@dimen/sp40" />            <View                android:layout_width="match_parent"                android:layout_height="1px"                android:layout_marginTop="@dimen/dp40"                android:background="#ececec" />        </LinearLayout>    </android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>

中间的圆形图像是用FloatingActionButton控件来实现的，需要把背景设置为透明，把边线设置为0。

        android:background="@android:color/transparent"        app:borderWidth="0dp"

上面可以滑动的模块就是CollapsingToolbarLayout控件，但是必须要用AppBarLayout组件包住，模糊的背景就是一个ImageView，固定的导航栏就是Toolbar。下面的可滑动的具体内容就是NestedScrollView控件，就相当于一个ScrollView。

背景图片的模糊 我们的图片是从网络下载下来的，需要下载图片，在做模糊处理。这里用的加载图片是Picasso，它有一个转化器。具体代码：

    Picasso.with(getApplicationContext())                    .load(contactsInfo.getImgSrc())                    .transform(new BlurTransformation())                    .placeholder(R.drawable.default_pic)                    .error(R.drawable.default_pic)                    .into(mImageViewBg);    /**     * 模糊转换     */    class BlurTransformation implements Transformation {        public BlurTransformation() {            super();        }        @Override        public Bitmap transform(Bitmap bitmap) {            return PictureUtil.blurBitmap(getApplicationContext(), bitmap, 15f);        }        @Override        public String key() {            return "blur";        }    }    /**     * 图片模糊     */    public static Bitmap blurBitmap(Context context, Bitmap bitmap, float blur) {        //Let's create an empty bitmap with the same size of the bitmap we want to blur        Bitmap outBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);        //Instantiate a new Renderscript        RenderScript rs = RenderScript.create(context.getApplicationContext());        //Create an Intrinsic Blur Script using the Renderscript        ScriptIntrinsicBlur blurScript = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));        //Create the Allocations (in/out) with the Renderscript and the in/out bitmaps        Allocation allIn = Allocation.createFromBitmap(rs, bitmap);        Allocation allOut = Allocation.createFromBitmap(rs, outBitmap);        //Set the radius of the blur        blurScript.setRadius(blur);        //Perform the Renderscript        blurScript.setInput(allIn);        blurScript.forEach(allOut);        //Copy the final bitmap created by the out Allocation to the outBitmap        allOut.copyTo(outBitmap);        //recycle the original bitmap        bitmap.recycle();        //After finishing everything, we destroy the Renderscript.        rs.destroy();        return outBitmap;    }

CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar，它继承至FrameLayout，给它设置layout_scrollFlags，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。

在CollapsingToolbarLayout中，我们设置了layout_scrollFlags的值，关于它的值我这里再说一下：

scroll - 想滚动就必须设置这个。

enterAlways - 实现quick return效果, 当向下移动时，立即显示View（比如Toolbar)。

exitUntilCollapsed - 向上滚动时收缩View，但可以固定Toolbar一直在上面。

enterAlwaysCollapsed - 当你的View已经设置minHeight属性又使用此标志时，你的View只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。

其中还设置了一些属性，简要说明一下：

app:contentScrim - 设置当完全CollapsingToolbarLayout折叠(收缩)后的背景颜色。

app:expandedTitleMarginStart - 设置扩张时候(还没有收缩时)title向左填充的距离。

app:layout_collapseMode（折叠模式），app:layout_collapseMode的属性在CollapsingToolbarLayout中定义，在CollapsingToolbarLayout的子视图中使用。

pin - 设置为这个模式时，当CollapsingToolbarLayout完全收缩后，Toolbar还可以保留在屏幕上。

parallax - 设置为这个模式时，在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用。这里的滚动视觉差，意思就是，你设置了0，那么就会图片一起滚动，你设置了1，那么图片是不会滚动的。

layout_collapseParallaxMultiplier(视差因子) - 设置视差滚动因子，值为：0~1。

使用CollapsingToolbarLayout时必须把title设置到CollapsingToolbarLayout上，设置到Toolbar上不会显示。即：
mCollapsingToolbarLayout.setTitle(” “);
该变title的字体颜色：
扩张时候的title颜色：mCollapsingToolbarLayout.setExpandedTitleColor();
收缩后在Toolbar上显示时的title的颜色：mCollapsingToolbarLayout.setCollapsedTitleTextColor();

        Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(mToolbar);        getSupportActionBar().setDisplayHomeAsUpEnabled(true);        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                onBackPressed();            }        });        CollapsingToolbarLayout mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);        mCollapsingToolbarLayout.setTitle("leeshenzhou");        mCollapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);//设置还没收缩时状态下字体颜色        mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.GREEN);//设置收缩后Toolbar上字体的颜色

我们可以看到有一个FloatingActionButton，可以随着CollapseToolbarLayout一起滚动。这个是通过CoordinatorLayout 的layout_anchor来实现的。悬浮视图使用它以后，CoordinatorLayout会把悬浮视图和设置的视图绑定在一起。可以通过layout_anchorGravity来来控制所在的位置。

使用CollapsingToolbarLayout实现折叠效果，需要注意几点：

1.AppBarLayout的高度固定。

2.CollapsingToolbarLayout的子视图设置layout_collapseMode属性，如果想要Toolbar固定，那么一定要设置Toolbar为pin模式。但是parallax其实不需要的，因为滚动这个效果，是CollaspingToolbarLayout实现的。子View设置，只是让子View跟着滚动而已。

3.关联悬浮视图设置app:layout_anchor，app:layout_anchorGravity属性。

4.另外标题内容是在CollapseToolbarLayout实现的，而不是Toolbar，滑动以后，标题内容固定在顶部是
CollapseToolbarLayout内部实现的，这个和是否设置了layout_collapseMode有关的。

5.移除Toolbar导航条的背景色，在xml中加上android:background=”?attr/colorPrimary”。

6.CollapsingToolbarLayout收起来变成普通的颜色，在xml中加上app:contentScrim=”?attr/colorPrimary”。去掉就是CollapsingToolbarLayout自己的背景色。

代码下载：https://github.com/chuwuwang/OnTheWay
代码正在修改中，效果请切换1.2.0 tag查看。