特別喜歡稀土掘金個人界面的樣子挣惰，那我們就來看看如何實現(xiàn)這個效果吧客税，要想實現(xiàn)這個效果艘策，肯定需要的是Material Design風格蹈胡，那就需要學會使用以下控件：CoordinatorLayout，AppBarLayout，CollapsingToolbarLayout罚渐，Toolbar却汉，TabLayout等，如果你做出這個效果來荷并，那這些控件你就基本掌握了合砂。
效果對比圖
介紹之前，我們先來看看效果對比圖：
稀土掘金app原圖
原圖
模仿的效果圖
模仿效果圖
CoordinatorLayout的介紹
CoordinatorLayout作為“super-powered FrameLayout”基本實現(xiàn)兩個功能：
- 作為頂層布局
- 調(diào)度協(xié)調(diào)子布局
CoordinatorLayout使用新的思路通過協(xié)調(diào)調(diào)度子布局的形式實現(xiàn)觸摸影響布局的形式產(chǎn)生動畫效果源织。CoordinatorLayout通過設置子View的 Behaviors來調(diào)度子View翩伪。系統(tǒng)（Support V7）提供了AppBarLayout.Behavior, AppBarLayout.ScrollingViewBehavior, FloatingActionButton.Behavior, SwipeDismissBehavior<V extends View> 等。
使用CoordinatorLayout需要在Gradle加入Support Design Library：
compile 'com.android.support:design:22.2.1'
具體的怎么協(xié)調(diào)子控件的谈息，建議大家看下面的參考文章缘屹，寫的非常好，看完你就基本明白了：
https://segmentfault.com/a/1190000005024216?utm_source=Weibo&utm_medium=shareLink&utm_campaign=socialShare&from=singlemessage&isappinstalled=0
AppBarLayout的介紹
AppBarLayout 是一個豎直排列的線性布局侠仇，它實現(xiàn)了很多Material Design風格app bar的設計概念轻姿，換句話說就是滾動手勢。
在AppBarLayout里面的View,通過app:layout_scrollFlags屬性來控制,滾動時候的表現(xiàn)逻炊。其中有4種Flag的類型互亮。
- scroll: this flag should be set for all views that want to scroll off the screen - for views that do not use this flag, they’ll remain pinned to the top of the screen
- enterAlways: this flag ensures that any downward scroll will cause this view to become visible, enabling the ‘quick return’ pattern
- enterAlwaysCollapsed: When your view has declared a minHeight and you use this flag, your View will only enter at its minimum height (i.e., ‘collapsed’), only re-expanding to its full height when the scrolling view has reached it’s top.
- exitUntilCollapsed: this flag causes the view to scroll off until it is ‘collapsed’ (its minHeight) before exiting
我們的例子中用的是 scroll 和 exitUntilCollapsed。
翻譯的比較爛余素，英文好的豹休，看上面的英文解釋。
Scroll: 表示向下滾動時,這個View會被滾出屏幕范圍直到隱藏.
enterAlways: 表示向上滾動時,這個View會隨著滾動手勢出現(xiàn),直到恢復原來的位置.
enterAlwaysCollapsed: 顧名思義桨吊，這個flag定義的是何時進入（已經(jīng)消失之后何時再次顯示）威根。假設你定義了一個最小高度（minHeight）同時enterAlways也定義了，那么view將在到達這個最小高度的時候開始顯示屏积，并且從這個時候開始慢慢展開医窿，當滾動到頂部的時候展開完。
exitUntilCollapsed: 同樣顧名思義炊林，這個flag時定義何時退出姥卢，當你定義了一個minHeight，這個view將在滾動到達這個最小高度的時候消失渣聚。
所以我們就在AppBarLayout里面的CollapsingToolbarLayout進行了如下設置：
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="280dp"
android:fitsSystemWindows="true"
app:collapsedTitleTextAppearance="@style/ToolBarTitleText"
app:contentScrim="#46a8ba"
app:expandedTitleMarginEnd="48dp"
app:expandedTitleMarginStart="48dp"
app:expandedTitleTextAppearance="@style/transparentText"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
</android.support.design.widget.CollapsingToolbarLayout>
記锥懒瘛：我們剛才上面也說了AppBarLayout是一個豎直方向的線性布局，如果里面包含多個子View時奕枝，要想有折疊動畫效果棺榔，必須把帶有scroll flag的view放在前面，這樣收回的view才能讓正常退出隘道，而固定的view繼續(xù)留在頂部症歇。
CollapsingToolbarLayout的介紹
CollapsingToolbarLayout作用是提供了一個可以折疊的Toolbar郎笆，它繼承至FrameLayout，給它設置layout_scrollFlags忘晤，它可以控制包含在CollapsingToolbarLayout中的控件在響應layout_behavior事件時作出相應的scrollFlags滾動事件(移除屏幕或固定在屏幕頂端)宛蚓。它是設計用于直接AppBarLayout的子視圖。
CollapsingToolbarLayout的子View中可以設置這兩個屬性
- ayout_collapseMode (折疊模式) - 有兩個值:
- pin - 設置為這個模式時设塔，當CollapsingToolbarLayout完全收縮后凄吏，Toolbar還可以保留在屏幕上。
- parallax - 設置為這個模式時闰蛔，在內(nèi)容滾動時痕钢，CollapsingToolbarLayout中的View（比如ImageView)也可以同時滾動，實現(xiàn)視差滾動效果序六，通常和layout_collapseParallaxMultiplier(設置視差因子)搭配使用任连。
- layout_collapseParallaxMultiplier(視差因子) - 設置視差滾動因子，值為：0~1例诀。
關于CollapsingToolbarLayout幾個屬性的介紹
- app:collapsedTitleTextAppearance 這是在收縮時Title文字特點外形的設置
- app:expandedTitleTextAppearance 同理這是在展開時Title文字特點外形的設置
- app:contentScrim 這是toolbar 標題工具欄停留在頂部時候背景的設置
- app:expandedTitleMarginStart 設置擴張時候(還沒有收縮時)title向左填充的距離
- app:expandedTitleMarginEnd 這個同理是收縮結束時向左填空的距離
其他的就不一一介紹了课梳，具體的去查看API文檔即可獲知。
我在做這里的時候遇到一個問題余佃，那就是CollapsingToolbarLayout里的Title的問題，一般默認是顯示的跨算，即使你不寫爆土，它也有會一個默認值一直顯示在那里，等折疊收縮完的時候诸蚕，停留在標題工具欄上步势。怎么消除這個默認值呢？怎么知道收縮完成了背犯，再把這個值設置出來呢坏瘩？這里我對AppBarLayout設置了一個監(jiān)聽，它有一個監(jiān)聽方法：addOnOffsetChangedListener監(jiān)聽折疊收縮的位移漠魏。如下：
app_bar_layout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (verticalOffset <= -head_layout.getHeight() / 2) {
mCollapsingToolbarLayout.setTitle("澀郎");
} else {
mCollapsingToolbarLayout.setTitle(" ");
}
}
});
Toolbar的介紹
Toolbar 是在 Android 5.0 開始推出的一個 Material Design 風格的導航控件 倔矾，Google 非常推薦大家使用 Toolbar 來作為Android客戶端的導航欄，以此來取代之前的 Actionbar 柱锹。與 Actionbar 相比哪自，Toolbar 明顯要靈活的多。它不像 Actionbar 一樣禁熏，一定要固定在Activity的頂部壤巷，而是可以放到界面的任意位置。除此之外瞧毙，在設計 Toolbar 的時候胧华，Google也留給了開發(fā)者很多可定制修改的余地寄症，這些可定制修改的屬性在API文檔中都有詳細介紹，如：
- 設置導航欄圖標矩动；
- 設置App的logo有巧；
- 支持設置標題和子標題；
- 支持添加一個或多個的自定義控件铅忿；
- 支持Action Menu剪决；
Toolbar的具體使用方法，我在這里就不過多的贅述了檀训，學習的點太多了柑潦，簡單介紹完了，我給大家推薦兩篇參考學習使用的文章就行了峻凫，寫的很詳細和完整渗鬼，之前我們公眾號也推送過D_clock寫的文章。
學習參考文章：
TabLayout的介紹
毫無疑問荧琼，TabLayout也是Material Design設計風格譬胎，當然也是5.0以后出來的。TabLayout提供一個水平布局來顯示選項卡命锄。TabLayout一般都是配合ViewPager一起來使用堰乔。TabLayout設置Tab標簽有兩種方法如下：
第一種
TabLayout tabLayout = ...;
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
第二種
<android.support.design.widget.TabLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
<android.support.design.widget.TabItem
android:text="@string/tab_text"/>
<android.support.design.widget.TabItem
android:icon="@drawable/ic_android"/>
</android.support.design.widget.TabLayout>
TabLayout的坑
使用TabLayout有個坑，這個坑如果一般用戶不知道脐恩，解決起來比較麻煩镐侯，當然看到這篇文章的人有福了，因為你找到解決方法驶冒。
如果設計的需求不要求選項卡在切換時附帶有圖標的切換效果苟翻，僅僅文字的顏色發(fā)生變化以響應用戶的點擊事件，那么TabLayout和ViewPager建立聯(lián)系可以用官方提供的方法骗污，它可以做到交互雙向聯(lián)動崇猫，也就是點擊tab，viewpager就會去變動需忿，滑動viewpager诅炉，tab也會自動變。相互建立聯(lián)系的方法如下：
setupWithViewPager(ViewPager viewPager)
如果選項卡里帶有圖標或者僅僅只有圖標時就麻煩了屋厘，那個選項卡會變得什么都沒有了汞扎。解決方法其實很簡單就是不使用上面的方法，而且這樣用：
viewPager.addOnPageChangeListener(new TabLayoutOnPageChangeListener(tabLayout));
tabLayout.setOnTabSelectedListener(new ViewPagerOnTabSelectedListener(viewPager));
其實這個setupWithViewPager(ViewPager viewPager)方法擅这，跟進到源碼里澈魄，你可以看到，就是調(diào)用了上面的兩種方式仲翎。
全部代碼
布局代碼
到這里基本就講完了痹扇，全部的布局代碼如下：
<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"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="280dp"
android:fitsSystemWindows="true"
app:collapsedTitleTextAppearance="@style/ToolBarTitleText"
app:contentScrim="#46a8ba"
app:expandedTitleMarginEnd="48dp"
app:expandedTitleMarginStart="48dp"
app:expandedTitleTextAppearance="@style/transparentText"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<LinearLayout
android:id="@+id/head_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_collapseMode="pin"
app:layout_collapseParallaxMultiplier="0.7">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:padding="20dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="澀郎"
android:textColor="#ffffff"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:text="Android開發(fā)工程師 @ 非著名程序員"
android:textColor="#ffffff"
android:textSize="13sp"
android:textStyle="bold" />
</LinearLayout>
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:scaleType="centerCrop"
android:src="@mipmap/bg" />
</RelativeLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="40dp"
android:ellipsize="end"
android:maxLines="2"
android:text="關注我（微博@澀郎铛漓，微信公眾號：非著名程序員），我與你閑扯技術大話鲫构，笑談科技人生浓恶。以幽默詼諧的態(tài)度，面對乏味無聊的技術结笨，用扯淡的方式包晰，分享技術的內(nèi)涵。談的是技術炕吸，更是我們的人生伐憾。"
android:textColor="#ffffff"
android:textSize="12sp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:padding="20dp">
<LinearLayout
android:id="@+id/one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="分享"
android:textColor="#ffffff"
android:textSize="12sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="50篇"
android:textColor="#ffffff"
android:textSize="12sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:id="@+id/two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_toRightOf="@id/one"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="獲得收藏"
android:textColor="#ffffff"
android:textSize="12sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3000次"
android:textColor="#ffffff"
android:textSize="12sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_toRightOf="@id/two"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="被閱讀"
android:textColor="#ffffff"
android:textSize="12sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="60000次"
android:textColor="#ffffff"
android:textSize="12sp"
android:textStyle="bold" />
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:background="@drawable/setting_bg"
android:paddingBottom="3dp"
android:paddingLeft="6dp"
android:paddingRight="6dp"
android:paddingTop="3dp"
android:text="設置"
android:textColor="#ffffff"
android:textSize="12sp" />
</RelativeLayout>
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/toolbar_tab"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="#ffffff"
android:fillViewport="false"
app:layout_scrollFlags="scroll"
app:tabIndicatorColor="#0835f8"
app:tabIndicatorHeight="2.0dp"
app:tabSelectedTextColor="#0835f8"
app:tabTextColor="#ced0d3">
<android.support.design.widget.TabItem
android:layout_width="match_parent"
android:layout_height="match_parent"
android:icon="@drawable/tab_selector" />
<android.support.design.widget.TabItem
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="分享" />
<android.support.design.widget.TabItem
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="收藏" />
<android.support.design.widget.TabItem
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="關注" />
<android.support.design.widget.TabItem
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="關注者" />
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:scrollbars="none"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="@+id/main_vp_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Activity中的代碼
package com.loonggg.coordinatorlayoutdemo;
import android.annotation.SuppressLint;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.drawable.BitmapDrawable;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
private LinearLayout head_layout;
private TabLayout toolbar_tab;
private ViewPager main_vp_container;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
AppBarLayout app_bar_layout = (AppBarLayout) findViewById(R.id.app_bar_layout);
Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
onBackPressed();
}
});
head_layout = (LinearLayout) findViewById(R.id.head_layout);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.bg);
head_layout.setBackgroundDrawable(new BitmapDrawable(BlurUtil.fastblur(this, bitmap, 180)));
//使用CollapsingToolbarLayout必須把title設置到CollapsingToolbarLayout上，設置到Toolbar上則不會顯示
final CollapsingToolbarLayout mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);
mCollapsingToolbarLayout.setContentScrim(new BitmapDrawable(BlurUtil.fastblur(this, bitmap, 180)));
app_bar_layout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (verticalOffset <= -head_layout.getHeight() / 2) {
mCollapsingToolbarLayout.setTitle("澀郎");
} else {
mCollapsingToolbarLayout.setTitle(" ");
}
}
});
Toolbar.OnMenuItemClickListener onMenuItemClick = new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem menuItem) {
String msg = "";
switch (menuItem.getItemId()) {
case R.id.webview:
msg += "博客跳轉";
break;
case R.id.weibo:
msg += "微博跳轉";
break;
case R.id.action_settings:
msg += "設置";
break;
}
if (!msg.equals("")) {
Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
}
return true;
}
};
mToolbar.setOnMenuItemClickListener(onMenuItemClick);
toolbar_tab = (TabLayout) findViewById(R.id.toolbar_tab);
main_vp_container = (ViewPager) findViewById(R.id.main_vp_container);
ViewPagerAdapter vpAdapter = new ViewPagerAdapter(getSupportFragmentManager(), this);
main_vp_container.setAdapter(vpAdapter);
main_vp_container.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(toolbar_tab));
toolbar_tab.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(main_vp_container));
//tablayout和viewpager建立聯(lián)系為什么不用下面這個方法呢赫模？自己去研究一下树肃，可能收獲更多
//toolbar_tab.setupWithViewPager(main_vp_container);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
}
源碼下載地址：https://github.com/loonggg/CoordinatorLayoutDemo
記得star一下哦。
