Behavior 配合 CoordinatorLayout 可以實現很多酷炫的互動,掌握自定義 Behavior 也是很大的提升 。先看看要實現的效果如下：
上面這個效果是「華為應用市場」的首頁效果。使用 RecycleView（ListView）也是可以實現的。不過需要對滑動事件的處理相對較多。如果使用自定義 behavior 就不需要那麼複雜了。
自定義 behavior 有兩種：
- 一個 view 依賴另外一個 view。（A 依賴於 B ，B 的狀態發生變化，A 也發生變化）
- 一個view 監聽 CoordinateLayout 中巢狀子 View 的滑動狀態。
觀察上面的效果可以很明顯的發現: 搜尋框和 導航欄都是跟隨 Banner 的滑動做出相應變化。這裡我們使用第一種方法來完成。（自定義搜尋框可以檢視原始碼）
先看看佈局：
<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.AppBarLayout
android:id="@+id/appbar"
android:background="@android:color/transparent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<com.bigkoo.convenientbanner.ConvenientBanner
android:id="@+id/convenientBanner"
android:layout_width="match_parent"
android:layout_height="@dimen/bannner_height"
app:canLoop="true"
app:layout_collapseMode="pin" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:minHeight="?attr/actionBarSize"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin">
<TextView
android:id="@+id/tab"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:gravity="center"
android:text="@string/market_title"
android:textSize="20sp" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="@+id/net"
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:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="@dimen/item_height"
android:background="@drawable/sp_itembg_one"
android:gravity="center"
android:text="Item1"
android:textColor="@color/white"
android:textSize="32sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="@dimen/item_height"
android:background="@drawable/sp_itembg_two"
android:gravity="center"
android:text="Item2"
android:textColor="@color/white"
android:textSize="32sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="@dimen/item_height"
android:background="@drawable/sp_itembg_three"
android:gravity="center"
android:text="Item3"
android:textColor="@color/white"
android:textSize="32sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="@dimen/item_height"
android:background="@drawable/sp_itembg_four"
android:gravity="center"
android:text="Item4"
android:textColor="@color/white"
android:textSize="32sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="@dimen/item_height"
android:background="@drawable/sp_itembg_five"
android:gravity="center"
android:text="Item5"
android:textColor="@color/white"
android:textSize="32sp" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<com.ruomiz.coordinatorheader.SearchBar
android:id="@+id/searchBar"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_gravity="top"
android:layout_marginBottom="5dp"
android:layout_marginTop="160dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
app:layout_behavior="@string/scrollingBehavior"/>
</android.support.design.widget.CoordinatorLayout>
複製程式碼先實現搜尋框跟隨 banner 位移效果的 自定義Behavior（程式碼很簡單）
//需要重寫有兩個引數的建構函式
public MarketScrollingBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, SearchBar child, View dependency) {
return dependency != null && dependency instanceof AppBarLayout;
}
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, SearchBar child, View dependency) {
float y = dependency.getY();
int totalScrollRange = ((AppBarLayout) dependency).getTotalScrollRange();//獲取 AppBarLayout的高度
if (Math.abs(y) < totalScrollRange * 0.6) {
if (child.getCurrentState() == SearchBar.State.OPEN) { //當searchBar處於展開狀態
child.setTranslationY(y);
} else if (child.getCurrentState() == SearchBar.State.EXPANDING){ //當searchBar展開和收縮的過程中
child.setTranslationY(y);
}
}
return true;
}
複製程式碼監聽 AppBarLayout 的位移，導航欄跟隨 banner 滑動 顏色漸變，搜尋框也隨之展開或收縮。
mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (verticalOffset == 0) {
mTab.setTextColor(Color.argb(255, 255, 255, 255));
mTab.setBackgroundColor(Color.argb(0, 255, 255, 255));
} else if (Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()) {
mTab.setTextColor(Color.argb(255, 0, 0, 0));
mTab.setBackgroundColor(Color.argb(255, 255, 255, 255));
} else {
float percent = (Math.abs(verticalOffset) * 100 / appBarLayout.getTotalScrollRange()) * 0.01f;
int alpha = (int) Math.floor(percent * 255); // 顏色的透明通道 255為不透明
if (Math.abs(verticalOffset) * 4 > appBarLayout.getTotalScrollRange()) {
mTab.setTextColor(Color.argb(alpha, 0, 0, 0)); //Tab 字型顏色漸變
} else {
mTab.setTextColor(Color.argb(255 - alpha * 4, 255, 255, 255));
}
mTab.setBackgroundColor(Color.argb(alpha, 255, 255, 255)); //Tab 背景逐漸透明
if (Math.abs(verticalOffset) > appBarLayout.getTotalScrollRange() * 0.6) {
if (mSearchBar.getCurrentState() == SearchBar.State.OPEN) {
mSearchBar.closeAnimation(); //搜尋框收縮動畫
}
} else {
if (mSearchBar.getCurrentState() == SearchBar.State.CLOSED) {
mSearchBar.startAnimation(); //搜尋框展開動畫
}
}
}
}
});
複製程式碼最後實現的效果如下：
