Material Design之CollapsingToolbarLayout 和 TabLayout使用

      最近做项目需要做一个类似微博个人主页的界面，有个向上滑动隐藏头像部分view,然后下面的Tab 滑动到顶部。所以研究了下Android 两个新的布局控件CollapsingToolbarLayout和TabLayout的使用。先上图： 

          

                  

      AppBarLayout 是继承LinerLayout实现的一个ViewGroup容器组件，它是为了Material Design设计的App Bar，支持手势滑动操作。默认的AppBarLayout是垂直方向的，它的作用是把AppBarLayout包裹的内容都作为AppBar。

       CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar，它继承至FrameLayout，给它设置layout_scrollFlags，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固 定在屏幕顶端)。 

       TabLayout提供了一个水平的布局用来展示Tabs。它和Viewpager一起使用可以实现当下很多app的导航效果。如 网易新闻、简书客户端等。现在看代码：

<? 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"
    tools :context= ".acitivity.MainActivity" >

    <android.support.design.widget.AppBarLayout
        android :layout_width= "match_parent"
        android :layout_height= "260dp" >

        <android.support.design.widget.CollapsingToolbarLayout
            android :layout_width= "match_parent"
            android :layout_height= "0dp"
            android :layout_weight= "1"
            app :layout_scrollFlags= "scroll|exitUntilCollapsed" >

            <RelativeLayout
                android :id= "@+id/backdrop"
                android :layout_width= "match_parent"
                android :layout_height= "match_parent"
                android :layout_marginTop= "50dp"
                app :layout_collapseMode= "parallax" >

                <ImageView
                    android :id= "@+id/image"
                    android :layout_width= "80dp"
                    android :layout_height= "80dp"
                    android :layout_centerHorizontal= "true"
                    android :layout_marginTop= "10dp"
                    android :src= "@mipmap/ic_launcher"  />

                <TextView
                    android :id= "@+id/tip"
                    android :layout_width= "wrap_content"
                    android :layout_height= "wrap_content"
                    android :layout_below= "@+id/image"
                    android :layout_centerHorizontal= "true"
                    android :layout_marginTop= "7dp"
                    android :text= " 我是沙拉 不是能吃的沙拉 "  />
            </RelativeLayout>

            <android.support.v7.widget.Toolbar
                android :id= "@+id/toolbar"
                android :layout_width= "match_parent"
                android :layout_height= "50dp"
                app :contentInsetStart= "0dp"
                app :layout_collapseMode= "pin" >

                <RelativeLayout
                    android :layout_width= "match_parent"
                    android :layout_height= "match_parent"
                    android :background= "@android:color/white" >

                    <TextView
                        android :id= "@+id/titlename"
                        android :layout_width= "wrap_content"
                        android :layout_height= "wrap_content"
                        android :layout_centerInParent= "true"
                        android :text= " 个人中心 "
                        android :textColor= "@android:color/background_dark"
                        android :textSize= "18sp"  />

                </RelativeLayout>
            </android.support.v7.widget.Toolbar>

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

        <android.support.design.widget.TabLayout
            android :id= "@+id/tabs"
            android :layout_width= "match_parent"
            android :layout_height= "50dp"
            android :background= "@android:color/white"  />

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

    <ln.talon.com.coordinatorlayout.view.NoScrollViewPager
        android :id= "@+id/ucvp"
        android :layout_width= "match_parent"
        android :layout_height= "match_parent"
        app :layout_behavior= "@string/appbar_scrolling_view_behavior"  />
</android.support.design.widget.CoordinatorLayout>

    注意:   1. 这里toolbar的属性    app:layout_collapseMode=”pin”来确保Toolbar在view折叠的时候仍然被固定在屏幕的顶部。

              2.CoolapsingToolbarLayout属性app:layout_scrollFlags="scroll|exitUntilCollapsed"  x显然想让CoordinatorLayout滚动必须设置sroll属性。

              3.这里使用tabLayout和viewPager实现四个Tab的导航切换,由于viewpager默认的左右滑动事件与 CoolapsingToolbarLayout 滑动有些冲突，这里自定义了一个禁止左右滑动的ViewPager。

      Activitiy代码如下：

public class MainActivity  extends AppCompatActivity {
    private ViewPager  mViewPager ;
    private TabLayout  tabLayout ;
    private SectionsPagerAdapter  mSectionsPagerAdapter ;
    private static final int  ViewPagerCount =  4 ;
    private LayoutInflater  layoutInflater ;
    private String[]  tabs = { "first" ,  "second" ,  "third" ,  "fourth"} ;

    @Override
    protected void  onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState) ;
        setContentView(R.layout. activity_main) ;
        layoutInflater = LayoutInflater. from( this) ;
        mSectionsPagerAdapter =  new SectionsPagerAdapter(getSupportFragmentManager()) ;
        mViewPager = (ViewPager) findViewById(R.id. ucvp) ;
        mViewPager.setAdapter( mSectionsPagerAdapter) ;

        tabLayout = (TabLayout) findViewById(R.id. tabs) ;
        tabLayout.setupWithViewPager( mViewPager) ;
        tabLayout.setTabGravity(TabLayout. GRAVITY_FILL) ;
        for ( int i =  0 ; i <  tabLayout.getTabCount() ; i++) {
            TabLayout.Tab tab =  tabLayout.getTabAt(i) ;
            tab.setCustomView(getTabItemView(i)) ;
        }

    }
    private View  getTabItemView( int index) {
        View view =  layoutInflater.inflate(R.layout. tabview , null) ;
        TextView textView = (TextView) view.findViewById(R.id. tabname) ;
        textView.setText( tabs[index]) ;
        return view ;
    }

    private class SectionsPagerAdapter  extends FragmentPagerAdapter {
        public SectionsPagerAdapter(FragmentManager fm) {
            super(fm) ;
        }

        @Override
        public Fragment  getItem( int position) {
            Fragment fragment =  null;
            switch (position) {
                case  0:
                    fragment = FirstFragment. newInstance( 12) ;
                    break;
                case  1:
                    fragment = SecondFragment. newInstance( 30) ;
                    break;
                case  2:
                    fragment = ThirdFragment. newInstance( 21) ;
                    break;
                case  3:
                    fragment = FourthFragment. newInstance( 14) ;
                    break;

            }
            return fragment ;
        }

        @Override
        public int  getCount() {
            return  ViewPagerCount ;
        }

    }

      另附上不可滑动ViewPager代码：

public class NoScrollViewPager  extends ViewPager {
    private boolean  noScroll =  true;

   public NoScrollViewPager(Context context , AttributeSet attrs) {
      super(context , attrs) ;
   }

    public NoScrollViewPager(Context context) {
      super(context) ;
   }

    public void  setNoScroll( boolean noScroll) {
      this. noScroll = noScroll ;
   }

    @Override
    public void  scrollTo( int x , int y) {
      super.scrollTo(x , y) ;
   }

    @Override
    public boolean  onTouchEvent(MotionEvent arg0) {
      if ( noScroll)
          return false;
      else
         return super.onTouchEvent(arg0) ;
   }

    @Override
    public boolean  onInterceptTouchEvent(MotionEvent arg0) {
      if ( noScroll)
          return false;
      else
         return super.onInterceptTouchEvent(arg0) ;
   }

    @Override
    public void  setCurrentItem( int item , boolean smoothScroll) {
      super.setCurrentItem(item , smoothScroll) ;
   }

    @Override
    public void  setCurrentItem( int item) {
      super.setCurrentItem(item) ;
   }

}

源码在github上，附地址：  https://github.com/lixiaote/CoordinatorLayout