『Material Design入门学习笔记』TabLayout与NestedScrollView（附demo）

时间 2019-11-15

标签 material design 入门学习笔记 tablayout nestedscrollview demo 繁體版

原文原文链接

不知不觉，这已是『Material Design入门学习笔记』专题第六篇文章了，结束了这篇文章，这个专题，会暂时告一段落。但不是结束，也许仅仅是另外一个开始。
『Material Design入门学习笔记』前言
 『Material Design入门学习笔记』动画（含demo）
『Material Design 入门学习笔记』主题与 AppCompatActivity（附 demo）
『Material Design入门学习笔记』RecyclerView与CardView（附demo）
『Material Design 入门学习笔记』CollapsingToolbarLayout 与 AppBarLayout（附 demo）
demo下载javascript

前言

首先要说明，这篇文章一样会用到CoordinatorLayout和AppBarLayout，这两个组件的相关知识，能够参考上一篇文章：
[『Material Design 入门学习笔记』CollapsingToolbarLayout 与 AppBarLayout（附 demo）]java

TabLayout

布局文件

与以前的CollapsingToolbarLayout相似：android

<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中的一些参数：git

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则居中显示。github

代码

首先先看一下Activity中的代码：app

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中的代码：ide

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中实现折叠滑动等效果。post

使用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入门学习笔记』暂时就写到这，后面若是发现好的东西还会进行补充，可是近期内，就写到这里了，有疑问的朋友欢迎给我留言指正，或者关注个人公众号留言：