自定义behavior-仿华为应用市场

引导图

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

图1

上面这个效果是「华为应用市场」的首页效果。使用 RecycleView（ListView）也是可以实现的。不过需要对滑动事件的处理相对较多。如果使用自定义 behavior 就不需要那么复杂了。

自定义 behavior 有两种：

1. 一个 view 依赖另外一个 view。（A 依赖于 B ，B 的状态发生变化，A 也发生变化）
2. 一个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(); //搜索框展开动画
                }
            }

        }
    }
});

最后实现的效果如下：

图2

具体请查看源码