转载

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大图的色调形成强对比.

正文到此结束

所属分类：编程技术

本文标签： App map find CTO tar 色调时间 final windows Google list FIT XML IDE Android UI
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二