高级UI

Android 仿支付宝首页头部伸缩效果及相关控件Coordin

2019-06-19  本文已影响45人  wuchao226

首先看效果图:


preview.gif

gradle 关联

implementation 'com.google.android.material:material:1.0.0'

下面介绍示例用到的几个布局:

CoordinatorLayout

CoordinatorLayout 是一个 “加强版” FrameLayout, 它主要有两个用途:

AppBarLayout

实际上我们在应用中有 CoordinatorLayout 的地方通常都会有 AppBarLayout 的联用。

AppBarLayout 是一个垂直的 LinearLayout,实现了 Material Design 中 App bar 的 Scrolling Gestures 特性。AppBarLayout 的子 View 应该声明想要具有的“滚动行为”,这可以通过 layout_scrollFlags 属性或是 setScrollFlags() 方法来指定。

AppBarLayout 只有作为 CoordinatorLayout 的直接子 View 时才能正常工作,为了让 AppBarLayout 能够知道何时滚动其子 View,我们还应该在 CoordinatorLayout 布局中提供一个可滚动 View,我们称之为 Scrolling View。

Scrolling View 和 AppBarLayout 之间的关联,通过将 Scrolling View 的 Behavior 设为 AppBarLayout.ScrollingViewBehavior 来建立。

AppBarLayout 主要给子布局配置属性 app:layout_scrollFlags,layout_scrollFlags 的取值可以为以下几种。

CollapsingToolbarLayout

CollapsingToolbarLayout 继承自 FrameLayout,它是用来实现 Toolbar 的折叠效果,一般它的直接子 View 是 Toolbar,当然也可以是其它类型的 View。

collapsingToolbarLayout 可以作为 AppBarLayout 的子 view,可以控制包含在其中的控件在滚动时的响应事件,子 view 可以是个可折叠的 Toolbar,app:layout_collapseMode 设置折叠模式。

CollapsingToolbarLayout 常用xml属性介绍

app:layout_collapseMode 折叠模式:

实现过程

1、 coordinatorLayout 嵌套 appBarLayout 。
2、appBarLayout 的子 view collapsingToolbarLayout 设置属性app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
让头部随着内容下拉而展开,随着内容上拉而收缩。
3、collapsingToolbarLayout 的子布局有两种,展开时显示的布局和 Toolbar,其中 Toolbar 又包含了两种布局,展开时的和收缩时的。 展开时,(扫一扫、付钱)的布局:

<include
    layout="@layout/include_open"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="50dp"
    app:layout_collapseMode="parallax"
    app:layout_collapseParallaxMultiplier="0.7" />

layout_marginTop="50dp" 预留出 toolbar 的高度,避免布局重叠。

toolbar里的两种布局:

<!--pin:折叠后,此布局将固定在顶部。   -->
<androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:layout_collapseMode="pin">

        <include
               android:id="@+id/toolbar_open"
               ayout="@layout/include_toolbar_open"/>

        <include
               android:id="@+id/toolbar_close"
               layout="@layout/include_toolbar_close"/>

</androidx.appcompat.widget.Toolbar>

toolbar 里的两个布局,可以通过监听 AppBarLayout 的移动控制显示和隐藏。

4、滑动过程中,各控件的透明度会有渐变的效果,这里采用类似遮罩的效果,每个 include 布局里都有个遮罩的 view,在滑动过程中监听 appBarLayoutaddOnOffsetChangedListener,通过计算滑动的距离,逐渐改变透明度。

/**
     * 通过计算滑动的距离,逐渐改变透明度。
     */
    override fun onOffsetChanged(appBarLayout: AppBarLayout, verticalOffset: Int) {
        //垂直方向偏移量
        val offset = Math.abs(verticalOffset)
        //最大偏移距离
        val scrollRange = appBarLayout.totalScrollRange
        //当滑动没超过一半,展开状态下 toolbar 显示内容,更具收缩位置,改变透明值
        if (offset <= scrollRange / 2) {
            toolbar_open.visibility = View.VISIBLE
            toolbar_close.visibility = View.GONE
            //根据偏移百分比 计算透明值
            val scale: Float = offset.toFloat() / (scrollRange / 2)
            val alpha: Int = (255 * scale).toInt()
            bg_toolbar_open.setBackgroundColor(Color.argb(alpha, 25, 131, 209))
        }
        //当滑动超过一半,收缩状态下 toolbar 显示内容,根据收缩位置,改变透明值
        else {
            toolbar_open.visibility = View.GONE
            toolbar_close.visibility = View.VISIBLE
            val scale = (scrollRange - offset).toFloat() / (scrollRange / 2)
            val alpha = (255 * scale).toInt()
            bg_toolbar_close.setBackgroundColor(Color.argb(alpha, 25, 131, 209))
        }
        //根据百分比计算扫一扫布局透明值
        val scale = offset.toFloat() / scrollRange
        val alpha = (255 * scale).toInt()
        bg_content.setBackgroundColor(Color.argb(alpha, 25, 131, 209))
    }

详细代码见 :
github地址:https://github.com/wuchao226/AliHome

上一篇下一篇

猜你喜欢

热点阅读