Android 6.0 仿支付宝主页UI实战案例_仿移动端支付宝app-优快云博客

本文链接：https://blog.youkuaiyun.com/u013933720/article/details/78191282

本文通过实战案例详细介绍了如何在Android 6.0中仿制支付宝主页UI，包括UI分析、Activity布局xml、MainActivity代码及多个XML布局文件的使用。在上滑和下滑操作中实现AppBarLayout的隐藏和切换不同toolbar的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为了更好的熟练运用6.0相关UI控件，就打算做一个类似支付宝UI界面练练手，有啥不足的，欢迎大家来喷。

效果图如下：

正常情况下：
这里写图片描述

上滑行为触发AppBarLayout隐藏并且折叠为下：

这里写图片描述

旧版支付宝UI
这里写图片描述

UI分析

这里写图片描述

分析完了，开始码蛋。。。

Activity布局xml

这里写图片描述

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.test_design.MainActivity">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <!--折叠空间-->
        <!--contentScrim内容遮罩-->
        <!--colorPrimary标题栏颜色-->
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="#1984D1"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
            <!--parallax渐变-->
            <!--四个操作-->
            <include
                layout="@layout/flex_head1"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_marginTop="?attr/actionBarSize"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.5"/>
            <!--Toolbar-->
            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:contentInsetStart="0dp"
                app:layout_collapseMode="pin" >
                <include
                    android:id="@+id/toolbar1"
                    layout="@layout/toolbar_head1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"/>
                <include
                    android:id="@+id/toolbar2"
                    layout="@layout/toolbar_head2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:visibility="gone"/>
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width=