Behavior 配合 CoordinatorLayout 可以實現很多酷炫的交互,掌握自定義 Behavior 也是很大的提升 。先看看要實現的效果如下：

上面這個效果是「華為應用市場」的首頁效果。使用 RecycleView（ListView）也是可以實現的。不過需要對滑動事件的處理相對較多。如果使用自定義 behavior 就不需要那么復雜了。

自定義 behavior 有兩種：

一個 view 依賴另外一個 view。（A 依賴于 B ，B 的狀態發生變化，A 也發生變化）

一個view 監聽 CoordinateLayout 中嵌套子 View 的滑動狀態。

觀察上面的效果可以很明顯的發現: 搜索框和 導航欄都是跟隨 Banner 的滑動做出相應變化。這里我們使用第一種方法來完成。（自定義搜索框可以查看源碼）

先看看布局：

<android.support.design.widget.CoordinatorLayoutxmlns: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: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.CollapsingToolbarLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:fitsSystemWindows="true"app:layout_scrollFlags="scroll|exitUntilCollapsed"><com.bigkoo.convenientbanner.ConvenientBannerandroid: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.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="50dp"android:minHeight="?attr/actionBarSize"app:contentInsetStart="0dp"app:layout_collapseMode="pin"><TextViewandroid: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.NestedScrollViewandroid:id="@+id/net"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><TextViewandroid: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" /><TextViewandroid: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" /><TextViewandroid: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" /><TextViewandroid: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" /><TextViewandroid: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.SearchBarandroid: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() {@Overridepublic 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(); //搜索框展開動畫}}}} }); 復制代碼

最后實現的效果如下：

具體請查看源碼

總結

以上是生活随笔為你收集整理的自定义behavior-仿华为应用市场的全部內容，希望文章能夠幫你解決所遇到的問題。

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