『Material Design入門學習筆記』TabLayout與NestedScrollView（附demo）

mymdeep發表於2019-03-03

不知不覺，這已經是『Material Design入門學習筆記』專題第六篇文章了，結束了這篇文章，這個專題，會暫時告一段落。但不是結束，也許僅僅是另一個開始。
『Material Design入門學習筆記』前言
 『Material Design入門學習筆記』動畫（含demo）
『Material Design 入門學習筆記』主題與 AppCompatActivity（附 demo）
『Material Design入門學習筆記』RecyclerView與CardView（附demo）
『Material Design 入門學習筆記』CollapsingToolbarLayout 與 AppBarLayout（附 demo）
demo下載

前言

首先要說明，這篇文章同樣會用到CoordinatorLayout和AppBarLayout，這兩個元件的相關知識，可以參考上一篇文章：
[『Material Design 入門學習筆記』CollapsingToolbarLayout 與 AppBarLayout（附 demo）]

TabLayout

佈局檔案

與之前的CollapsingToolbarLayout類似：

<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.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"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="#ffffff"
            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.CoordinatorLayout>複製程式碼

具體介紹一下TabLayout中的一些引數：

app:tabIndicatorColor="@color/white" 下方滾動條的下劃線顏色
app:tabSelectedTextColor="@color/gray" tab被選中後，文字的顏色
app:tabTextColor="@color/white" tab預設的文字顏色
app:tabMode可以設定為fixed和scrollable。當設定為scrollable表示此TabLayout中當子view數量過多，超出螢幕邊界時候，可以通過滑動見到那些不可見的子view，fix則不可以滑動。

app:tabGravity可以設定為fill和center。如果TabLayout中的子view數量較少時，如果選擇fill是自動充滿，如果選擇center則居中顯示。

程式碼

首先先看一下Activity中的程式碼：

private void initViews(){
      mTabLayout = (TabLayout)findViewById(R.id.tabs);
      mViewPager = (ViewPager)findViewById(R.id.viewpager);
      nestedFragment = new NestedScrollFragment();
      emptyFragment1 = new FirstEmptyFragment();
      emptyFragment2 = new FirstEmptyFragment();
      ArrayList<Fragment> fragments = new ArrayList<>();
      fragments.add(nestedFragment);
      fragments.add(emptyFragment1);
      fragments.add(emptyFragment2);
      ArrayList<String> titles = new ArrayList<>();
      titles.add("NestedScroll");
      titles.add("empty1");
      titles.add("empty2");
      FragmentsAdapter mAdapter = new FragmentsAdapter(getSupportFragmentManager(),fragments,titles);
      mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(0)));
      mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(1)));
      mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(2)));
      mViewPager.setAdapter(mAdapter);
      mTabLayout.setupWithViewPager(mViewPager);
      mTabLayout.setupWithViewPager(mViewPager,false);
  }複製程式碼

首先viewpager需要一個Adapter，這個等下說。然後我們需要一個tab的名字，這個可以通過mTabLayout.newTab().setText進行設定,同樣還可以通過mTabLayout.newTab().setIcon()設定圖片。然後通過TabLayout的addTab方法進行新增。
然後為TabLayout設定對應的viewpager即可。
這裡給出FragmentsAdapter中的程式碼：

public class FragmentsAdapter extends FragmentPagerAdapter {
private List<Fragment> list_fragment;                     
private List<String> list_Title;                           
public FragmentsAdapter(FragmentManager fm, List<Fragment> list_fragment, List<String> list_Title) {
      super(fm);
      this.list_fragment = list_fragment;
      this.list_Title = list_Title;
  }

  @Override
  public Fragment getItem(int position) {
      return list_fragment.get(position);
  }

  @Override
  public int getCount() {
      return list_Title.size();
  }

  @Override
  public CharSequence getPageTitle(int position) {

      return list_Title.get(position % list_Title.size());
  }
}複製程式碼

對於程式碼中提到過的fragment可以自己寫，也可以參考我的demo，下面給一張圖：

NestedScrollView

關於NestedScrollView，我並沒有發現與ScrollView有什麼明顯的差別或優勢，NestedScrollView的存在是指為了適配MD的其他元件而存在的，RecyclerView代替了ListView，而NestedScrollView代替了ScrollView，他們兩個都可以用來跟ToolBar互動，在CoordinatorLayout中實現摺疊滑動等效果。

使用NestedScrollView

<?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="256dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                android:src="@drawable/logo"
                app:layout_collapseMode="parallax"
                />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:layout_marginTop="2dp"
        android:id="@+id/nestedscroll"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <android.support.v7.widget.RecyclerView
            android:layout_width="match_parent"
            android:id="@+id/recycler_nested"
            android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>
    </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>複製程式碼

這次還是用了CollapsingToolbarLayout，因為這個的摺疊效果比較明顯。然後看下程式碼：

     for (int i = 0 ; i< 200;i++){
            list.add("item:"+i);
        }
        adapter = new CardListAdapter(this,list);
        recyclerView = (RecyclerView)findViewById(R.id.recycler_nested);
        recyclerView.setAdapter(adapter);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        recyclerView.setItemAnimator(new DefaultItemAnimator());複製程式碼

這些程式碼在前面的例子中都介紹過，沒見過的可以參考：
『Material Design入門學習筆記』RecyclerView與CardView（附demo）
下面看一下樣圖：

不使用NestedScrollView

如果不使用的情況下，會是什麼樣呢，首先需要修改一下佈局檔案：

<?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="256dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                android:src="@drawable/logo"
                app:layout_collapseMode="parallax"
                />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>


        <android.support.v7.widget.RecyclerView
            android:layout_width="match_parent"
            android:id="@+id/recycler_nested"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>


</android.support.design.widget.CoordinatorLayout>複製程式碼

去掉了NestedScrollView，並把RecyclerView新增了app:layout_behavior="@string/appbar_scrolling_view_behavior"。
這是發現也沒什麼問題，跟剛才區別不大，這是因為RecyclerView自帶了ScrollView。但是如果放一個線性佈局呢?
試一下，建立一個線性佈局，裡面新增多個TextView。佈局如下：

<?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="256dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                android:src="@drawable/logo"
                app:layout_collapseMode="parallax"
                />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    <!--<android.support.v4.widget.NestedScrollView-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="match_parent"-->
        <!--android:fillViewport="true"-->
        <!--android:layout_marginTop="2dp"-->
        <!--android:id="@+id/nestedscroll"-->
        <!--app:layout_behavior="@string/appbar_scrolling_view_behavior">-->
        <!--<android.support.v7.widget.RecyclerView-->
            <!--android:layout_width="match_parent"-->
            <!--android:id="@+id/recycler_nested"-->
            <!--app:layout_behavior="@string/appbar_scrolling_view_behavior"-->
            <!--android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>-->
    <!--</android.support.v4.widget.NestedScrollView>-->
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"

    >
    <TextView
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:text="test"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:text="test"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:text="test"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:text="test"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:text="test"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:text="test"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:text="test"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="test"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="test"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="test"/>
</LinearLayout>
    </ScrollView>
</android.support.design.widget.CoordinatorLayout>複製程式碼

效果如圖：

這是我們發現，向上滑動，由於ScrollView的原因也會滾動，但是跟AppBarLayout的互動動畫沒有了。只能在AppBarLayout上向上互動，才能有摺疊的效果。
所以這也就說明了NestedScrollView與ScrollView的區別，那就是，對於Material Design動畫和元件的適配。

總結

『Material Design入門學習筆記』暫時就寫到這，後面如果發現好的東西還會進行補充，但是近期內，就寫到這裡了，有疑問的朋友歡迎給我留言指正，或者關注我的公眾號留言：

SpringBoot整合ElasticSearch 入門demo學習筆記
2020-11-05
Spring BootElasticsearch筆記
Ajax學習筆記demo
2022-04-29
筆記
git入門學習筆記
2018-11-15
Git筆記
Docker入門學習筆記
2018-07-25
Docker筆記
Unity學習筆記--入門
2023-10-29
Unity筆記
TS入門學習筆記
2020-01-19
筆記
【PostgreSQL】入門學習筆記
2022-04-19
SQL筆記
JavaScript入門學習學習筆記（上）
2020-10-23
JavaScript筆記
《Python入門與資料科學庫》學習筆記
2021-02-12
Python資料科學筆記
HTML入門學習筆記（二）
2019-02-16
HTML筆記
React入門指南(學習筆記)
2019-09-05
React筆記
pandas 學習筆記 (入門篇)
2019-10-18
筆記
Go 入門指南學習筆記
2019-12-27
Go筆記
MySQL學習筆記---入門使用
2020-10-24
MySql筆記
Dubbo學習筆記(一) 入門
2018-04-13
筆記
JavaScript入門-學習筆記(一)
2021-01-04
JavaScript筆記
JavaScript學習筆記1—快速入門
2018-11-02
JavaScript筆記
iOS學習筆記39 ReactiveCocoa入門
2018-06-02
iOS筆記React
redis學習筆記1: Redis入門
2024-05-14
Redis筆記
webpack 學習筆記：入門介紹
2020-09-26
Web筆記
node 學習筆記基礎入門
2020-10-13
筆記
python學習筆記——jieba庫入門
2020-09-28
Python筆記Jieba
Elasticsearch入門學習重點筆記
2019-05-15
Elasticsearch筆記
CANopen學習筆記（一）CANopen入門
2024-08-23
筆記
【Laravel 入門教程】學習筆記 1
2018-04-23
Laravel筆記
【MongoDB學習筆記】MongoDB 快速入門
2021-12-21
MongoDB筆記
java學習筆記1（入門級）
2021-06-20
Java筆記
爬蟲入門學習筆記3
2021-01-05
爬蟲筆記
記一次flink入門學習筆記
2020-10-23
筆記
微信小程式入門學習筆記
2018-05-11
微信小程式筆記
SpringMVC學習筆記之---簡單入門
2019-08-06
SpringMVC筆記
安卓學習筆記20：Fragment入門
2020-10-27
安卓筆記Fragment
webpack4入門學習筆記(一)
2019-04-21
Web筆記
webpack4入門學習筆記(二)
2019-04-21
Web筆記
深度學習入門筆記——Transform的使用
2024-10-28
深度學習筆記ORM
深度學習入門筆記——DataLoader的使用
2024-10-29
深度學習筆記
substrate學習筆記2：substrate快速入門
2022-03-21
筆記
go實戰web入門學習筆記
2021-06-19
GoWeb筆記