当前位置： 首页 > news >正文

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

news 2025/6/22 21:03:25

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.lryc.cn/news/108520.html

相关文章：

  • 高频交易学习——上期SimNow开通
  • 电力巡检无人机助力迎峰度夏，保障夏季电力供应
  • UOS环境python3.7及pyqt5安装
  • SEO优化：提升网站排名与流量的关键策略
  • flutter-GridView使用
  • Unity Shader编辑器工具类ShaderUtil 常用函数和用法
  • 详解Spring中涉及的技术
  • 阿里云ssl免费数字证书快过期 如何更换
  • 利用OpenCV实现图像拼接
  • 【java安全】无Commons-Collections的Shiro550反序列化利用
  • CSS 滚动条
  • Linux: security: openssh: sshd 出现defunct的一种情况
  • Self-regulating Prompts: Foundational Model Adaptation without Forgetting
  • 平时工资不够用？推荐4种适合工作之余做的兼职副业！
  • 21.Netty源码之编码器
  • Linux 快速创建桌面图标
  • 数据结构—哈夫曼树及其应用
  • NeRF-SLAM: Real-Time Dense Monocular SLAM with Neural Radiance Fields 论文阅读
  • 机器学习之弹性网络（Elastic Net)
  • 嵌入式入门教学——C51
  • 2023-08-03力扣每日一题
  • 【蓝桥杯备考资料】如何进入国赛？
  • QtWebApp开发https服务器，完成客户端与服务器基于ssl的双向认证
  • 动态IP代理的优势展现与应用场景
  • ad+硬件每日学习十个知识点（22）23.8.2（LDO datasheet手册解读）
  • 这可是全网最全的网络工程师零基础实战视频整理，最新版分享
  • 笔记本WIFI连接无网络【实测有效解决方案，不用重启电脑】
  • js 正则表达式配合replace进行过滤html字符串遇到的性能问题
  • 2022牛客寒假算法基础集训营1
  • API对接：构建连接不同系统的技术桥梁