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代码只是一部门,源代码请看传送门
如果能帮到你的话,可以请作者喝一杯咖啡,谢谢!!!

相关文章:
Android 仿京东头部滚动头像动态变化
UI出了一个新需求,仿京东头部滚动,头像需要动态变化,先来看下京东的是什么效果 我们知道什么效果以后,接下来就想想怎么实现吧,Android常规吸顶折叠布局是由CoordinatorLayoutAppBarLayoutCollapsingToolbarLayout组成…...
高频交易学习——上期SimNow开通
property 是 Python 中的一个装饰器(decorator),用于定义类的属性。它可以将方法转换为相应的特性(property),从而实现属性的访问和修改控制。 property 装饰器的作用是将一个方法变成一个只读属性&#x…...
电力巡检无人机助力迎峰度夏,保障夏季电力供应
夏季是电力需求量较高的时期,随着高温天气的来临,风扇、空调和冰箱等电器的使用量也大大增加,从而迎来夏季用电高峰期,电网用电负荷不断攀升。为了保障夏季电网供电稳定,供电公司会加强对电力设施设备的巡检࿰…...
UOS环境python3.7及pyqt5安装
解决方案尝试 先安装pyqt5依赖项: 1、更新python3.7 sudo add-apt-repository ppadeadsnakes/ppa sudo apt-get update sudo apt-get upgrade sudo apt-get autoremove sudo apt-get install python3.7 sudo update-alternatives --install /usr/bin/python3 python3 /usr/bin/…...
SEO优化:提升网站排名与流量的关键策略
导言: 在如今竞争激烈的互联网时代,网站的排名和流量对于企业的在线可见性和业务发展至关重要。搜索引擎优化(SEO)是一种关键的策略,旨在提高网站在搜索引擎结果页面上的排名,从而增加网站的曝光率和有针对…...
flutter-GridView使用
先看效果 代码实现 import package:app/common/util/k_log_util.dart; import package:app/gen/assets.gen.dart; import package:app/pages/widget/top_appbar.dart; import package:flutter/cupertino.dart; import package:flutter/material.dart; import package:flutter_…...
Unity Shader编辑器工具类ShaderUtil 常用函数和用法
Unity Shader编辑器工具类ShaderUtil 常用函数和用法 Unity的Shader编辑器工具类ShaderUtil提供了一系列函数,用于编译、导入和管理着色器。本文将介绍ShaderUtil类中的常用函数和用法。 编译和导入函数 CompileShader 函数签名:public static bool C…...
详解Spring中涉及的技术
注解 介绍: 注解(Annotation)很重要,未来的开发模式都是基于注解的,JPA是基于注解的,Spring2.5以上都是基于注解的,Hibernate3.x以后也是基于注解的,现在的Struts2有一部分也是基于注解的了,注…...
阿里云ssl免费数字证书快过期 如何更换
1.登陆阿里云 找到ssl 查看快过期的证书 数字证书管理服务-ssl证书 2.创建免费的证书,对应过期证书的域名 3.下载新证书 pem key放在本地 此处记录本地的下载路径 /Users/dorsey/Downloads/10791167_lzzabc.cn_nginx/lzzabc.cn.pem /Users/dorsey/Downloads/1…...
利用OpenCV实现图像拼接
一、介绍 图像拼接. 二、分步实现 要实现图像拼接,简单来说有以下几步: 对每幅图进行特征点提取对对特征点进行匹配进行图像配准把图像拷贝到另一幅图像的特定位置对重叠边界进行特殊处理 PS:需要使用低版本的opencv,否则无法使…...
【java安全】无Commons-Collections的Shiro550反序列化利用
文章目录 【java安全】无Commons-Collections的Shiro550反序列化利用Shiro550利用的难点CommonsBeanutils1是否可以Shiro中?什么是serialVersionUID?W 无依赖的Shiro反序列化利用链POC 【java安全】无Commons-Collections的Shiro550反序列化利用 Shiro5…...
CSS 滚动条
一、滚动条样式属性 ::-webkit-scrollbar {width: 6px; /* 竖向滚动条宽度 */height: 6px; /* 横向滚动条高度 */ }::-webkit-scrollbar-thumb {border-radius: 10px; /* 滚动条样式 */-webkit-box-shadow: inset 0 0 3px red; /* 内阴影 */background-color: blue; /* 滚动条…...
Linux: security: openssh: sshd 出现defunct的一种情况
最近遇到了一个问题,就出现了一对遗留进程对,类似于下面这两个 root 77399 19100 77399 0 1 01:46 ? 00:00:00 sshd: \mzhan017 [priv] sshd 77400 77399 77400 0 1 01:46 ? 00:00:00 sshd: [defunct] 人生中的第一次遇到这种情况。一定要记录一下! 关于[priv]这个解释,…...
Self-regulating Prompts: Foundational Model Adaptation without Forgetting
本文也是大模型系列的文章,主要是与Prompt Learning有关。针对《Self-regulating Prompts: Foundational Model Adaptation without Forgetting》的翻译。 自我调节的提示:不遗忘的基础模型适应 摘要1 引言2 相关工作3 提出的方法3.1 前言3.2 提示学习的…...
平时工资不够用?推荐4种适合工作之余做的兼职副业!
你是否也曾经在为每个月的工资发愁?你是否想过做点副业来增加收入?现在很多上班族的工资,已经难以满足他们的生活需求了,很多人开始尝试通过副业来增加收入。那么上班族要如何寻找适合自己的副业呢?下面就给大家分享几…...
21.Netty源码之编码器
highlight: arduino-light Netty如何实现自定义通信协议 在学习完如何设计协议之后,我们又该如何在 Netty 中实现自定义的通信协议呢?其实 Netty 作为一个非常优秀的网络通信框架,已经为我们提供了非常丰富的编解码抽象基类,帮助我…...
Linux 快速创建桌面图标
在安装 tar.gz 这类型压缩文件时,通常启动文件是.sh文件。文章主要记录快速添加到桌面图标。 1、解压 tar -zxvf XXX.tar.gz 2、创建桌面图标文件 touch XXX.desktop 3、文件中配置 [Desktop Entry] NameXXX CommentZZZ Exec/软件可执行文件所在目录/可执行文…...
数据结构—哈夫曼树及其应用
5.6哈夫曼树及其应用 5.6.1哈夫曼树的基本概念 路径:从树中一个结点到另一个结点之间的分支构成这两个结点间的路径。 结点的路径长度:两结点间路径上的分支数。 树的路径长度:从树根到每一个结点的路径长度之和。记作 TL 结点数目相同的…...
NeRF-SLAM: Real-Time Dense Monocular SLAM with Neural Radiance Fields 论文阅读
论文信息 题目:NeRF-SLAM: Real-Time Dense Monocular SLAM with Neural Radiance Fields 作者:Antoni Rosinol, John J. Leonard, Luca Carlone 代码:https://github.com/ToniRV/NeRF-SLAM 来源:arxiv 时间ÿ…...
机器学习之弹性网络(Elastic Net)
弹性网络 代码原文 下面代码参考scikit-learn中文社区,链接在上面。 但是由于scikit-learn中文社区上的代码有些地方跑不通,故对此代码做了修改,输出结果与社区中显示的结果相同。 对弹性网络进行简单的介绍: ElasticNet是一个训…...
深度学习在微纳光子学中的应用
深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向: 逆向设计 通过神经网络快速预测微纳结构的光学响应,替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...
【机器视觉】单目测距——运动结构恢复
ps:图是随便找的,为了凑个封面 前言 在前面对光流法进行进一步改进,希望将2D光流推广至3D场景流时,发现2D转3D过程中存在尺度歧义问题,需要补全摄像头拍摄图像中缺失的深度信息,否则解空间不收敛…...
【算法训练营Day07】字符串part1
文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接:344. 反转字符串 双指针法,两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O(n) 时间复杂度…...
3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象,只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意:它移动的位置必须是相连的有内容的单元格…...
Python 包管理器 uv 介绍
Python 包管理器 uv 全面介绍 uv 是由 Astral(热门工具 Ruff 的开发者)推出的下一代高性能 Python 包管理器和构建工具,用 Rust 编写。它旨在解决传统工具(如 pip、virtualenv、pip-tools)的性能瓶颈,同时…...
LabVIEW双光子成像系统技术
双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制,展现出显著的技术优势: 深层组织穿透能力:适用于活体组织深度成像 高分辨率观测性能:满足微观结构的精细研究需求 低光毒性特点:减少对样本的损伤…...
离线语音识别方案分析
随着人工智能技术的不断发展,语音识别技术也得到了广泛的应用,从智能家居到车载系统,语音识别正在改变我们与设备的交互方式。尤其是离线语音识别,由于其在没有网络连接的情况下仍然能提供稳定、准确的语音处理能力,广…...
人工智能 - 在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型
在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型。这些平台各有侧重,适用场景差异显著。下面我将从核心功能定位、典型应用场景、真实体验痛点、选型决策关键点进行拆解,并提供具体场景下的推荐方案。 一、核心功能定位速览 平台核心定位技术栈亮…...
uni-app学习笔记三十五--扩展组件的安装和使用
由于内置组件不能满足日常开发需要,uniapp官方也提供了众多的扩展组件供我们使用。由于不是内置组件,需要安装才能使用。 一、安装扩展插件 安装方法: 1.访问uniapp官方文档组件部分:组件使用的入门教程 | uni-app官网 点击左侧…...
