支付宝首页滑动

作者: 笑叶林 | 来源:发表于2018-07-23 14:37 被阅读57次

支付宝首页滑动

首先看到这种效果,第一反应就是coordinatorLayout布局,android studio新建项目时,可以直接新建个Scrolling Activity来查看demo效果。

效果图:

alihome.gif

gradle关联

implementation 'com.android.support:design:28.+'

简单介绍使用到的几个布局:

coordinatorLayout

coordinatorLayout协调者布局,用来协调其子view并以触摸影响布局的形式产生动画效果的布局。coordinatorLayout是一个顶级布局。

appBarLayout

appBarLayout主要给子布局配置属性app:layout_scrollFlags,5个属性值:

scroll:所有想滚动出屏幕的view都需要设置这个属性值, 没有设置这个属性的view将被固定在屏幕顶部

enterAlways:任意向下的滚动都会导致该view变为可见,启用快速“返回模式”

enterAlwaysCollapsed:假设你定义了一个最小高度(minHeight)同时enterAlways也定义了,那么view将在到达这个最小高度的时候开始显示,并且从这个时候开始慢慢展开,当滚动到顶部的时候展开完。

exitUntilCollapsed:当你定义了一个minHeight,此布局将在滚动到达这个最小高度的时候折叠。

snap:当一个滚动事件结束,如果视图是部分可见的,那么它将被滚动到收缩或展开。例如,如果视图只有底部25%显示,它将折叠。相反,如果它的底部75%可见,那么它将完全展开。

这里的属性可以组合使用。

例如demo中自带的

滑上去toolbar收缩在顶部

app:layout_scrollFlags="scroll|exitUntilCollapsed"

滑上去toolbar滑出屏幕

app:layout_scrollFlags="scroll|enterAlways"

collapsingToolbarLayout

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

3种折叠模式:

off:默认属性,布局将正常显示,无折叠行为。

pin:折叠后,此布局将固定在顶部。

parallax:折叠时,此布局也会有视差折叠效果。

当其子布局设置了parallax模式时,我们还可以通过app:layout_collapseParallaxMultiplier设置视差滚动因子,值为:0~1

接下来,我们就使用以上的属性来完成demo

实现原理

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里的两种布局:

<android.support.v7.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="50dp"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp"
    app:layout_collapseMode="pin">

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

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

</android.support.v7.widget.Toolbar>

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

4、最下面的布局可以是NestedScrollView,一定要在布局中设置以下属性,这里我直接用的demo中的布局:

app:layout_behavior="@string/appbar_scrolling_view_behavior"

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

@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
    //垂直方向偏移量
    int offset = Math.abs(verticalOffset);
    //最大偏移距离
    int scrollRange = appBarLayout.getTotalScrollRange();
    if (offset <= scrollRange / 2) {//当滑动没超过一半,展开状态下toolbar显示内容,根据收缩位置,改变透明值
        toolbarOpen.setVisibility(View.VISIBLE);
        toolbarClose.setVisibility(View.GONE);
        //根据偏移百分比 计算透明值
        float scale2 = (float) offset / (scrollRange / 2);
        int alpha2 = (int) (255 * scale2);
        bgToolbarOpen.setBackgroundColor(Color.argb(alpha2, 25, 131, 209));
    } else {//当滑动超过一半,收缩状态下toolbar显示内容,根据收缩位置,改变透明值
        toolbarClose.setVisibility(View.VISIBLE);
        toolbarOpen.setVisibility(View.GONE);
        float scale3 = (float) (scrollRange  - offset) / (scrollRange / 2);
        int alpha3 = (int) (255 * scale3);
        bgToolbarClose.setBackgroundColor(Color.argb(alpha3, 25, 131, 209));
    }
    //根据偏移百分比计算扫一扫布局的透明度值
    float scale = (float) offset / scrollRange;
    int alpha = (int) (255 * scale);
    bgContent.setBackgroundColor(Color.argb(alpha, 25, 131, 209));
}

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

相关文章

  • 支付宝首页滑动

    支付宝首页滑动 首先看到这种效果,第一反应就是coordinatorLayout布局,android studio...

  • 仿支付宝首页滑动

    先行语 借鉴于AlipayIndexDemo 支付宝效果图 实现的效果图 PS:加入了上拉加载更多 demo地址

  • 支付宝首页刷新滑动效果

    实现结果 先给大家看下效果图。 实现原理 实现支付宝首页刷新滑动效果用一个tableView。用一个tableVi...

  • iOS 仿支付宝首页样式

    iOS 仿支付宝首页样式 iOS 仿支付宝首页样式

  • OC 仿支付宝首页滑动效果

    前段时间,突然接到一个项目,当时特别着急,只有四天时间就要给一个演示版本 不带接口请求的。一看设计图 首页是仿支付...

  • 多个UIScrollView嵌套(瀑布流)

    前言 之前有做一个滑动效果类似支付宝首页的样式https://www.jianshu.com/p/f7bee2e2...

  • 2018-11-26

    打开支付宝首页搜索“561213803” 立即领红包打开支付宝首页搜索“561213803” 立即领红包打开支付宝...

  • 仿简书主页实现(ViewPage+Fragment+TabLay

    技术要点: 效果图如下: 描述: 底部为正常Tab 首页 3个Tab 首页3个Tab 滑动,滑动结束进入下一个 主...

  • flutter PageView 禁止左右滚动

    开发app中,首页会经常使用到PageView,首页又不需要滑动,这个时候就需要关闭系统自带的左右滑动效果 效果如...

  • 支付宝迈了一个“大尺度”的步子

    关键字:支付宝、日记、大尺度 11月27日,支付宝上线了“日记圈子”这一新功能,并在首页进行推送。在支付宝首页直接...

网友评论

    本文标题:支付宝首页滑动

    本文链接:https://www.haomeiwen.com/subject/wdcjmftx.html