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.mzph.cn/news/19685.shtml

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

相关文章

JAVA 反编译工具

JAVA 反编译工具

Releases deathmarine/Luyten GitHub 安装exe 打开拖入文件即可
阅读更多...
Express接口

Express接口

1.创建基本的服务器 // 导入express模块 const express require(express); const send require(send);// 创建express的 服务器实例 const app express()// 启动服务器 app.listen(80, () > {console.log(express server running at );})2.创建API路由接口 // 导入expr…
阅读更多...
「网络编程」传输层协议_ TCP协议学习_及原理深入理解（二 - 完结）[万字详解]

「网络编程」传输层协议_ TCP协议学习_及原理深入理解（二 - 完结）[万字详解]

「前言」文章内容大致是传输层协议&#xff0c;TCP协议讲解的第二篇&#xff0c;续上篇TCP。 「归属专栏」网络编程 「主页链接」个人主页 「笔者」枫叶先生(fy) 目录 二、TCP协议2.9 TCP连接管理机制2.9.1 三次握手2.9.2 四次挥手2.9.3 演示查看TIME_WAIT和CLOSE_WAIT状态2.9.…
阅读更多...
MySQL 远程操作mysql

MySQL 远程操作mysql

可以让别人在他们的电脑上操作我电脑上的数据库 create user admin identified with mysql_native_password by admin; //设置账号密码都为admingrant all on *.* to admin; //给admin账号授权 授权完成
阅读更多...
使用elementplus实现文本框的粘贴复制

使用elementplus实现文本框的粘贴复制

需求&#xff1a; 文本框仅用于显示展示数据并且用户可以进行复制&#xff0c;并不会进行修改和编辑&#xff0c; 注意点&#xff1a; 1.首先且文本为多行。所以不能使用普通的el-input&#xff0c;这种一行超出就会隐藏了&#xff0c;如果多行超出行数也会隐藏&#xff08;…
阅读更多...
第16节：R语言医学分析实例：肺切除手术的Apriori关联规则分析

第16节：R语言医学分析实例：肺切除手术的Apriori关联规则分析

关联规则 肺切除手术的Apriori关联规则分析。 分析的目的是确定患有肺癌并需要接受肺切除术的患者的共病症状。 了解哪些症状是共病的可以帮助改善患者护理和药物处方。 分析类型是关联规则学习，通过探索变量之间的关联或频繁项集，尝试在大型数据集中找到见解和隐藏关系（H…
阅读更多...
用blender做一层石墨烯

用blender做一层石墨烯

文章目录 1 创建正六边形2 复制正六边形3 阵列4 球棍模型 1 创建正六边形 ShiftA->网格->圆环->左下角出现添加圆环菜单&#xff0c;将顶点设为6&#xff0c;得到一个正六边形。按下tab键进入编辑模式->快捷键F填充&#xff0c;得到下图 2 复制正六边形 首先将轴…
阅读更多...
Django的FBV和CBV

Django的FBV和CBV

Django的FBV和CBV 基于django开发项目时&#xff0c;对于视图可以使用 FBV 和 CBV 两种模式编写。 FBV&#xff0c;function base views&#xff0c;其实就是编写函数来处理业务请求。 from django.contrib import admin from django.urls import path from app01 import view…
阅读更多...
Redis主从复制、哨兵机制、集群分片

Redis主从复制、哨兵机制、集群分片

一.主从复制 1.概述 主从复制&#xff0c;是指将一台Redis服务器的数据&#xff0c;复制到其他的Redis服务器。前者称为主节点(master)&#xff0c;后者称为从节点(slave)。 数据的复制是单向的&#xff0c;只能由主节点到从节点默认情况下&#xff0c;每台Redis服务器都是主节…
阅读更多...
mqtt协议流程图

mqtt协议流程图

转载于
阅读更多...
AUTOSAR从入门到精通-【应用篇】基于CAN总线的嵌入式人机交互终端的 设计与开发

AUTOSAR从入门到精通-【应用篇】基于CAN总线的嵌入式人机交互终端的 设计与开发

前言 在计算机出现后，因其先进的科学技术能力，影响着人类的生产活动和社会 活动，它以强大的生命力快速发展，随着在社会中的普及率越来越广，应用越来 越多，操作计算机的难度和疲劳感成为困扰大众的问题。如何实现计算机与用户 之间更好的互动交流成为了值得思考的发展方面…
阅读更多...
机器学习深度学习——权重衰减

机器学习深度学习——权重衰减

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位即将上大四&#xff0c;正专攻机器学习的保研er &#x1f30c;上期文章&#xff1a;机器学习&&深度学习——模型选择、欠拟合和过拟合 &#x1f4da;订阅专栏&#xff1a;机器学习&&深度学习 希望文章对你…
阅读更多...
数据结构8-哈希表

数据结构8-哈希表

数据结构8-哈希表 动态分配内存方式&#xff1a; #include <stdio.h> #include <stdlib.h>#define SIZE 20struct DataItem {int data; int key; };struct DataItem* hashArray[SIZE]; struct DataItem* dummyItem; struct DataItem* item;//获取键值 int has…
阅读更多...
flink任务性能优化

flink任务性能优化

1、使用异步算子&#xff0c;异步执行操作 2、将下游数据需要的数据以参数的形式向下传递 3、当服务器资源有限的情况下&#xff0c;慎用RocksDBStateBackend RocksDBStateBackend performance will be poor because of the current Flink memory configuration! RocksDB wi…
阅读更多...
Rust的入门篇(上)

Rust的入门篇(上)

Rust的入门篇(上) 最近跟着菜鸟一起入门了比较火的Rust语言&#xff0c;下面整理一下学习的笔记吧。 1. Helloworld程序 fn main(){println!("hello rust") }2. 格式化字符串 fn main(){let a 12;// 格式化字符串println!("a{}", a);println!("a…
阅读更多...
Vue2.0基础

Vue2.0基础

1、概述 Vue(读音/vju/&#xff0c;类似于view)是一套用于构建用户界面的渐进式框架&#xff0c;发布于2014年2月。与其它大型框架不同的是&#xff0c;Vue被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层&#xff08;也就是可以理解为HTMLCSSJS&#xff09;&#xff…
阅读更多...
使用Idea提交项目到远程仓库

使用Idea提交项目到远程仓库

使用Idea提交项目到远程仓库 1.在Idea中打开本地要推送的项目2.创建远程仓库并提交 1.在Idea中打开本地要推送的项目 tips: 首先你得有git工具&#xff0c;没有的话可以参考下面的这篇文章 git与gitee结合使用&#xff0c;提交代码&#xff0c;文件到远程仓库 从导航栏中选择 V…
阅读更多...
uC-OS2 V2.93 STM32L476 移植：系统移植篇

uC-OS2 V2.93 STM32L476 移植：系统移植篇

前言 上一篇已经 通过 STM32CubeMX 搭建了 NUCLEO-L476RG STM32L476RG 的 裸机工程&#xff0c;并且下载了 uC-OS2 V2.93 的源码&#xff0c;接下来&#xff0c;开始系统移植 开发环境 win10 64位 Keil uVision5&#xff0c;MDK V5.36 uC-OS2 V2.93 开发板&#xff1a;NUC…
阅读更多...
Flink DataStream API详解

Flink DataStream API详解

DataStream API 参考&#xff1a;https://ci.apache.org/projects/flink/flink-docs-release-1.9/dev/datastream_api.html Data Sources Source是程序读取其输入的位置&#xff0c;您可以使用env.addSource&#xff08;sourceFunction&#xff09;将Source附加到程序中。Fl…
阅读更多...
安全狗V3.512048版本绕过

安全狗V3.512048版本绕过

安全狗安装 安全狗详细安装、遇见无此服务器解决、在windows中命令提示符中进入查看指定文件夹手动启动Apache_安全狗只支持 glibc_2.14 但是服务器是2.17_黑色地带(崛起)的博客-CSDN博客 安全狗 safedogwzApacheV3.5.exe 右键电脑右下角安全狗图标-->选择插件-->安装…
阅读更多...
最新文章

Copyright @ 2022~2023