最近做项目需要做一个类似微博个人主页的界面，有个向上滑动隐藏头像部分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的导航效果。如 网易新闻、简书客户端等。现在看代码：
<?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>')`
注意:
- 这里toolbar的属性 app:layout_collapseMode=”pin”来确保Toolbar在view折叠的时候仍然被固定在屏幕的顶部。
- 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);
}}
网友评论