Android 仿京东头部滚动头像动态变化

UI出了一个新需求，仿京东头部滚动，头像需要动态变化，先来看下京东的是什么效果

我们知道什么效果以后，接下来就想想怎么实现吧，Android常规吸顶折叠布局是由CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout组成的，那么头部固定的布局从外面写一个固定的就行了，通过透明度来控制渐隐渐现，随之滑动放大缩小并且移动的头像需要单独一个图片控件来控制，并且在滑动过程中需要实时的控制头像所处的位置，思路理清楚以后，实现起来就比较简单了

1、先把UI结构画出来

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:layout_width="match_parent"android:layout_height="match_parent"><!-- 主布局 --><com.scwang.smart.refresh.layout.SmartRefreshLayoutandroid:id="@+id/refreshLayout"android:layout_width="match_parent"android:layout_height="match_parent"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><androidx.coordinatorlayout.widget.CoordinatorLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:background="@android:color/transparent"><com.google.android.material.appbar.AppBarLayoutandroid:id="@+id/appbar"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@android:color/transparent"app:elevation="0dp"><com.google.android.material.appbar.CollapsingToolbarLayoutandroid:id="@+id/collapsing_toolbar_layout"android:layout_width="match_parent"android:layout_height="wrap_content"android:minHeight="80dp"app:layout_scrollFlags="scroll|exitUntilCollapsed"app:toolbarId="@+id/toolbar"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><androidx.constraintlayout.widget.ConstraintLayoutandroid:id="@+id/layoutUserInfo"android:layout_width="match_parent"android:layout_height="wrap_content"android:paddingTop="40dp"android:paddingBottom="16dp"app:layout_constraintTop_toTopOf="parent"><com.makeramen.roundedimageview.RoundedImageViewandroid:id="@+id/imgUserHead"android:layout_width="60dp"android:layout_height="60dp"android:layout_marginStart="16dp"android:layout_marginTop="32dp"android:src="@mipmap/icon_login_default_header"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"app:riv_oval="true" /><TextViewandroid:id="@+id/tvHi"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginStart="10dp"android:text="Hi,我是京东PLUS会员"android:textColor="#333333"android:textSize="24sp"android:textStyle="bold"app:layout_constraintBottom_toTopOf="@+id/tvUserPhone"app:layout_constraintStart_toEndOf="@+id/imgUserHead"app:layout_constraintTop_toTopOf="@+id/imgUserHead"tools:ignore="HardcodedText" /><TextViewandroid:id="@+id/tvUserPhone"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginStart="10dp"android:text="JD.001"android:textColor="#666666"android:textSize="14sp"app:layout_constraintBottom_toBottomOf="@+id/imgUserHead"app:layout_constraintStart_toEndOf="@+id/imgUserHead"app:layout_constraintTop_toBottomOf="@+id/tvHi"tools:ignore="HardcodedText,SmallSp" /></androidx.constraintlayout.widget.ConstraintLayout><com.makeramen.roundedimageview.RoundedImageViewandroid:id="@+id/banner"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginStart="20dp"android:layout_marginEnd="20dp"android:scaleType="fitXY"android:src="@mipmap/icon_banner"app:layout_constraintTop_toTopOf="parent"app:riv_corner_radius="10dp"app:riv_oval="false" /></LinearLayout></com.google.android.material.appbar.CollapsingToolbarLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="50dp"android:layout_marginStart="20dp"android:layout_marginTop="10dp"android:layout_marginEnd="20dp"android:layout_marginBottom="10dp"android:background="@drawable/bg_bottom_view"android:elevation="10dp"android:gravity="center_vertical"android:orientation="horizontal"android:paddingTop="8dp"android:paddingBottom="8dp"><TextViewandroid:id="@+id/tv1"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"android:text="标题1"android:textColor="#FFFFFF"android:textSize="16sp"tools:ignore="HardcodedText" /><TextViewandroid:id="@+id/tv2"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"android:text="标题2"android:textColor="#FFFFFF"android:textSize="16sp"tools:ignore="HardcodedText" /><TextViewandroid:id="@+id/tv3"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"android:text="标题3"android:textColor="#FFFFFF"android:textSize="16sp"tools:ignore="HardcodedText" /><TextViewandroid:id="@+id/tv4"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"android:text="标题4"android:textColor="#FFFFFF"android:textSize="16sp"tools:ignore="HardcodedText" /></LinearLayout></com.google.android.material.appbar.AppBarLayout><androidx.core.widget.NestedScrollViewandroid:layout_width="match_parent"android:layout_height="wrap_content"app:layout_behavior="@string/appbar_scrolling_view_behavior"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginStart="20dp"android:layout_marginEnd="20dp"android:orientation="vertical"><TextViewandroid:layout_width="match_parent"android:layout_height="40dp"android:gravity="center_vertical"android:text="我是PLUS会员！！！"android:textColor="#FF0000"android:textSize="16sp"android:textStyle="bold"tools:ignore="HardcodedText,RtlSymmetry" /></LinearLayout></androidx.core.widget.NestedScrollView></androidx.coordinatorlayout.widget.CoordinatorLayout></LinearLayout></com.scwang.smart.refresh.layout.SmartRefreshLayout><!-- 滑动到顶部以后出现的吸顶头布局 --><androidx.constraintlayout.widget.ConstraintLayoutandroid:id="@+id/layoutUserInfoTop"android:layout_width="match_parent"android:layout_height="wrap_content"android:alpha="0"android:background="#FF0000"android:paddingTop="42dp"android:paddingBottom="12dp"tools:alpha="1"><com.makeramen.roundedimageview.RoundedImageViewandroid:id="@+id/imgUserHeadTop"android:layout_width="30dp"android:layout_height="30dp"android:layout_marginStart="16dp"android:src="@mipmap/icon_login_default_header"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"app:riv_oval="true" /><TextViewandroid:id="@+id/tvHiTop"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginStart="10dp"android:text="Hi,我是京东PLUS会员"android:textColor="#FFFFFF"android:textSize="14sp"android:textStyle="bold"app:layout_constraintBottom_toTopOf="@+id/tvUserPhoneTop"app:layout_constraintStart_toEndOf="@+id/imgUserHeadTop"app:layout_constraintTop_toTopOf="@+id/imgUserHeadTop"tools:ignore="HardcodedText" /><TextViewandroid:id="@+id/tvUserPhoneTop"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginStart="10dp"android:text="JD.001"android:textColor="#FFFFFF"android:textSize="10sp"app:layout_constraintBottom_toBottomOf="@+id/imgUserHeadTop"app:layout_constraintStart_toEndOf="@+id/imgUserHeadTop"app:layout_constraintTop_toBottomOf="@+id/tvHiTop"tools:ignore="HardcodedText,SmallSp" /></androidx.constraintlayout.widget.ConstraintLayout><!-- 滑动过程中的头像 --><com.makeramen.roundedimageview.RoundedImageViewandroid:id="@+id/imgSlide"android:layout_width="60dp"android:layout_height="60dp"android:visibility="invisible"app:riv_oval="true" /></FrameLayout>

2、主要代码处理

    private final HomeAppBarStateChangeListener mAppBarStateChangeListener = new HomeAppBarStateChangeListener() {@Overridepublic void onStateChanged(AppBarLayout appBarLayout, State state, int slidingDistance) {switch (state) {case EXPANDED:      //展开setTitleBackground(1);mainBinding.imgUserHeadTop.setVisibility(View.INVISIBLE);mainBinding.imgSlide.setVisibility(View.INVISIBLE);mainBinding.imgUserHead.setVisibility(View.VISIBLE);mainBinding.layoutUserInfoTop.setAlpha(0f);break;case IDLE:          //滚动mainBinding.imgUserHead.setVisibility(View.INVISIBLE);break;case COLLAPSED:     //置顶setTitleBackground(0);mainBinding.imgUserHeadTop.setVisibility(View.VISIBLE);mainBinding.imgUserHead.setVisibility(View.INVISIBLE);mainBinding.imgSlide.setVisibility(View.INVISIBLE);mainBinding.layoutUserInfoTop.setAlpha(1f);break;}mainBinding.refreshLayout.requestLayout();}@Overridepublic void onStateSliding(AppBarLayout appBarLayout, State state, int slideHeight) {int slidingHeight = Math.abs(slideHeight);if (slidingHeight <= top30 && slidingHeight >= 0) {if (mainBinding.imgSlide.getVisibility() != View.VISIBLE) {mainBinding.imgSlide.setVisibility(View.VISIBLE);}if (mainBinding.imgUserHeadTop.getVisibility() != View.INVISIBLE) {mainBinding.imgUserHeadTop.setVisibility(View.INVISIBLE);}mainBinding.imgSlide.setY(maxTop - slidingHeight);if (slidingHeight <= top30) {FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) mainBinding.imgSlide.getLayoutParams();layoutParams.width = top60 - slidingHeight;layoutParams.height = top60 - slidingHeight;mainBinding.imgSlide.requestLayout();}Glide.with(MainActivity.this).load(R.mipmap.icon_login_default_header).into(mainBinding.imgSlide);} else {if (mainBinding.imgUserHeadTop.getVisibility() != View.VISIBLE) {mainBinding.imgUserHeadTop.setVisibility(View.VISIBLE);}if (mainBinding.imgSlide.getVisibility() != View.INVISIBLE) {mainBinding.imgSlide.setVisibility(View.INVISIBLE);}}if (slidingHeight < 100) {float alpha = slidingHeight * 1.0f / 100f;if (alpha < 0.3) {setTitleBackground(1);} else {setTitleBackground(0);}mainBinding.layoutUserInfoTop.setAlpha(alpha);} else {setTitleBackground(0);mainBinding.layoutUserInfoTop.setAlpha(1f);}}};

最后来看下Android上实现的效果吧

Java代码只是一部门，源代码请看传送门

如果能帮到你的话，可以请作者喝一杯咖啡，谢谢！！！
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/77184.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

express学习笔记5 - 自定义路由异常处理中间件

express学习笔记5 - 自定义路由异常处理中间件

修改router/index.js&#xff0c;添加异常处理中间件 *** 自定义路由异常处理中间件* 注意两点&#xff1a;* 第一&#xff0c;方法的参数不能减少* 第二&#xff0c;方法的必须放在路由最后*/ router.use((err, req, res, next) > {console.log(err);const msg (err &…
阅读更多...
SpringCloud入门Day01-服务注册与发现、服务通信、负载均衡与算法

SpringCloud入门Day01-服务注册与发现、服务通信、负载均衡与算法

SpringCloudNetflix入门 一、应用架构的演变 伴随互联网的发展&#xff0c;使用互联网的人群越来越多&#xff0c;软件应用的体量越来越大和复杂。而传统单体应用 可能不足以支撑大数据量以及发哦并发场景应用的框架也随之进行演变从最开始的单体应用架构到分布式&#xff08…
阅读更多...
Python零基础入门（十一）——异常处理

Python零基础入门（十一）——异常处理

系列文章目录 个人简介&#xff1a;机电专业在读研究生&#xff0c;CSDN内容合伙人&#xff0c;博主个人首页 Python入门专栏&#xff1a;《Python入门》欢迎阅读&#xff0c;一起进步&#xff01;&#x1f31f;&#x1f31f;&#x1f31f; 码字不易&#xff0c;如果觉得文章不…
阅读更多...
远程访问本地mysql

远程访问本地mysql

文章目录 一、设置本地mysql允许外部访问找到mysql配置文件my.ini &#xff0c;linux环境是my.cnf配置mysql配置文件 二、创建外部访问的mysql用户三、配置mysql用户的权限四、配置防火墙端口五、连接查看本地ip地址 参考 连接命令 mysql -h <host> -P <port> -u &…
阅读更多...
深度学习之双线性插值

深度学习之双线性插值

1、单线性插值 单线性插值是一种用于估计两个已知数据点之间未知点的方法。它基于线性关系&#xff0c;通过计算目标位置的值&#xff0c;使用已知点之间的线性函数进行插值。这在图像处理中常用于放缩、旋转等操作&#xff0c;计算简单&#xff0c;产生平滑结果&#xff0c;但…
阅读更多...
将python源代码打包成.exe可执行文件

将python源代码打包成.exe可执行文件

步骤 1、安装pyinstaller2、打开终端或命令提示符窗口并进入解释器的虚拟环境3、从解释器的虚拟环境进入包含要打包Python文件的目录4、通过以下命令打包5、打包后文件存放位置 1、安装pyinstaller pip install pyinstaller2、打开终端或命令提示符窗口并进入解释器的虚拟环境…
阅读更多...
Win11大小写切换图标关闭方法

Win11大小写切换图标关闭方法

大家使用Win11操作系统的时候经常会切换大小写键盘&#xff0c;有些游戏本在游戏过程中需要切换大小写&#xff0c;这个时候电脑的屏幕就会出现大小写切换的图标而影响游戏体验&#xff1b; 那么想要关闭Win11电脑上大小写切换图标&#xff0c;又不知道具体怎么操作&#xff0c…
阅读更多...
vscode如何退出/切换 github 账号

vscode如何退出/切换 github 账号

退出/切换 github 账号 左下角点击头像按钮&#xff0c;选择注销&#xff0c;然后再重新登录
阅读更多...
阿里为啥禁止三表Join关联?

阿里为啥禁止三表Join关联?

阿里出过一个《Java开发手册》&#xff0c;上面有一条规约是禁止超过三张表的join。 为什么要禁止&#xff0c;其实最主要的原因就是join的效率比较低。 mysql只有一种表连接类型:嵌套循环连接(nested-loop)&#xff0c;不支持排序-合并连接(sort-merge join)与散列连接(hash …
阅读更多...
纯JS+Vue实现一个仪表盘

纯JS+Vue实现一个仪表盘

在使用canvas的时候发现数值变化&#xff0c;每次都要重新渲染&#xff0c;值都从0开始&#xff0c;这和我的需求冲突。 1. 先绘制基本的圆环背景&#xff0c;利用border-color和border-radius将正方形变成基本的圆环。 <div class"circle"><div class&qu…
阅读更多...
Docker实战-操作Docker容器实战(二)

Docker实战-操作Docker容器实战(二)

导语   上篇分享中，我们介绍了关于如何创建容器、如何启动容器、如何停止容器。这篇我们来分享一下如何操作容器。 如何进入容器 可以通过使用-d参数启动容器后会进入后台运行，用户无法查看容器中的信息，无法对容器中的信息进行操作。 这个时候如果我们需要进入容器对容器…
阅读更多...
利用XSS在线平台获取用户cookie

利用XSS在线平台获取用户cookie

//XSS弹窗&#xff1a; <script>alert("xss")</script> XSS漏洞&#xff1a; //XSS弹窗&#xff1a; <script>alert("xss")</script> //XSS在线平台&#xff1a; <ScRipT sRc//7ix7kigpovxdbtd32fuspgffmtmufo3wwzgnzaltddewtb…
阅读更多...
iMX6ULL应用移植 | 移植 infoNES 模拟器(重玩经典NES游戏)

iMX6ULL应用移植 | 移植 infoNES 模拟器(重玩经典NES游戏)

没玩过NES游戏的童年&#xff0c;可能不是80后的童年。我们小时候是从玩FC开始接触游戏机的&#xff0c;那时真的是红极一时啊&#xff0c;我上初中时还省吃俭用买了一台小霸王&#xff0c;暑假里把电视机都给打爆了&#xff01;那时任天堂单是FC机的主机的发售收入就超过全美的…
阅读更多...
程序环境和预处理（含C语言程序的编译+链接）--1

程序环境和预处理（含C语言程序的编译+链接）--1

&#x1f389;个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名乐于分享在学习道路上收获的大二在校生 &#x1f43b;‍❄个人主页&#x1f389;&#xff1a;GOTXX &#x1f43c;个人WeChat&#xff1a;ILXOXVJE &#x1f43c;本文由GOTXX原创&#xff0c;首发CSDN…
阅读更多...
在CentOS 7上挂载硬盘到系统的步骤及操作

在CentOS 7上挂载硬盘到系统的步骤及操作

目录 1&#xff1a;查询未挂载硬盘2&#xff1a;创建挂载目录3&#xff1a;检查磁盘是否被分区4&#xff1a;格式化硬盘5&#xff1a;挂载目录6&#xff1a;检查挂载状态7&#xff1a;设置开机自动挂载总结&#xff1a; 本文介绍了在CentOS 7上挂载硬盘到系统的详细步骤。通过确…
阅读更多...
完全背包问题

完全背包问题

题目链接 题意&#xff1a;在01背包的基础上多了每个物品都可以无限取的条件 思路&#xff1a;首先考虑在01背包的基础上的暴力枚举&#xff0c;我们可以在枚举前i件物品最多拿j的容量时再遍历当前物品拿的数量 贴一个暴力tle代码&#xff1a; #include<bits/stdc.h> #d…
阅读更多...
【云原生K8s】初识Kubernetes的理论基础

【云原生K8s】初识Kubernetes的理论基础

K8S由google的Borg系统(博格系统&#xff0c;google内部使用的大规模容器编排工具)作为原型&#xff0c;后经GO语言延用Borg的思路重写并捐献给CNCF基金会开源。 云原生基金会&#xff08;CNCF&#xff09;于2015年12月成立&#xff0c;隶属于Linux基金会。CNCF孵化的第一个项目…
阅读更多...
短视频矩阵源码

短视频矩阵源码

一、短视频矩阵源码搭建解析&#xff1a; 目录 一、短视频矩阵源码搭建解析&#xff1a; 二、短视频矩阵源码的开发路径分享&#xff1a; 三、短视频矩阵系统开发应具备哪些能力&#xff1f; 短视频技术开发能力&#xff1a; 开发人员应具备短视频相关技术能力&#xff0c…
阅读更多...
iOS 后台运行

iOS 后台运行

iOS后台行&#xff0c;一般有两种方式&#xff1a; 1.UIBackgroundTaskIdentifier后台任务标记时, 2.设置后台运行模式&#xff0c;需要有voip&#xff0c;location功能的才行。不然app上线审核肯定是过不了的。 下面是我学习后台运行的尝试过程。 一.首先创建一个项目功程…
阅读更多...
python#django数据库一对一/一对多/多对多

python#django数据库一对一/一对多/多对多

一对一OneToOneField 用户和用户信息 搭建 # 一对一 class TestUser(models.Model): usernamemodels.CharField(max_length32) password models.CharField(max_length32) class TestInfo(models.Model): mick_namemodels.CharField(max_length32) usermode…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023