Android Design Support Library(三)用CoordinatorLayout实现Toolbar隐藏和折叠

此文的代码在 Android Design Support Library(一)用TabLayout实现类似网易选项卡动态滑动效果代码的基础上进行修改,如果你没有看过本系列的第一篇文章最好先看一看。
CoordinatorLayout是Android Design Support Library中比较难的控件,顾名思义,它是用来组织它的子views之间协作的一个父view。CoordinatorLayout默认情况下可理解是一个FrameLayout,它的布局方式默认是一层一层叠上去,在这里我会介绍一下它最常用的两种情况。

1. CoordinatorLayout实现Toolbar隐藏效果

先来看看效果
这里写图片描述

接下来代码实现,首先仍旧是配置build.gradle:

dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:22.2.0'
compile 'com.android.support:design:22.2.0'
compile 'com.android.support:recyclerview-v7:22.2.0'
compile 'com.android.support:cardview-v7:22.2.0'
}

com.android.support:design:22.2.0就是我们需要引入的Android Design Support Library,其次我们还引入了Recyclerview和Cardview,还不了解这两个控件的同学可以看看Android5.x RecyclerView 应用解析Android5.x CardView 应用解析这两篇文章。

开始上代码,先来看看布局(activity_tab_layout.xml),最外层我们用CoordinatorLayout 来是做整体的布局,AppBarLayout将Toolbar和TabLayout整合成了一个整体:

<?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:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#ADBE107E"
app:tabMode="scrollable" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:clickable="true"
android:onClick="checkin"
android:src="@drawable/ic_discuss"
app:layout_anchor="@id/main_content"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>

能隐藏的关键是 app:layout_scrollFlags=”scroll|enterAlways”这个属性,设置滚动事件,属性里面必须至少启用scroll这个flag,这样这个view才会滚动出屏幕,否则它将一直固定在顶部。

这里我们用到了一个新的控件FloatingActionButton,它也是Design Support Library提供的,你可以把它当作ImageView。它有两个属性需要注意下:

  • app:layout_anchor=””表示相对于哪个布局。
  • app:layout_anchorGravity=””表示相对于布局的位置。

java代码(CoordinatorLayoutActivity .java)

package com.example.liuwangshu.mooncoordinatorlayout;
import android.support.design.widget.Snackbar;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.View;
import java.util.ArrayList;
import java.util.List;
public class CoordinatorLayoutActivity extends AppCompatActivity {
private ViewPager mViewPager;
private TabLayout mTabLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab_layout);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
final ActionBar ab = getSupportActionBar();
ab.setDisplayHomeAsUpEnabled(true);
mViewPager = (ViewPager) findViewById(R.id.viewpager);
initViewPager();
}
private void initViewPager() {
mTabLayout = (TabLayout) findViewById(R.id.tabs);
List<String> titles = new ArrayList<>();
titles.add("精选");
titles.add("体育");
titles.add("巴萨");
titles.add("购物");
titles.add("明星");
titles.add("视频");
titles.add("健康");
titles.add("励志");
titles.add("图文");
titles.add("本地");
titles.add("动漫");
titles.add("搞笑");
titles.add("精选");
for (int i = 0; i < titles.size(); i++) {
mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(i)));
}
List<Fragment> fragments = new ArrayList<>();
for (int i = 0; i < titles.size(); i++) {
fragments.add(new ListFragment());
}
FragmentAdapter mFragmentAdapteradapter =
new FragmentAdapter(getSupportFragmentManager(), fragments, titles);
//给ViewPager设置适配器
mViewPager.setAdapter(mFragmentAdapteradapter);
//将TabLayout和ViewPager关联起来。
mTabLayout.setupWithViewPager(mViewPager);
//给TabLayout设置适配器
mTabLayout.setTabsFromPagerAdapter(mFragmentAdapteradapter);
}
public void checkin(View view) {
Snackbar.make(view, "点击成功", Snackbar.LENGTH_SHORT).show();
}
}

我们点击FloatingActionButton时会触发checkin方法,并用Snackbar来弹出一个提示。Snackbar也是Design Support Library的新控件,可以用来替代Toast和部分的Dialog。
这里写图片描述

其他的代码请参照源码或者Android Design Support Library(一)用TabLayout实现类似网易选项卡动态滑动效果这篇文章的讲解,这里就不赘述了。

2. CoordinatorLayout+CollapsingToolbarLayout实现Toolbar折叠效果

照例先来看看效果(软件bug转成gif动画后效果不大好):
这里写图片描述

要实现折叠效果我们需要引入一个新的布局CollapsingToolbarLayout,它作用是提供了一个可以折叠的Toolbar,它继承至FrameLayout,给它设置layout_scrollFlags,它可以控制包含在CollapsingToolbarLayout中的控件比如mageView、Toolbar在响应layout_behavior事件时作出相应的scrollFlags滚动事件。

布局文件(activity_detail.xml)用CollapsingToolbarLayout将ImageView和Toolbar包含起来作为一个可折叠的Toolbar,再用AppBarLayout包裹起来作为一个Appbar的整体,当然,AppBarLayout目前必须是第一个嵌套在CoordinatorLayout里面的子view。

<?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:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<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"
android:scaleType="centerCrop"
android:src="@drawable/mao"
/>
<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" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>

CollapsingToolbarLayout有几个关键属性需要说明下:

  • app:contentScrim=””,用来设置CollapsingToolbarLayout收缩后最顶部的颜色
  • app:expandedTitleGravity=”left|bottom”,表示将此CollapsingToolbarLayout完全展开后,title所处的位置,默认是left+ bottom
  • app:collapsedTitleGravity=”left”,表示当头部的衬图ImageView消失后,此title将回归到Toolbar的位置,默认是left。
  • app:layout_scrollFlags=””,这个属性我们上面讲过用来设置滚动事件,属性里面必须至少启用scroll这个flag,这样这个view才会滚动出屏幕,否则它将一直固定在顶部。这里我们设置的是app:layout_scrollFlags=”scroll|exitUntilCollapsed”这样能实现折叠效果,如果想要隐藏效果我们可以设置app:layout_scrollFlags=”scroll|enterAlways”。

我们需要定义AppBarLayout与滚动视图之间的联系,Design Support Library包含了一个特殊的字符串资源@string/appbar_scrolling_view_behavior,它和AppBarLayout.ScrollingViewBehavior相匹配,用来通知AppBarLayout何时发生了滚动事件,这个behavior需要设置在触发事件的view之上,所以我们应该在RecyclerView或者任意支持嵌套滚动的view比如NestedScrollView上添加app:layout_behavior=”@string/appbar_scrolling_view_behavior这个属性,当然AppBarLayout 中的子view需要设置app:layout_scrollFlags这个属性,否则接收到RecyclerView滚动事件,AppBarLayout 也不会有什么变化。

最后看看java代码(CollapsingToolbarActivity.java)

package com.example.liuwangshu.mooncoordinatorlayout;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.support.v7.widget.Toolbar;
public class CollapsingToolbarActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_detail);
Toolbar toolbar = (Toolbar) this.findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
CollapsingToolbarLayout collapsingToolbar =
(CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("哆啦A梦");
RecyclerView mRecyclerView= (RecyclerView) findViewById(R.id.recyclerView);
mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(1, StaggeredGridLayoutManager.VERTICAL));
mRecyclerView.setItemAnimator(new DefaultItemAnimator());
mRecyclerView.setAdapter(new RecyclerViewAdapter(CollapsingToolbarActivity.this));
}
}

github源码下载

刘望舒 wechat
我的新书《Android进阶之光》热卖中,更多高质量的Android相关技术干货尽在公众号「刘望舒」。
0%