仿钉钉联系人详情界面--Material Design的使用
最近无意中看到钉钉这个App，发现联系人详情这个界面的效果还是蛮好看的。正好最近在看Material Design，所以想看看可不可用Android系统原生的来实现这种效果。
最近无意中看到钉钉这个App，发现联系人详情这个界面的效果还是蛮好看的。正好最近在看Material Design，所以想看看可不可用原生的来实现这种效果。
先看效果图：
这是有一个推滑的特效的，在钉钉上有一个头像联动的效果，这个暂时没有实现，有点区别。
主要特点：
1.名字大小的缩放
2.圆形头像的固定
3.背景的模糊效果
4.下面详情的推滑效果
以上的效果都是用Material Design自带的元素来实现的，看起来还是蛮不错的。看下布局文件：
中间的圆形图像是用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() {
public Bitmap transform(Bitmap bitmap) {
return PictureUtil.blurBitmap(getApplicationContext(), bitmap, 15f);
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 outB
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() {
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其实不需要的，因为滚动这个效果，是CollingToolbarLayout实现的。子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自己的背景色。
代码下载：
代码正在修改中，效果请切换1.2.0 tag查看。仿钉钉联系人详情界面--Material Design的使用
最近无意中看到钉钉这个App，发现联系人详情这个界面的效果还是蛮好看的。正好最近在看Material Design，所以想看看可不可用原生的来实现这种效果。
先看效果图：
这是有一个推滑的特效的，在钉钉上有一个头像联动的效果，这个暂时没有实现，有点区别。
主要特点：
1.名字大小的缩放
2.圆形头像的固定
3.背景的模糊效果
4.下面详情的推滑效果
以上的效果都是用Material Design自带的元素来实现的，看起来还是蛮不错的。看下布局文件：
中间的圆形图像是用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() {
public Bitmap transform(Bitmap bitmap) {
return PictureUtil.blurBitmap(getApplicationContext(), bitmap, 15f);
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 outB
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() {
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其实不需要的，因为滚动这个效果，是CollingToolbarLayout实现的。子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自己的背景色。
代码下载：
代码正在修改中，效果请切换1.2.0 tag查看。