Android Material Design : CollapsingToolbarLayout使用简介
Android Material Design : CollapsingToolbarLayout使用简介
我之前写了若干篇关于Android Material设计的文章:
1,《Android Material Design的FloatingActionButton,Snackbar和CoordinatorLayout》http://blog.csdn.net/zhangphil/article/details/48861371
2,《Android Material Design:基于CoordinatorLayout实现向上滚动导航条ToolBar滚出、向下滚动导航条滚出》文章链接:http://blog.csdn.net/zhangphil/article/details/48877721
3《Android Material Design:CoordinatorLayout与NestedScrollView》文章链接:http://blog.csdn.net/zhangphil/article/details/48877865
4,《Android Material Design :LinearLayoutCompat添加分割线divider 》文章链接:http://blog.csdn.net/zhangphil/article/details/48899585
本文在前四篇文章的基础上,综合使用上述文章中涉及到的技术点,实现另外一种Android Material Design : CollapsingToolbarLayout。
效果如图所示:
上图所示就是Android Material Design 中引入的CollapsingToolbarLayout要实现的效果。
先给出实现上图效果的XML布局文件activity_main.xml代码然后再对照说明:
<?xml version="1.0" encoding="utf-8"?>
可以观察到,当整个页面由NestedScrollView触发向上滚动时候,android id为imageView的ImageView渐渐消失,当整个页面由NestedScrollView向下滚动时候,android id为imageView的ImageView渐渐出现。而整个过程中的Toolbar则固定(pin)在界面中。
对CollapsingToolbarLayout涉及到的几个关键属性加以说明。
(1) app:collapsedTitleGravity="left"。
在本例中就是那个title字段“zhangphil”,这个title值也可以由Toolbar的setTitle()完成,两者之间效果相同。app:collapsedTitleGravity="left"表示当头部的衬图ImageView消失后,此title(zhangphil)将回归到Toolbar的位置(left,right等位置),默认是left。
(2)app:contentScrim="#ff5252"。
app:contentScrim设置颜色值。是CollapsingToolbarLayout收缩后最顶部的颜色,就是图中顶部的红色。
(3)app:expandedTitleGravity="left|bottom"
app:expandedTitleGravity表示将此CollapsingToolbarLayout完全展开后,title(“zhangphil”)所处的位置,默认是left + bottom。
(4)app:layout_collapseMode=" "
此属性有两个值parallax和pin。Pin表示固定。parallax 则有一定的缩放效果。缩放效果和速率则可由app:layout_collapseParallaxMultiplier控制(值从0.0到1.0)。
测试的主Activity,MainActivity.java:
package zhangphil.materialdesign;import android.app.Activity;import android.os.Bundle;import android.support.v7.widget.Toolbar;public class MainActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);mToolbar.setLogo(R.drawable.ic_launcher);mToolbar.setNavigationIcon(android.R.drawable.ic_menu_delete);mToolbar.setTitle("zhangphil");//mToolbar.setSubtitle("zhangphil副标题");//mToolbar.setSubtitleTextColor(Color.RED);}}
更多相关文章
- android shape阴影效果
- Android 仿3g体育门户客户端赛事图标浮出效果
- android蜂巢效果、环形菜单、Kotlin影视应用、简约时钟、查看导
- 让Android自带的Gallery实现多点缩放,拖动和边界回弹效果,效果流畅
- 两篇关于Android App Widgets 的文章
- Android有趣的全透明效果--Activity及Dialog的全透明(附android
- 实现了在android实现左右滑动切换界面的效果
- 【转】善用Android预定义样式来为我们的布局设置效果,大大节约代