本文主要包括

CollapsingToolbarLayout實現滾動動畫效果

ViewPager+tabLayout實現左右類Tab效果

控件介紹

這次需要用到得新控件比較多，主要有以下幾個：

• CoordinatorLayout
  組織它的子views之間協作的一個Layout，它可以給子View切換提供動畫效果。
• AppBarLayout
  可以讓包含在其中的控件響應被標記了ScrollingViewBehavior的View的滾動事件
• CollapsingToolbarLayout
  可以控制包含在CollapsingToolbarLayout其中的控件，在響應collapse時是移除屏幕和固定在最上面
• TabLayout
  結合ViewPager，實現多個TAB的切換的功能
• NestedScrollView
  與ScrollView基本相同，不過包含在NestedScrollView中的控件移動時才能時AppBarLayout縮放

CollapsingToolbarLayout作用是提供了一個可以折疊的Toolbar，它繼承至FrameLayout，給它設置layout_scrollFlags，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在響應layout_behavior事件時作出相應的scrollFlags滾動事件(移除屏幕或固定在屏幕頂端)。

使用CollapsingToolbarLayout：

layout布局

<?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"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"><android.support.design.widget.AppBarLayoutandroid:layout_width="match_parent"android:layout_height="256dp"android:fitsSystemWindows="true"android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"><android.support.design.widget.CollapsingToolbarLayoutandroid:id="@+id/collapsing_toolbar"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"app:contentScrim="?attr/colorPrimary"app:expandedTitleMarginEnd="64dp"app:expandedTitleMarginStart="48dp"app:layout_scrollFlags="scroll|exitUntilCollapsed"><ImageViewandroid:id="@+id/ivImage"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"android:scaleType="centerCrop"android:src="@drawable/book1"app:layout_collapseMode="parallax"app:layout_collapseParallaxMultiplier="0.7" /><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"app:layout_collapseMode="pin"app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /></android.support.design.widget.CollapsingToolbarLayout></android.support.design.widget.AppBarLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"app:layout_behavior="@string/appbar_scrolling_view_behavior"><android.support.design.widget.TabLayoutandroid:id="@+id/sliding_tabs"android:layout_width="match_parent"android:layout_height="wrap_content"app:tabGravity="fill"app:tabMode="fixed" /><android.support.v4.view.ViewPagerandroid:id="@+id/viewpager"android:layout_width="match_parent"android:layout_height="match_parent" /></LinearLayout> </android.support.design.widget.CoordinatorLayout>

activity代碼

Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);setSupportActionBar(mToolbar);getSupportActionBar().setDisplayHomeAsUpEnabled(true);mToolbar.setNavigationOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {onBackPressed();}});//使用CollapsingToolbarLayout必須把title設置到CollapsingToolbarLayout上，設置到Toolbar上則不會顯示CollapsingToolbarLayout mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);mCollapsingToolbarLayout.setTitle("MyCollapsingToolbar");//通過CollapsingToolbarLayout修改字體顏色mCollapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);//設置還沒收縮時狀態下字體顏色mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.GREEN);//設置收縮后Toolbar上字體的顏色

代碼解釋

我們在CollapsingToolbarLayout中設置了一個ImageView和一個Toolbar。并把這個CollapsingToolbarLayout放到AppBarLayout中作為一個整體。

在CollapsingToolbarLayout中：

我們設置了layout_scrollFlags:關于它的值我這里再說一下：

scroll - 想滾動就必須設置這個。

enterAlways - 實現quick return效果, 當向下移動時，立即顯示View（比如Toolbar)。

exitUntilCollapsed - 向上滾動時收縮View，但可以固定Toolbar一直在上面。

enterAlwaysCollapsed - 當你的View已經設置minHeight屬性又使用此標志時，你的View只能以最小高度進入，只有當滾動視圖到達頂部時才擴大到完整高度。

其中還設置了一些屬性，簡要說明一下：

contentScrim - 設置當完全CollapsingToolbarLayout折疊(收縮)后的背景顏色。

expandedTitleMarginStart - 設置擴張時候(還沒有收縮時)title向左填充的距離。

在ImageView控件中：

我們設置了：

layout_collapseMode (折疊模式) - 有兩個值:

pin - 設置為這個模式時，當CollapsingToolbarLayout完全收縮后，Toolbar還可以保留在屏幕上。

parallax - 設置為這個模式時，在內容滾動時，CollapsingToolbarLayout中的View（比如ImageView)也可以同時滾動，實現視差滾動效果，通常和layout_collapseParallaxMultiplier(設置視差因子)搭配使用。

layout_collapseParallaxMultiplier(視差因子) - 設置視差滾動因子，值為：0~1。

在Toolbar控件中：

我們設置了layout_collapseMode(折疊模式)：為pin

綜上分析：

當設置了layout_behavior的控件響應起了CollapsingToolbarLayout中的layout_scrollFlags事件時，ImageView會有視差效果的向上滾動移除屏幕，當開始折疊時CollapsingToolbarLayout的背景色(也就是Toolbar的背景色)就會變為我們設置好的背景色，Toolbar也一直會固定在最頂端。

【注】:使用CollapsingToolbarLayout時必須把title設置到CollapsingToolbarLayout上，設置到Toolbar上不會顯示。即：

mCollapsingToolbarLayout.setTitle(” “);

該變title的字體顏色：

擴張時候的title顏色：mCollapsingToolbarLayout.setExpandedTitleColor();

收縮后在Toolbar上顯示時的title的顏色： mCollapsingToolbarLayout.setCollapsedTitleTextColor();

這個顏色的過度變化其實CollapsingToolbarLayout已經幫我們做好，它會自動的過度.

參考鏈接：

Android5.0+(CollapsingToolbarLayout) - OPEN 開發經驗庫

ViewPager+tabLayout實現Tab效果

布局文件見上

activity代碼

package com.zj.materialdesign5;import android.content.res.AssetManager; import android.graphics.Color; import android.os.Bundle; import android.support.design.widget.CollapsingToolbarLayout; import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.view.View;import java.io.IOException; import java.io.InputStream; import java.util.ArrayList; import java.util.List; import java.util.Scanner;public class MainActivity extends AppCompatActivity {ViewPager mViewPager;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);setSupportActionBar(mToolbar);getSupportActionBar().setDisplayHomeAsUpEnabled(true);mToolbar.setNavigationOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {onBackPressed();}});//使用CollapsingToolbarLayout必須把title設置到CollapsingToolbarLayout上，設置到Toolbar上則不會顯示CollapsingToolbarLayout mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);mCollapsingToolbarLayout.setTitle("MyCollapsingToolbar");//通過CollapsingToolbarLayout修改字體顏色mCollapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);//設置還沒收縮時狀態下字體顏色mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.GREEN);//設置收縮后Toolbar上字體的顏色//設置ViewPagermViewPager = (ViewPager) findViewById(R.id.viewpager);setupViewPager(mViewPager);//給TabLayout增加Tab, 并關聯ViewPagerTabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);tabLayout.addTab(tabLayout.newTab().setText("內容簡介"));tabLayout.addTab(tabLayout.newTab().setText("作者簡介"));tabLayout.addTab(tabLayout.newTab().setText("目錄"));tabLayout.setupWithViewPager(mViewPager);}private void setupViewPager(ViewPager mViewPager) {MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());adapter.addFragment(DetailFragment.newInstance(getAsset("book_content.txt")), "內容簡介");adapter.addFragment(DetailFragment.newInstance(getAsset("book_author.txt")), "作者簡介");adapter.addFragment(DetailFragment.newInstance(getAsset("book_menu.txt")), "目錄");mViewPager.setAdapter(adapter);}private String getAsset(String fileName) {AssetManager am = getResources().getAssets();InputStream is = null;try {is = am.open(fileName, AssetManager.ACCESS_BUFFER);} catch (IOException e) {e.printStackTrace();}return new Scanner(is).useDelimiter("\\Z").next();}static class MyPagerAdapter extends FragmentPagerAdapter {private final List<Fragment> mFragments = new ArrayList<>();private final List<String> mFragmentTitles = new ArrayList<>();public MyPagerAdapter(FragmentManager fm) {super(fm);}public void addFragment(Fragment fragment, String title) {mFragments.add(fragment);mFragmentTitles.add(title);}@Overridepublic Fragment getItem(int position) {return mFragments.get(position);}@Overridepublic int getCount() {return mFragments.size();}@Overridepublic CharSequence getPageTitle(int position) {return mFragmentTitles.get(position);}}}

DetailFragment布局文件

<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><LinearLayout android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><TextView android:id="@+id/tvInfo"android:layout_width="wrap_content"android:layout_height="wrap_content"android:padding="10dp"android:textColor="@color/primary_text"android:textSize="16sp" /></LinearLayout></android.support.v4.widget.NestedScrollView>

DetailFragment代碼

package com.zj.materialdesign5;import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView;/*** Created by Chenyc on 2015/6/29.*/ public class DetailFragment extends Fragment {public static DetailFragment newInstance(String info) {Bundle args = new Bundle();DetailFragment fragment = new DetailFragment();args.putString("info", info);fragment.setArguments(args);return fragment;}@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {View view = inflater.inflate(R.layout.fragment_detail, null);TextView tvInfo = (TextView) view.findViewById(R.id.tvInfo);tvInfo.setText(getArguments().getString("info")); // tvInfo.setOnClickListener(new View.OnClickListener() { // @Override // public void onClick(View v) { // Snackbar.make(v,"hello",Snackbar.LENGTH_SHORT).show(); // } // });return view;} }

代碼解釋

• 為什么不用new DetailFragment而要用newInstance，簡單說是因為activity發生變化時仍舊保留數據，詳情參見鏈接
  【譯】使用newInstance()來實例化fragment - 陳哈哈 - 博客園
  Android解惑 - 為什么要用Fragment.setArguments(Bundle bundle)來傳遞參數 - 推酷

• getAsset函數，是從asserts文件夾中讀取資源，在該文件夾下，有book_content.txt，book_author.txt，book_menu.txt三個文件，通過這個函數讀取出來

完成，效果如下

總結

以上是生活随笔為你收集整理的Material Design入门（三）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。