Android CollapsingToolbarLayout
第一次看到这种用户体验是在Google Play Store App的应用详情的Activity中.
大的Banner图,能第一时间吸引用户的眼球,用不一样的Banner大图更具个性化的展示内容.图总是比文字要吸引人.
当向下滚动时,Banner大图会跟随滚动手势而Collapse.最后收折成一个普通的ActionBar(实际是个Toolbar,Android官方在最新的Support Library都推荐把ActionBar替换成Toolbar).
通过属性Flag的组合,也能实现把ActionBar直接推出屏幕,让其消失.
Android Support Library中提供的CollapseToolbar实现这效果.
<?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:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
android:scaleType="centerCrop"
android:src="@drawable/mu"
android:transitionName="mu"/> <android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/MyToolbarTheme"/> </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
这是Layout布局.CoordinatorLayout和AppBarLayout的组合在这篇随笔中有介绍,实现了滚动隐藏Toolbar的效果,这里就不在重复了.
CollapsingToolbarLayout是实现GIF效果的关键.
CollapsingToolbarLayout有两个Children.ImageView用来显示Banner大图,即Gif中曼联队徽的大图.而Toolbar就是折叠后看到的顶栏Toolbar.
app:contentScrim="?attr/colorPrimary",CollapsingToolbarLayout这个属性是设置折叠后Toolbar的颜色.
app:layout_scrollFlags="scroll|exitUntilCollapsed",这是两个Flag控制滚动时候CollapsingToolbarLayout的表现.
1) Scroll, 表示向下滚动列表时候,CollapsingToolbarLayout会滚出屏幕并且消失(原文解释:this flag should be set for all views that want to scroll off the screen - for views that do not use this flag, they’ll remain pinned to the top of the screen)
2) exitUntilCollapsed, 表示这个layout会一直滚动离开屏幕范围,直到它收折成它的最小高度.(原文解释:this flag causes the view to scroll off until it is ‘collapsed’ (its minHeight) before exiting)
app:layout_collapseMode="parallax",这是控制滚出屏幕范围的效果的
1) parallax,表示滚动过程中,会一直保持可见区域在正中间.
2) pin,表示不会被滚出屏幕范围.
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.fourth_activity); final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
actionBar.setDisplayHomeAsUpEnabled(true);
} final CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(
R.id.collapsing_toolbar);
collapsingToolbar.setTitle(getString(R.string.fourth_activity)); final RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
linearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
recyclerView.setLayoutManager(linearLayoutManager);
recyclerView.setAdapter(new MyAdapter(this)); Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.mu);
Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
@Override
public void onGenerated(final Palette palette) {
int defaultColor = getResources().getColor(R.color.medium_blue);
int defaultTitleColor = getResources().getColor(R.color.white);
int bgColor = palette.getDarkVibrantColor(defaultColor);
int titleColor = palette.getLightVibrantColor(defaultTitleColor); collapsingToolbar.setContentScrimColor(bgColor);
collapsingToolbar.setCollapsedTitleTextColor(titleColor);
collapsingToolbar.setExpandedTitleColor(titleColor);
}
});
}
这是Activity的onCreate方法,有两处地方需要关注的
1. setSupportActionBar()方法,告诉AppCompatActivity哪一个是ActionBar(实际是Toolbar).不然的话,做透明Status Bar(电池,手机信号那一区域)效果时候,ActionBar会位置不正确.
2. Palette,调色板的意思,也是Android Support Library提供的.用来抓取Bitmap的颜色.在此处的用处是,当ActionBar被收折后,背景颜色能保持和Banner大图的色调一致,而Title文字的颜色保证和Banner大图的色调形成强对比.
Demo 代码地址: http://pan.baidu.com/s/1pKbRWzL
Android CollapsingToolbarLayout的更多相关文章
- Android CollapsingToolbarLayout使用介绍
我非常喜欢Material Design里折叠工具栏的效果,bilibili Android客户端视频详情页就是采用的这种设计.这篇文章的第二部分我们就通过简单的模仿bilibili视频详情页的实现来 ...
- Android - CollapsingToolbarLayout 完全解析
CollapsingToolbarLayout 是 google 在其推出的design libiary 中给出的一个新型控件.其可以实现的效果类似于: toolbar是透明的,有一个背景图片以及大标 ...
- Android CollapsingToolbarLayout Toolbar的title覆盖问题
CollapsingToolbarLayout 里: app:titleEnabled="true" app:title="Hello" Toolbar 里: ...
- 一个神奇的控件——Android CoordinatorLayout与Behavior使用指南
CoordinatorLayout是support.design包中的控件,它可以说是Design库中最重要的控件. 本文通过模仿知乎介绍了自定义Behavior,通过模仿百度地图介绍了BottomS ...
- Android M 控件:AppBarLayout,CoordinatorLayout,CollapsingToolbarLayout
AppBarLayout AppBarLayout跟它的名字一样,把容器类的组件全部作为AppBar.是继承LinerLayout实现的一个ViewGroup容器组件,它是为了Material Des ...
- android开发(49) android 使用 CollapsingToolbarLayout ,可折叠的顶部导航栏
概述 在很app上都见过 可折叠的顶部导航栏效果.google support v7 提供了 CollapsingToolbarLayout 可以实现这个效果.效果图如下: 实现步骤 1. 写 ...
- 【转】Android M新控件之AppBarLayout,NavigationView,CoordinatorLayout,CollapsingToolbarLayout的使用
Android M新控件之AppBarLayout,NavigationView,CoordinatorLayout,CollapsingToolbarLayout的使用 分类: Android UI ...
- Android material design support library -- CollapsingToolbarLayout简介
本文是codetrick上material design support library教程的第三篇,主要讲的是CollapsingToolbarLayout的概念和应用方法. 原文链接:Materi ...
- Android Material Design之CollapsingToolbarLayout使用
CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar,它继承至FrameLayout,给它设置layout_scrollFlags,它可以控制包含在Collapsin ...
随机推荐
- .Net Core和.Net Standard直观理解
.NET framework和.NET Core里面有一些部分,内容是相同的. 这部分相同的内容,就被称为标准库...即NET Standard Library. 而那些不同的部分,则分别叫做.NET ...
- 动态加载与插件系统的初步实现(一):反射与MEF解决方案
涉及内容: 反射与MEF解决方案 AppDomain卸载与代理 WinForm.WcfRestService示 PRRT1: 反射实现 插件系统的基本目的是实现宿主与组件的隔离,核心是作为接驳约定的接 ...
- 详细介绍svn在eclipse中的使用(附图解说明)
SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.互联网上很多版本控制服务已从CVS迁移到Subversion ...
- 【LeetCode算法题库】Day7:Remove Nth Node From End of List & Valid Parentheses & Merge Two Lists
[Q19] Given a linked list, remove the n-th node from the end of list and return its head. Example: G ...
- python函数式编程,性能,测试,编码规范
这篇文章主要是对我收集的一些文章的摘要.因为已经有很多比我有才华的人写出了大量关于如何成为优秀Python程序员的好文章. 我的总结主要集中在四个基本题目上:函数式编程,性能,测试,编码规范.如果一个 ...
- Spring AOP部分源码分析
Spring源码流程分析-AOP相关 根据Spring源码整理,其中Calculator为自定义的实现方法. AnnotationConfigApplicationContext()加载配置类的流程 ...
- Hyperledger Fabric CA User’s Guide——概述(二)
概述 下面的图表说明了如何将Hyperledger Fabric CA与总体的Hyperledger Fabric结构相匹配. 有两种方式与一种Hyperledger Fabric CA服务器进行交互 ...
- 关于java内存泄露的总结--引用的类型:强引用,弱引用,软引用
今天面试了一家公司的java开发方面的实习生,被问到一个问题:如何处理java中的内存泄露问题,保证java的虚拟机内存不会被爆掉,当时其实觉得面试官的问题有点泛,所以也没有很好领会他的意思,答案也不 ...
- Scrum Meeting 10.30
成员 今日任务 明日计划 用时 徐越 配置servlet环境,设计开发文档 设计开发文档,配置服务器,使得本地可以访问服务器 5h 武鑫 软件界面设计:学习使用Activity和Fragment 设计 ...
- 软工1816 · Beta冲刺(1/7)
团队信息 队名:爸爸饿了 组长博客:here 作业博客:here 组员情况 组员1(组长):王彬 过去两天完成了哪些任务 完成beta冲刺阶段的任务安排 整理博客 接下来的计划 & 还剩下哪些 ...