AppBarLayout簡介
AppBarLayout是Android5.0的Material Design的一個特色控制元件，從控制元件的名字可以知道其主要作用於App的bar。
AppBarLayout繼承LinearLayout，佈局方向預設是垂直佈局，子控制元件在佈局中通過設定app:layout_scrollFlags或者在java中setScrollFlags()方法設定它的滑動手勢，但子控制元件的根佈局必須是 CoordinatorLayout才能實現。
實現效果
剛開始的時候顯示Toolbar和TableLayout，當我往上滑動的時候，整個頁面一起往上滑動，TableLayout推到Toolbar位置的時候會懸停住，固定在此位置。當我往下滑動的時候，Toolbar會跟隨手勢顯示出來，TableLayout滑回原來的位置。
此功能主要是通過AppBarLayout來實現，其子控制元件設定layout_scrollFlags屬性即可。
實現
AppBarActivity
public class AppBarActivity extends AppCompatActivity {
private TabLayout tabLayout;
private String[] title = {
"科技",
"美女",
"財經",
"頭條",
"新聞",
"娛樂",
"體育",
"頭條"
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_app_bar);
final ViewPager viewPager = (ViewPager) findViewById(R.id.vp);
tabLayout = (TabLayout)findViewById(R.id.tablayout);
MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
//1.TabLayout和Viewpager關聯
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
viewPager.setCurrentItem(tab.getPosition(),true);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
//2.ViewPager滑動關聯tabLayout
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
//設定tabLayout的標籤來自於PagerAdapter
tabLayout.setTabsFromPagerAdapter(adapter);
viewPager.setAdapter(adapter);
}
class MyPagerAdapter extends FragmentPagerAdapter {
public MyPagerAdapter(FragmentManager fm) {
super(fm);
// TODO Auto-generated constructor stub
}
@Override
public CharSequence getPageTitle(int position) {
// TODO Auto-generated method stub
return title[position];
}
@Override
public Fragment getItem(int position) {
Fragment f = new DetailFragment();
Bundle bundle = new Bundle();
bundle.putString("title", title[position]);
f.setArguments(bundle);
return f;
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return title.length;
}
}
}
複製程式碼這裡不需要過多的解釋，主要是ViewPager 的設定。
DetailFragment
public class DetailFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_layout, container, false);
return view;
}
}
複製程式碼Fragment 的佈局檔案
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.widget.NestedScrollView
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:gravity="center_horizontal"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="300dp"
android:layout_height="200dp"
android:layout_margin="0dp"
app:cardCornerRadius="20dp"
app:cardElevation="10dp"
app:contentPadding="5dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="@drawable/aa"/>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="300dp"
android:layout_height="200dp"
android:layout_margin="0dp"
app:cardCornerRadius="20dp"
app:cardElevation="10dp"
app:contentPadding="5dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="@drawable/aa"/>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="300dp"
android:layout_height="200dp"
android:layout_margin="0dp"
app:cardCornerRadius="20dp"
app:cardElevation="10dp"
app:contentPadding="5dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="@drawable/aa"/>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="300dp"
android:layout_height="200dp"
android:layout_margin="0dp"
app:cardCornerRadius="20dp"
app:cardElevation="10dp"
app:contentPadding="5dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="@drawable/aa"/>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</LinearLayout>
複製程式碼以上的程式碼都是比較簡單的實現ViewPager的過程，接下來我們看下主要的佈局檔案。
<?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="com.main.appbar.AppBarActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
android:title="APPbar"
>
<TextView
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="標題"/>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
app:tabBackground="@color/material_deep_teal_200"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="exitUntilCollapsed|enterAlways"
app:tabGravity="fill"
app:tabIndicatorColor="@color/colorPrimary"
app:tabMode="scrollable"
app:tabSelectedTextColor="@color/colorPrimary"
app:tabTextColor="@color/colorPrimary"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
複製程式碼主佈局檔案的跟佈局需要CoordinatorLayout才能實現AppBarLayout。AppBarLayout是繼承LinearLayout，可以直接將Toolbar和TabLayout作為其子View即可。
這裡最重要的一點就是給子View設定app:layout_scrollFlags，其設定的值：scroll、enterAlways、enterAlwaysCollapsed、exitUntilCollapsed和snap。
scroll：子控制元件跟隨列表滑出螢幕；
enterAlways：('quick return' pattern)跟scroll一塊使用時，向上滑動時ToolBar移出螢幕，我們向下滑動時Toolbar進入螢幕。
enterAlwaysCollapsed：檢視設定了minHeight屬性的時候，那麼檢視只能以最小高度進入，只有當滾動檢視到達頂部時才擴大到完整高度。
enterAlwaysCollapsed：滾動退出螢幕，最後摺疊在頂端。
snap：與scroll一起使用時，我們只需要滑動一小段距離，AppBarLayout就會隨著我們滑動的View向上滑出螢幕。
這樣就可以做到上面效果圖的頁面效果了。