CoodinatorLayout 實現 banner沉浸式+滾動視差+懸浮搜尋框+標題置頂複雜聯動效果
1.開門見上，先上效果圖
2.CoodinatorLayout及相關控制元件簡介
CoordinatorLayout遵循Material Design風格，包含在 support Library中，結合AppBarLayout, CollapsingToolbarLayout,NestScrollView等 可 產生各種炫酷的摺疊懸浮效果。作為一個容器可與一個或多個子View進行互動。
AppBarLayout繼承自LinearLayout，佈局方向為垂直方向。所以你可以把它當成垂直佈局的LinearLayout來使用。AppBarLayout是在LinearLayou上加了一些材料設計的概念，它可以讓你定製當
CollapsingToolbarLayout是用來對Toolbar進行再次包裝的ViewGroup，主要是用於實現摺疊的App Bar效果。它需要放在AppBarLayout佈局裡面，並且作為AppBarLayout的直接子View。CollapsingToolbarLayout主要屬性：
(1) layout_scrollFlags：
-
scroll - 想滾動就必須設定這個。
-
enterAlways - 實現quick return效果, 當向下移動時，立即顯示View（比如Toolbar)。
-
exitUntilCollapsed - 向上滾動時收縮View，但可以固定Toolbar一直在上面。
-
enterAlwaysCollapsed - 當你的View已經設定minHeight屬性又使用此標誌時，你的View只能以最小高度進入，只有當滾動檢視到達頂部時才擴大到完整高度。
-
contentScrim - 設定當完全CollapsingToolbarLayout摺疊(收縮)後的背景顏色。
-
expandedTitleMarginStart - 設定擴張時候(還沒有收縮時)title向左填充的距離。
(2) layout_collapseMode
-
pin - 設定為這個模式時，當CollapsingToolbarLayout完全收縮後，Toolbar還可以保留在螢幕上。
-
parallax - 設定為這個模式時，在內容滾動時，CollapsingToolbarLayout中的View（比如ImageView)也可以同時滾動，實現視差滾動效果，通常和layout_collapseParallaxMultiplier(設定視差因子)搭配使用。
(3) layout_collapseParallaxMultiplier(視差因子) - 設定視差滾動因子，值為：0~1。
Toolbar主要是用來替換ActionBar的，換句話說，ActionBar能做的，Toolbar都能做。如果你對ActionBar的使用比較熟悉，你會發現Toolbar使用起來非常簡單。ok，既然是替換，當然用Toolbar的時候就得先去把ActionBar給隱藏掉。隱藏掉ActionBar方法有多種，我是直接在application的主題裡面設定成<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar”>
NestedScrollView是support-v4包提供的控制元件,繼承至FrameLayout, 並實現了NestedScrollingParent,NestedScrollingChild, ScrollingView介面。它的作用類似於android.widget.ScrollView,不同點在於NestedScrollView支援巢狀滑動，常用於內部巢狀RecyclerView一起使用。
3.佈局檔案實現
先看看佈局檢視的結構，如下圖：
接下看佈局程式碼的實現：
<?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:id="@+id/cl_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_barlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="@android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<com.youth.banner.Banner
android:id="@+id/banner"
android:layout_width="match_parent"
android:layout_height="220dp"
android:fitsSystemWindows="true"
app:image_scale_type="fit_xy"
app:layout_collapseMode="parallax"
android:background="@drawable/banner_default"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="65dp"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin">
<RelativeLayout
android:id="@+id/rl_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingTop="25dp">
<ImageView
android:id="@+id/iv_left_btn"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerVertical="true"
android:layout_marginStart="7dp"
android:background="@drawable/shap_left_btn_bg"
android:paddingBottom="9dp"
android:paddingEnd="5dp"
android:paddingStart="5dp"
android:paddingTop="9dp"
android:src="@drawable/left_hot_btn" />
<LinearLayout
android:id="@+id/ll_search"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_marginBottom="7dp"
android:layout_marginEnd="15dp"
android:layout_marginStart="15dp"
android:layout_marginTop="7dp"
android:layout_toEndOf="@+id/iv_left_btn"
android:layout_toStartOf="@+id/iv_search_btn"
android:background="@drawable/search_bg_shap_home"
android:gravity="center"
android:orientation="horizontal"
android:visibility="visible">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="5dp"
android:layout_marginStart="3dp"
android:paddingBottom="7dp"
android:paddingTop="7dp"
android:src="@drawable/search_gray" />
<TextView
android:id="@+id/tv_search_hint"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:background="@null"
android:drawablePadding="4dp"
android:lines="1"
android:singleLine="true"
android:textColor="#999999"
android:textSize="14sp" />
</LinearLayout>
<ImageView
android:id="@+id/iv_search_btn"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="7dp"
android:background="@drawable/shap_left_btn_bg"
android:paddingBottom="6dp"
android:paddingEnd="5dp"
android:paddingStart="5dp"
android:paddingTop="6dp"
android:src="@drawable/icon_search_white" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<com.flyco.tablayout.SlidingTabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@android:color/white"
app:tl_indicator_color="@android:color/holo_red_light"
app:tl_indicator_corner_radius="30dp"
app:tl_indicator_height="3dp"
app:tl_indicator_width_equal_title="true"
app:tl_tab_padding="25dp"
app:tl_tab_space_equal="true"
app:tl_textBold="SELECT"
app:tl_textSelectColor="@android:color/holo_red_light"
app:tl_textUnselectColor="@android:color/black"
app:tl_textsize="17sp" />
</android.support.design.widget.AppBarLayout>
<!-- 若ViewPager中的Fragment用到了實現了NestedScrollingChild介面的控制元件，則ViewPager外部不需要套一層NestScrollView,反之，則需要巢狀一層NestScrollView -->
<!--<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
android:fillViewport="true"
android:focusableInTouchMode="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior">-->
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
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>
佈局中有幾個點需要注意下
-
CollapsingToolbarLayout要設定app:layout_scrollFlags="scroll|exitUntilCollapsed”，scroll是讓CollapsingToolbarLayout可摺疊，exitUntilCollapsed是向上滾動時收縮view，但可以將Toolbar一直固定在頂部
-
Toolbar一直固定在頂部需要給Toolbar加上app:layout_collapseMode=“pin”屬性
-
當摺疊的時候讓banner出現滾動視差需要設定app:layout_collapseMode="parallax"
-
我們這裡用到了NestedScrollView巢狀ViewPager(為了保證CollapsingToolbarLayout能夠摺疊，ViewPager中的Fragment用到了實現了NestedScrollingChild介面的控制元件，則ViewPager外部不需要套一層NestScrollView,反之，則需要巢狀一層NestScrollView)，這裡需要注意，不管是NestedScrollView巢狀ViewPager還是巢狀RecyclerView，都需要設定android:fillViewport=“true”，否則會出現內容不顯示或者內容顯示不全
接下來看MainActivity中的程式碼：
package com.example.jokerwan.coolcoodinatorlayout;
import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.AppBarLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import com.flyco.tablayout.SlidingTabLayout;
import java.util.ArrayList;
import java.util.List;
import butterknife.BindView;
import butterknife.ButterKnife;
public class MainActivity extends AppCompatActivity {
@BindView(R.id.iv_left_btn)
ImageView ivLeftHotBtn;
@BindView(R.id.ll_search)
LinearLayout llSearch;
@BindView(R.id.iv_search_btn)
ImageView ivSearchBtn;
@BindView(R.id.rl_title)
RelativeLayout rlTitle;
@BindView(R.id.tab_layout)
SlidingTabLayout tabLayout;
@BindView(R.id.app_barlayout)
AppBarLayout appBarlayout;
@BindView(R.id.viewpager)
ViewPager viewpager;
private ArrayList<Fragment> fragments;
private HomeFragment homeFragment1;
private HomeFragment homeFragment2;
private String[] titles = new String[]{"恐怖電影", "喜劇專場"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
Utils.setStatusBarTransparent(this);
viewpager.clearDisappearingChildren();
fragments = new ArrayList<>();
List<Fragment> fragments1 = getSupportFragmentManager().getFragments();
if (fragments1 != null && fragments1.size() > 1) {
homeFragment1 = (HomeFragment) fragments1.get(0);
homeFragment2 = (HomeFragment) fragments1.get(1);
} else {
homeFragment1 = new HomeFragment();
homeFragment2 = new HomeFragment();
}
fragments.add(homeFragment1);
fragments.add(homeFragment2);
tabLayout.setViewPager(viewpager, titles,this,fragments);
appBarlayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (verticalOffset == 0) {
rlTitle.setBackgroundColor(Color.argb(0, 221, 48, 10));
ivLeftHotBtn.setBackground(getResources().getDrawable(R.drawable.shap_left_btn_bg));
ivSearchBtn.setVisibility(View.VISIBLE);
ivSearchBtn.setBackground(getResources().getDrawable(R.drawable.shap_left_btn_bg));
llSearch.setVisibility(View.GONE);
} else if (Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()) {
rlTitle.setBackgroundColor(Color.argb(255, 221, 48, 10));
ivLeftHotBtn.setBackground(null);
llSearch.setVisibility(View.VISIBLE);
ivSearchBtn.setBackground(null);
} else {
int alpha = (int) (255 - verticalOffset / (float) appBarLayout.getTotalScrollRange() * 255);
rlTitle.setBackgroundColor(Color.argb(alpha, 221, 48, 10));
llSearch.setVisibility(View.GONE);
ivSearchBtn.setVisibility(View.VISIBLE);
}
}
});
}
}
關於滑動改變搜尋框的透明度和按鈕的變化，起初我想的是通過監聽CollapsingToolbarLayout的收縮來做，結果發現CollapsingToolbarLayout並沒有提供監聽收縮的方法，尷尬了，後來發現AppBarLayout有一個偏移量監聽的方法addOnOffsetChangedListener()，符合我們的需求。對了，差點兒忘了banner沉浸式，在MainActivity中可以看到我將浸式狀態列的程式碼封裝到Utils中，程式碼給大家貼出來。
public static void setStatusBarTransparent(Activity activity){
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Window window = activity.getWindow();
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(Color.TRANSPARENT);
} else {
activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}
}
好了，大功告成。