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

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

前言

首先要說明雪隧，這篇文章同樣會用到CoordinatorLayout和AppBarLayout西轩，這兩個組件的相關(guān)知識，可以參考上一篇文章：
[『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" 下方滾動條的下劃線顏色
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ù)量過多，超出屏幕邊界時候庄拇，可以通過滑動見到那些不可見的子view注服，fix則不可以滑動。
app:tabGravity可以設(shè)置為fill和center丛忆。如果TabLayout中的子view數(shù)量較少時祠汇，如果選擇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進(jìn)行設(shè)置,同樣還可以通過mTabLayout.newTab().setIcon()設(shè)置圖片我抠。然后通過TabLayout的addTab方法進(jìn)行添加。
然后為TabLayout設(shè)置對應(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());
    }
}

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

NestedScrollView

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

使用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入門學(xué)習(xí)筆記』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"哼拔。
這是發(fā)現(xiàn)也沒什么問題引有，跟剛才區(qū)別不大，這是因為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>

效果如圖：

這是我們發(fā)現(xiàn)，向上滑動守谓，由于ScrollView的原因也會滾動穿铆，但是跟AppBarLayout的交互動畫沒有了。只能在AppBarLayout上向上互動斋荞，才能有折疊的效果荞雏。
所以這也就說明了NestedScrollView與ScrollView的區(qū)別，那就是平酿，對于Material Design動畫和組件的適配凤优。

總結(jié)

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

最后編輯于：2017.12.07 00:39:09

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末棍辕，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子还绘，更是在濱河造成了極大的恐慌楚昭，老刑警劉巖，帶你破解...
沈念sama閱讀 217,509評論 6贊 504
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件拍顷，死亡現(xiàn)場離奇詭異抚太，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)昔案，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,806評論 3贊 394
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門尿贫，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人爱沟，你說我怎么就攤上這事帅霜。” “怎么了呼伸？”我有些...
開封第一講書人閱讀 163,875評論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵身冀，是天一觀的道長钝尸。經(jīng)常有香客問我，道長搂根，這世上最難降的妖魔是什么珍促？我笑而不...
開封第一講書人閱讀 58,441評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮剩愧，結(jié)果婚禮上猪叙，老公的妹妹穿的比我還像新娘。我一直安慰自己仁卷，他們只是感情好穴翩，可當(dāng)我...
茶點故事閱讀 67,488評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著锦积，像睡著了一般芒帕。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上丰介，一...
開封第一講書人閱讀 51,365評論 1贊 302
城市分裂傳說
那天背蟆，我揣著相機(jī)與錄音，去河邊找鬼哮幢。笑死带膀，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的橙垢。我是一名探鬼主播垛叨，決...
沈念sama閱讀 40,190評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼柜某！你這毒婦竟也來了点额？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,062評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤莺琳，失蹤者是張志新（化名）和其女友劉穎还棱，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體惭等，經(jīng)...
沈念sama閱讀 45,500評論 1贊 314
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡珍手，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,706評論 3贊 335
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了辞做。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片琳要。...
茶點故事閱讀 39,834評論 1贊 347
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖秤茅，靈堂內(nèi)的尸體忽然破棺而出稚补，到底是詐尸還是另有隱情，我是刑警寧澤框喳，帶...
沈念sama閱讀 35,559評論 5贊 345
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布课幕，位于F島的核電站厦坛，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏乍惊。R本人自食惡果不足惜杜秸，卻給世界環(huán)境...
茶點故事閱讀 41,167評論 3贊 328
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望润绎。院中可真熱鬧撬碟，春花似錦、人聲如沸莉撇。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,779評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽棍郎。三九已至顾稀，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間坝撑，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 32,912評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工粮揉，沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留巡李，地道東北人。一個月前我還...
沈念sama閱讀 47,958評論 2贊 370
代替公主和親
正文我出身青樓扶认，卻偏偏與公主長得像侨拦，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子辐宾，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 44,779評論 2贊 354