本文主要包括

CollapsingToolbarLayout實(shí)現(xiàn)滾動(dòng)動(dòng)畫效果

ViewPager+tabLayout實(shí)現(xiàn)左右類Tab效果

控件介紹

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

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

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

使用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設(shè)置到CollapsingToolbarLayout上，設(shè)置到Toolbar上則不會(huì)顯示CollapsingToolbarLayout mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);mCollapsingToolbarLayout.setTitle("MyCollapsingToolbar");//通過(guò)CollapsingToolbarLayout修改字體顏色mCollapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);//設(shè)置還沒(méi)收縮時(shí)狀態(tài)下字體顏色mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.GREEN);//設(shè)置收縮后Toolbar上字體的顏色

代碼解釋

我們?cè)贑ollapsingToolbarLayout中設(shè)置了一個(gè)ImageView和一個(gè)Toolbar。并把這個(gè)CollapsingToolbarLayout放到AppBarLayout中作為一個(gè)整體。

在CollapsingToolbarLayout中：

我們?cè)O(shè)置了layout_scrollFlags:關(guān)于它的值我這里再說(shuō)一下：

scroll - 想滾動(dòng)就必須設(shè)置這個(gè)。

enterAlways - 實(shí)現(xiàn)quick return效果, 當(dāng)向下移動(dòng)時(shí)，立即顯示View（比如Toolbar)。

exitUntilCollapsed - 向上滾動(dòng)時(shí)收縮View，但可以固定Toolbar一直在上面。

enterAlwaysCollapsed - 當(dāng)你的View已經(jīng)設(shè)置minHeight屬性又使用此標(biāo)志時(shí)，你的View只能以最小高度進(jìn)入，只有當(dāng)滾動(dòng)視圖到達(dá)頂部時(shí)才擴(kuò)大到完整高度。

其中還設(shè)置了一些屬性，簡(jiǎn)要說(shuō)明一下：

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

expandedTitleMarginStart - 設(shè)置擴(kuò)張時(shí)候(還沒(méi)有收縮時(shí))title向左填充的距離。

在ImageView控件中：

我們?cè)O(shè)置了：

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

pin - 設(shè)置為這個(gè)模式時(shí)，當(dāng)CollapsingToolbarLayout完全收縮后，Toolbar還可以保留在屏幕上。

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

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

在Toolbar控件中：

我們?cè)O(shè)置了layout_collapseMode(折疊模式)：為pin

綜上分析：

當(dāng)設(shè)置了layout_behavior的控件響應(yīng)起了CollapsingToolbarLayout中的layout_scrollFlags事件時(shí)，ImageView會(huì)有視差效果的向上滾動(dòng)移除屏幕，當(dāng)開始折疊時(shí)CollapsingToolbarLayout的背景色(也就是Toolbar的背景色)就會(huì)變?yōu)槲覀冊(cè)O(shè)置好的背景色，Toolbar也一直會(huì)固定在最頂端。

【注】:使用CollapsingToolbarLayout時(shí)必須把title設(shè)置到CollapsingToolbarLayout上，設(shè)置到Toolbar上不會(huì)顯示。即：

mCollapsingToolbarLayout.setTitle(” “);

該變title的字體顏色：

擴(kuò)張時(shí)候的title顏色：mCollapsingToolbarLayout.setExpandedTitleColor();

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

這個(gè)顏色的過(guò)度變化其實(shí)CollapsingToolbarLayout已經(jīng)幫我們做好，它會(huì)自動(dòng)的過(guò)度.

參考鏈接：

Android5.0+(CollapsingToolbarLayout) - OPEN 開發(fā)經(jīng)驗(yàn)庫(kù)

ViewPager+tabLayout實(shí)現(xiàn)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設(shè)置到CollapsingToolbarLayout上，設(shè)置到Toolbar上則不會(huì)顯示CollapsingToolbarLayout mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);mCollapsingToolbarLayout.setTitle("MyCollapsingToolbar");//通過(guò)CollapsingToolbarLayout修改字體顏色mCollapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);//設(shè)置還沒(méi)收縮時(shí)狀態(tài)下字體顏色mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.GREEN);//設(shè)置收縮后Toolbar上字體的顏色//設(shè)置ViewPagermViewPager = (ViewPager) findViewById(R.id.viewpager);setupViewPager(mViewPager);//給TabLayout增加Tab, 并關(guān)聯(lián)ViewPagerTabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);tabLayout.addTab(tabLayout.newTab().setText("內(nèi)容簡(jiǎn)介"));tabLayout.addTab(tabLayout.newTab().setText("作者簡(jiǎn)介"));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")), "內(nèi)容簡(jiǎn)介");adapter.addFragment(DetailFragment.newInstance(getAsset("book_author.txt")), "作者簡(jiǎn)介");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，簡(jiǎn)單說(shuō)是因?yàn)閍ctivity發(fā)生變化時(shí)仍舊保留數(shù)據(jù)，詳情參見鏈接
  【譯】使用newInstance()來(lái)實(shí)例化fragment - 陳哈哈 - 博客園
  Android解惑 - 為什么要用Fragment.setArguments(Bundle bundle)來(lái)傳遞參數(shù) - 推酷

• getAsset函數(shù)，是從asserts文件夾中讀取資源，在該文件夾下，有book_content.txt，book_author.txt，book_menu.txt三個(gè)文件，通過(guò)這個(gè)函數(shù)讀取出來(lái)

完成，效果如下

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。