1.背景
在項目開發過程中，有時候會碰到這樣的需求：在滑動的過程中，在某時要将子view固定在頂部（常見的是将界面中的tab在滑動到頂部的時候進行固定）。
之前寫過一篇滑動元件懸浮固定在頂部的部落格，但感覺還是有些複雜，是以就有了這次的實作。效果圖：
2.思路
(CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout)+TabLayout+ViewPager
3.代碼實作
a.主布局代碼
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.ganshenml.slideholdsmoothdemo.ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="30dp"
app:popupTheme="@style/AppTheme.PopupOverlay"></android.support.v7.widget.Toolbar>
<ImageView
android:layout_width="match_parent"
android:layout_height="280dp"
android:scaleType="centerCrop"
android:src="@drawable/bg" />
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_gravity="bottom"
android:background="@color/colorAccent"></android.support.design.widget.TabLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_scrolling" />
</android.support.design.widget.CoordinatorLayout>
需要注意的是：
- app:layout_scrollFlags="scroll|exitUntilCollapsed"——>設定可以滑動且目前view可以一直退出直到折疊視圖顯現。（相關屬性的介紹，可以參考：點選檢視>>）
- <include layout="@layout/content_scrolling" />——>引用的子view布局其實就是一個ViewPager（需要注意的是要在布局中設定：app:layout_behavior="@string/appbar_scrolling_view_behavior"）
b.主界面Activity代碼
public class ScrollingActivity extends AppCompatActivity {
private TabLayout tabLayout;
private ViewPager viewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_scrolling);
initViews();
}
private void initViews() {
tabLayout = (TabLayout) findViewById(R.id.tabLayout);
viewPager = (ViewPager) findViewById(R.id.viewPager);
viewPager.setOffscreenPageLimit(2);
viewPager.setAdapter(new MPagerAdapter(getSupportFragmentManager()));
tabLayout.setupWithViewPager(viewPager);
}
}
c.擴充卡MPagerAdapter代碼
public class MPagerAdapter extends FragmentStatePagerAdapter {
private String[] tabTitle = new String[]{"tab01", "tab02"};
private FirstFragment firstFragment;
private SecondFragment secondFragment;
public MPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
if (position == 0) {
if (firstFragment == null) {
firstFragment = new FirstFragment();
}
return firstFragment;
} else if (position == 1) {
if (secondFragment == null) {
secondFragment = new SecondFragment();
}
return secondFragment;
}
return null;
}
@Override
public int getCount() {
return tabTitle.length;
}
@Override
public CharSequence getPageTitle(int position) {
return tabTitle[position];
}
}
兩個Fragment的代碼非常簡單。僅僅加載布局而已，是以在此就不貼出來了。
4.擴充
a.關于CollapsingToolbarLayout中子view的排列順序對顯示結果造成的影響
如圖：
可以看到圖中黑色邊框顯示的内容不一緻，是以ToolBar和ImageView的排列順序會對視圖的顯示結果造成影響。
推測——>CollapsingToolbarLayout中以上三種view不同排序的剖面展示效果為：
順序：Toolbar——>ImageView——>TabLayout（設定layout_gravity="bottom"）
順序：ImageView——>Toolbar——>TabLayout（設定layout_gravity="bottom"）
不負責任滴猜測：把Toolbar看做一張畫布，隻有覆寫在畫布投射區域範圍内的内容才顯示出來在該畫布内。
（是以，1.在畫布下的内容就無法顯示出來；2.無法覆寫畫布的内容就顯示為畫布預設的樣式）
是以，如果不想要有視差效果的話，那麼就将Toolbar與TabLayout的高度設定一緻。如果将Toolbar去掉，那麼所有的CollapsingToolbarLayout中的View都會滑出界面，此時布局就變成了普通布局了（相當于CollapsingToolbarLayout變成了CollapsingLayout）。
b.去掉Toolbar實作固定效果
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<ImageView
android:layout_width="match_parent"
android:layout_height="280dp"
android:scaleType="centerCrop"
android:src="@drawable/bg" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_gravity="top"
android:background="@color/colorAccent"></android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
隻要将TabLayout從CollapsingToolbarLayout中移到AppBarLayout的一級子View即可。
（這樣也避免了：在CollapsingToolbarLayout中，因為視圖折疊覆寫的問題，會導緻整個ImageView被TabLayout覆寫一部分而顯示不完全的問題。）
檢視完整代碼，點選：GitHub位址>>