效果圖

CoordinatorLayout

概述

CoordinatorLayout官方API

從官方文檔中我們可以看到：
CoordinatorLayout是一個增強型的FrameLayout。
兩個作用：
- As a top-level application decor or chrome layout
- As a container for a specific interaction with one or more child views

(
- 作為一個布局的根布局
- 作為一個為子視圖之間相互協調手勢效果的一個協調布局
- )

該控件也是Design包下的一個控件，然而這個控件可以被稱為Design包中最復雜、功能最強大的控件：CoordinatorLayout。為什么這樣說呢？原因是：它是組織它眾多子view之間互相協作的一個ViewGroup。

CoordinatorLayout 的神奇之處就在于 Behavior 對象。怎么理解呢？CoordinatorLayout使得子view之間知道了彼此的存在，一個子view的變化可以通知到另一個子view，CoordinatorLayout 所做的事情就是當成一個通信的橋梁，連接不同的view，使用 Behavior 對象進行通信。

比如：在CoordinatorLayout中使用AppBarLayout，如果AppBarLayout的子View（如ToolBar、TabLayout）標記了app:layout_scrollFlags滾動事件,那么在CoordinatorLayout布局里其它標記了app:layout_behavior的子View（LinearLayout、RecyclerView、NestedScrollView等）就能夠響應（如ToolBar、TabLayout）控件被標記的滾動事件。

<android.support.design.widget.CoordinatorLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:toolbar="http://schemas.android.com/apk/res-auto"android:id="@+id/coordinator_layout"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.design.widget.AppBarLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:fitsSystemWindows="true"><android.support.v7.widget.Toolbarandroid:id="@+id/toolBar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:background="#30469b"app:layout_scrollFlags="scroll|enterAlways"toolbar:logo="@drawable/gur_project_10"toolbar:navigationIcon="@drawable/ic_drawer_home"toolbar:subtitle="子標題"toolbar:title="標題"/><android.support.design.widget.TabLayoutandroid:id="@+id/tabLayout"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="#30469b"app:tabGravity="fill"app:tabMode="fixed"app:tabSelectedTextColor="#ff0000"app:tabTextColor="#ffffff"/></android.support.design.widget.AppBarLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:scrollbars="none"app:layout_behavior="@string/appbar_scrolling_view_behavior"><android.support.v4.view.ViewPagerandroid:id="@+id/viewpager"android:layout_width="match_parent"android:layout_height="match_parent" /></LinearLayout></android.support.design.widget.CoordinatorLayout>

上述布局文件中，ToolBar標記了layout_scrollFlags滾動事件，那么當LinearLayout滾動時便可觸發ToolBar中的layout_scrollFlags效果

即往上滑動隱藏ToolBar，下滑出現ToolBar，而不會隱藏TabLayout，因為TabLayout沒有標記scrollFlags事件，相反，如果TabLayout也標記了ScrollFlags事件，那么LinearLayout的下滑時ToolBar和TabLayout都會隱藏了。

layout_scrollFlags說明

valuecomment

scroll	所有想滾動出屏幕的view都需要設置這個flag， 沒有設置這個flag的view將被固定在屏幕頂部。
enterAlways	這個flag讓任意向下的滾動都會導致該view變為可見，啟用快速“返回模式”。
enterAlwaysCollapsed	當你的視圖已經設置minHeight屬性又使用此標志時，你的視圖只能已最小高度進入，只有當滾動視圖到達頂部時才擴大到完整高度
exitUntilCollapsed	滾動退出屏幕，最后折疊在頂端

【注意】: 設置了layout_scrollFlags標志的View必須在沒有設置的View的之前定義，這樣可以確保設置過的View都從上面移出, 只留下那些固定的View在下面。

TabLayout

TabLayout-Android M新控件

說到TabLayout，就是實現多個Tab之間的切換，不過Google在Design library新推出的TabLayout既實現了固定的選項卡 – (Tab的寬度平均分配)，也實現了可滾動的選項卡 – (Tab寬度不固定，同時可以橫向滾動)，還實現了所有Tab居中顯示。它還有一個重要作用就是結合ViewPager來實現多個Tab之間的切換。
來看看TabLayout的三種實現方式：

• 固定的Tab，根據TabLayout的寬度適配
  
• 固定的Tab，在TabLayout中居中顯示
  
• 可滑動的Tab
  

---

要實現上述效果，首先就需要加入TabLayout：

<android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#30469b" app:tabGravity="fill" app:tabMode="fixed" app:tabSelectedTextColor="#ff0000" app:tabTextColor="#ffffff" />

上面有幾個參數我來詳細介紹下吧，其實就是通過改變這幾個參數來改變TabLayout顯示效果的：

• tabGravity —Tab的重心，有填充和居中兩個值，為別為fill和center。
• tabMode —Tab的模式，有固定和滾動兩個模式，分別為 fixed 和 scrollable。
• tabTextColor —設置默認狀態下Tab上字體的顏色。
• tabSelectedTextColor —設置選中狀態下Tab上字體的顏色。

然后在代碼中動態添加Tab：

TabLayout mTabLayout = (TabLayout) findViewById(R.id.tabLayout); mTabLayout.addTab(mTabLayout.newTab().setText("TabOne"));//給TabLayout添加Tab mTabLayout.addTab(mTabLayout.newTab().setText("TabTwo")); mTabLayout.addTab(mTabLayout.newTab().setText("TabThree")); mTabLayout.setupWithViewPager(mViewPager);//給TabLayout設置關聯ViewPager，如果設置了ViewPager，那么ViewPagerAdapter中的getPageTitle()方法返回的就是Tab上的標題

ViewPager設置代碼：

ViewPager mViewPager = (ViewPager) findViewById(R.id.viewpager); MyViewPagerAdapter viewPagerAdapter = new MyViewPagerAdapter(getSupportFragmentManager()); viewPagerAdapter.addFragment(FragmentOne.newInstance(), "TabOne");//添加Fragment viewPagerAdapter.addFragment(FragmentTwo.newInstance(), "TabTwo"); viewPagerAdapter.addFragment(FragmentThree.newInstance(), "TabThree"); mViewPager.setAdapter(viewPagerAdapter);//設置適配器

然后把mViewPager設置給TabLayout即可。貼一下ViewPager適配器代碼：

import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter;import java.util.ArrayList; import java.util.List;/*** 另外的寫法 參考 ：SimpleFragmentPagerAdapter*/public class MyViewPagerAdapter extends FragmentPagerAdapter {//添加的Fragment的集合private final List<Fragment> mFragments = new ArrayList<>();//每個Fragment對應的title的集合private final List<String> mFragmentsTitles = new ArrayList<>();public MyViewPagerAdapter(FragmentManager fm) {super(fm);}/*** @param fragment 添加Fragment* @param fragmentTitle Fragment的標題，即TabLayout中對應Tab的標題*/public void addFragment(Fragment fragment, String fragmentTitle) {mFragments.add(fragment);mFragmentsTitles.add(fragmentTitle);}@Overridepublic Fragment getItem(int position) {//得到對應position的Fragmentreturn mFragments.get(position);}@Overridepublic int getCount() {//返回Fragment的數量return mFragments.size();}@Overridepublic CharSequence getPageTitle(int position) {//得到對應position的Fragment的titlereturn mFragmentsTitles.get(position);} }

總結

為了使得Toolbar可以滑動，我們必須還得有個條件，就是CoordinatorLayout布局下包裹一個可以滑動的布局，比如 RecyclerView，NestedScrollView(經過測試，ListView，ScrollView不支持)具有滑動效果的組件。并且給這些組件設置如下屬性來告訴CoordinatorLayout，該組件是帶有滑動行為的組件，然后CoordinatorLayout在接受到滑動時會通知AppBarLayout 中可滑動的Toolbar可以滑出屏幕了。

為了使得Toolbar有滑動效果，必須做到如下三點：

• CoordinatorLayout必須作為整個布局的父布局容器。
• 給需要滑動的組件設置 app:layout_scrollFlags=”scroll|enterAlways” 屬性。
• 給你的可滑動的組件，也就是RecyclerView 或者 NestedScrollView 設置如下屬性：

app:layout_behavior="@string/appbar_scrolling_view_behavior"

總結

以上是生活随笔為你收集整理的CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar-Android M新控件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。