华为手机有个应用behavior

logo精彩文章免费看立即下载

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

Ruomiz

简书作者

2018-07-05 10:48

引导图

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

图1

上面这个效果是「华为应用市场」的首页效果。使用 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()//搜索框展开动画

}

}

}

}

})

最后实现的效果如下：

图2

具体请查看源码

© 著作权归作者所有,转载或内容合作请联系作者

点赞赚钻最高日赚数百

赞 (35)

Ruomiz

小礼物走一走，来简书关注我

赞赏

下载简书，随时随地看好文

暂无评论 写评论

智慧如你，不想 发表一点想法 咩~

创作你的创作，

接受世界的赞赏

登录|打开App|热门文章

下载简书，随时随地看好文

点击事件里面执行finish消除这一个activity,上一个activity自然就出来了,

另外一个傻办法,A跳到B的时候传一个自己的action,B返回的时候直接跳转到这个action就好了.

---