CollapsingToolbarLayout 与 TabLayout结合使用实现炫酷效果

   <p>效果</p>    <p>今天我们实现下面的效果</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/5b39894e27048fe15b84d0fbfdb761b7.gif"></p>    <p>第一</p>    <p>Demo里面主要涉及到好多design包下的控件</p>    <p>在项目中先要引入下面的包</p>    <pre>  <code class="language-java">compile 'com.android.support:design:25.0.1'  </code></pre>    <p>第二</p>    <p>项目中的整体布局为下面</p>    <pre>  <code class="language-java"><?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"      xmlns:tools="http://schemas.android.com/tools"      android:layout_width="match_parent"      android:layout_height="match_parent"      android:fitsSystemWindows="true"      tools:context="coordinatorlayout.tangyc.fb.com.coordinatorlayoutdemo.ScrollingActivity">        <android.support.design.widget.AppBarLayout          android:id="@+id/app_bar"          android:layout_width="match_parent"          android:layout_height="300dp"          android:fitsSystemWindows="true"          android:theme="@style/AppTheme.AppBarOverlay">            <android.support.design.widget.CollapsingToolbarLayout              android:id="@+id/toolbar_layout"              android:layout_width="match_parent"              android:layout_height="match_parent"              android:fitsSystemWindows="true"              app:contentScrim="?attr/colorPrimary"              app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">              <ImageView                  android:layout_width="match_parent"                  android:layout_height="match_parent"                  android:fitsSystemWindows="true"                  android:scaleType="centerCrop"                  android:src="@drawable/meinv"                  app:layout_collapseMode="parallax" />                <android.support.v7.widget.Toolbar                  android:id="@+id/toolbar"                  android:layout_width="match_parent"                  android:layout_height="50dp"                  app:layout_collapseMode="pin"                  android:fitsSystemWindows="true"                  app:layout_scrollFlags="scroll|enterAlways"                  app:popupTheme="@style/AppTheme.PopupOverlay" />                <android.support.design.widget.TabLayout                  android:id="@+id/tablayout"                  android:layout_width="match_parent"                  android:layout_height="wrap_content"                  app:tabMode="scrollable"                  android:layout_gravity="bottom" />            </android.support.design.widget.CollapsingToolbarLayout>      </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.v4.view.ViewPager>    </android.support.design.widget.CoordinatorLayout></code></pre>    <p>样式如下图所示</p>    <pre>  <code class="language-java"><style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">      <!-- Customize your theme here. -->      <item name="colorPrimary">@color/colorPrimary</item>      <item name="colorPrimaryDark">@color/colorPrimaryDark</item>      <item name="colorAccent">@color/colorAccent</item>  </style>    <style name="AppTheme.NoActionBar">      <item name="windowActionBar">false</item>      <item name="windowNoTitle">true</item>  </style>    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" /></code></pre>    <p>里面我们就要介绍下面的几个重要的知识点</p>    <p>首先是android: fitsSystemWindows 这个的用处, 就是把Activity状态栏设置成透明模式。</p>    <p>然后在布局文件中，把CollapsingToolbarLayout里要实现沉浸式的控件设置上android:fitsSystemWindows="true"，</p>    <p>如果没有设置(默认为false)，则子布局会位于状态栏下方，未延伸至状态栏。</p>    <p>如图所示有个白色的空白（设置 android:fitsSystemWindows="false"或者不设置 ）</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/5bffd37d4f384080c3b86b0233a8b98a.jpg"></p>    <p>然后就是layout_scrollFlags的属性，里面有五个参数 scroll，enterAlways，enterAlwaysCollapsed，snap，exitUntilCollapsed。</p>    <p>参数的具体如下</p>    <p>scroll:所有想滚动出屏幕的view都需要设置这个flag，没有设置这个flag的view将被固定在屏幕顶部。比如说，TabLayout没有设置这个值，将会停留在屏幕顶部。</p>    <p>enterAlways:设置时，向下的滚动会导致该view变成可见，启用快速“返回模式”。</p>    <p>enterAlwaysCollapsed:当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。</p>    <p>exitUntilCollapsed:滚动退出屏幕，最后折叠在顶端。</p>    <p>sanp:子View的滑动效果的一个吸附效果， 子 View不会存在局部显示的情况，滚动子View的部分高度，当松开手指时，子View要么向上全部滚出屏幕，要么向下全部滚进屏幕。</p>    <p>最后就是layout_collapseMode的使用， 子视图的折叠模式，在子视图设置，有两种方式</p>    <p>“pin”：固定模式，在折叠的时候最后固定在顶端；</p>    <p>“parallax”：视差模式，在折叠的时候会有个视差折叠的效果。</p>    <p>我们现在使用属性app:layout_collapseMode=”parallax”来改变的。</p>    <p>还有一个app:layout_behavior="@string/appbar_scrolling_view_behavior",</p>    <p>它就是指定Behavior的，appbar_scrolling_view_behavior对应的类的名称是：android.support.design.widget.AppBarLayout$ScrollingViewBehavior</p>    <p>第三</p>    <p>代码如下 代码就没有什么可以描述的的里面有详细的注释</p>    <pre>  <code class="language-java">private TabLayout mTabLayout;  private ViewPager mViewPager;  private LayoutInflater mInflater;    private ArrayList<String> mTitles = new ArrayList<>();//页卡标题集合  private View view1, view2;  private ArrayList<View> mViewList = new ArrayList<>();//页卡视图集合  @Override  protected void onCreate(Bundle savedInstanceState) {      super.onCreate(savedInstanceState);      setContentView(R.layout.activity_scrolling);      Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);      setSupportActionBar(toolbar);      //去掉标题      getSupportActionBar().setDisplayShowTitleEnabled(false);          mViewPager = (ViewPager) findViewById(R.id.viewpager);      mTabLayout = (TabLayout) findViewById(R.id.tablayout);      mInflater = LayoutInflater.from(this);      view1 = mInflater.inflate(R.layout.item_view, null);      view2 = mInflater.inflate(R.layout.item_view, null);      //添加到View集合      mViewList.add(view1);      mViewList.add(view2);        //添加标题集合      mTitles.add("安卓开发");      mTitles.add("混合开发");        mTabLayout.setTabMode(TabLayout.MODE_FIXED);//设置tab模式，当前为系统默认模式      mTabLayout.addTab(mTabLayout.newTab().setText(mTitles.get(0)));//添加tab选项卡      mTabLayout.addTab(mTabLayout.newTab().setText(mTitles.get(1)));        MyPagerAdapter mAdapter = new MyPagerAdapter(mViewList);      mViewPager.setAdapter(mAdapter);//给ViewPager设置适配器      mTabLayout.setupWithViewPager(mViewPager);//将TabLayout和ViewPager关联起来。      //mTabLayout.setTabsFromPagerAdapter(mAdapter);//给Tabs设置适配器  }    class MyPagerAdapter extends PagerAdapter {      private ArrayList<View> mViewList;        public MyPagerAdapter(ArrayList<View> mViewList) {          this.mViewList = mViewList;      }        @Override      public int getCount() {          return mViewList.size();      }        @Override      public boolean isViewFromObject(View view, Object object) {          return view == object;      }        @Override      public Object instantiateItem(ViewGroup container, int position) {          container.addView(mViewList.get(position));          return mViewList.get(position);      }        @Override      public void destroyItem(ViewGroup container, int position, Object object) {          container.removeView(mViewList.get(position));      }        @Override      public CharSequence getPageTitle(int position) {          return mTitles.get(position);      }    }</code></pre>    <p> </p>    <p> </p>    <p>来自：https://mp.weixin.qq.com/s/73XhzQ8t-rNDNR2A7756Lg</p>    <p> </p>