『Material Design入門學(xué)習(xí)筆記』TabLayout與NestedScrollView（附demo）

不知不覺，這已經(jīng)是『Material Design入門學(xué)習(xí)筆記』專題第六篇文章了，結(jié)束了這篇文章，這個(gè)專題，會(huì)暫時(shí)告一段落。但不是結(jié)束，也許僅僅是另一個(gè)開始。
『Material Design入門學(xué)習(xí)筆記』前言
『Material Design入門學(xué)習(xí)筆記』動(dòng)畫（含demo）
『Material Design 入門學(xué)習(xí)筆記』主題與 AppCompatActivity（附 demo）
『Material Design入門學(xué)習(xí)筆記』RecyclerView與CardView（附demo）
『Material Design 入門學(xué)習(xí)筆記』CollapsingToolbarLayout 與 AppBarLayout（附 demo）
demo下載

前言

首先要說明，這篇文章同樣會(huì)用到CoordinatorLayout和AppBarLayout，這兩個(gè)組件的相關(guān)知識(shí)，可以參考上一篇文章：
[『Material Design 入門學(xué)習(xí)筆記』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中的一些參數(shù)：

  • app:tabIndicatorColor="@color/white" 下方滾動(dòng)條的下劃線顏色
  • app:tabSelectedTextColor="@color/gray" tab被選中后，文字的顏色
  • app:tabTextColor="@color/white" tab默認(rèn)的文字顏色
  • app:tabMode可以設(shè)置為fixed和scrollable。當(dāng)設(shè)置為scrollable表示此TabLayout中當(dāng)子view數(shù)量過多，超出屏幕邊界時(shí)候，可以通過滑動(dòng)見到那些不可見的子view，fix則不可以滑動(dòng)。
  • app:tabGravity可以設(shè)置為fill和center。如果TabLayout中的子view數(shù)量較少時(shí)，如果選擇fill是自動(dòng)充滿，如果選擇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需要一個(gè)Adapter，這個(gè)等下說。然后我們需要一個(gè)tab的名字，這個(gè)可以通過mTabLayout.newTab().setText進(jìn)行設(shè)置,同樣還可以通過mTabLayout.newTab().setIcon()設(shè)置圖片。然后通過TabLayout的addTab方法進(jìn)行添加。
然后為TabLayout設(shè)置對(duì)應(yīng)的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());
    }
}

對(duì)于代碼中提到過的fragment可以自己寫，也可以參考我的demo，下面給一張圖：

NestedScrollView

關(guān)于NestedScrollView，我并沒有發(fā)現(xiàn)與ScrollView有什么明顯的差別或優(yōu)勢(shì)，NestedScrollView的存在是指為了適配MD的其他組件而存在的，RecyclerView代替了ListView，而NestedScrollView代替了ScrollView，他們兩個(gè)都可以用來跟ToolBar交互，在CoordinatorLayout中實(shí)現(xiàn)折疊滑動(dòng)等效果。

使用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，因?yàn)檫@個(gè)的折疊效果比較明顯。然后看下代碼：

     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入門學(xué)習(xí)筆記』RecyclerView與CardView（附demo）
下面看一下樣圖：

沒有上拉的時(shí)候
向上滑動(dòng)的時(shí)候

不使用NestedScrollView

如果不使用的情況下，會(huì)是什么樣呢，首先需要修改一下布局文件：

<?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"。
這是發(fā)現(xiàn)也沒什么問題，跟剛才區(qū)別不大，這是因?yàn)镽ecyclerView自帶了ScrollView。但是如果放一個(gè)線性布局呢?
試一下，建立一個(gè)線性布局，里面添加多個(gè)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>

效果如圖：


這是我們發(fā)現(xiàn)，向上滑動(dòng)，由于ScrollView的原因也會(huì)滾動(dòng)，但是跟AppBarLayout的交互動(dòng)畫沒有了。只能在AppBarLayout上向上互動(dòng)，才能有折疊的效果。
所以這也就說明了NestedScrollView與ScrollView的區(qū)別，那就是，對(duì)于Material Design動(dòng)畫和組件的適配。

總結(jié)

『Material Design入門學(xué)習(xí)筆記』暫時(shí)就寫到這，后面如果發(fā)現(xiàn)好的東西還會(huì)進(jìn)行補(bǔ)充，但是近期內(nèi)，就寫到這里了，有疑問的朋友歡迎給我留言指正，或者關(guān)注我的公眾號(hào)留言：


最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容