Material Design之CollapsingToolbarLayout 和 TabLayout使用

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

11111111111111.png

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的导航效果。如 网易新闻、客户端等。现在看代码：

    

        

            

            
        

        

            

                

            
        

    

    



 
')`

注意:

1. 这里toolbar的属性 app:layout_collapseMode=”pin”来确保Toolbar在view折叠的时候仍然被固定在屏幕的顶部。
2. CoolapsingToolbarLayout属性 app:layout_scrollFlags="scroll|exitUntilCollapsed",显然想让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)