1.背景
在項目開發過程中，有時候會碰到這樣的需求：在滑動的過程中，在某時要將子view固定在頂部（常見的是將界面中的tab在滑動到頂部的時候進行固定）。
之前寫過一篇滑動組件android/222208.html">android/225045.html">懸浮固定在頂部的文章，但感覺還是有些復雜，因此就有了這次的實現。效果圖：
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>
需要注意的是：
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地址>>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
