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

2023-11-07 23:50
文章标签 android 滚动 头像 京东 头部 动态变化

本文主要是介绍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 仿京东头部滚动头像动态变化的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/366818。

相关文章

html 滚动条滚动过快会留下边框线的解决方案

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》：本文主要介绍了html滚动条滚动过快会留下边框线的解决方案，解决方法很简单，详细内容请阅读本文，希望能对你有所帮助... 滚动条滚动过快时，会留下边框线但其实大部分时候是这样的，没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行
阅读更多...
Android学习总结之Java和kotlin区别超详细分析

Android学习总结之Java和kotlin区别超详细分析

《Android学习总结之Java和kotlin区别超详细分析》Java和Kotlin都是用于Android开发的编程语言,它们各自具有独特的特点和优势,：本文主要介绍Android学习总结之Ja... 目录一、空安全机制真题 1：Kotlin 如何解决 Java 的 NullPointerExceptio
阅读更多...
Python程序的文件头部声明小结

Python程序的文件头部声明小结

《Python程序的文件头部声明小结》在Python文件的顶部声明编码通常是必须的,尤其是在处理非ASCII字符时,下面就来介绍一下两种头部文件声明,具有一定的参考价值,感兴趣的可以了解一下... 目录一、# coding=utf-8二、#!/usr/bin/env python三、运行Python程序四、
阅读更多...
uniapp小程序中实现无缝衔接滚动效果代码示例

uniapp小程序中实现无缝衔接滚动效果代码示例

《uniapp小程序中实现无缝衔接滚动效果代码示例》：本文主要介绍uniapp小程序中实现无缝衔接滚动效果的相关资料,该方法可以实现滚动内容中字的不同的颜色更改,并且可以根据需要进行艺术化更改和自... 组件滚动通知只能实现简单的滚动效果，不能实现滚动内容中的字进行不同颜色的更改，下面实现一个无缝衔接的滚动
阅读更多...
Android NDK版本迭代与FFmpeg交叉编译完全指南

Android NDK版本迭代与FFmpeg交叉编译完全指南

《AndroidNDK版本迭代与FFmpeg交叉编译完全指南》在Android开发中,使用NDK进行原生代码开发是一项常见需求,特别是当我们需要集成FFmpeg这样的多媒体处理库时,本文将深入分析A... 目录一、android NDK版本迭代分界线二、FFmpeg交叉编译关键注意事项三、完整编译脚本示例四
阅读更多...
Android与iOS设备MAC地址生成原理及Java实现详解

Android与iOS设备MAC地址生成原理及Java实现详解

《Android与iOS设备MAC地址生成原理及Java实现详解》在无线网络通信中,MAC（MediaAccessControl）地址是设备的唯一网络标识符,本文主要介绍了Android与iOS设备M... 目录引言1. MAC地址基础1.1 MAC地址的组成1.2 MAC地址的分类2. android与I
阅读更多...
Android 实现一个隐私弹窗功能

Android 实现一个隐私弹窗功能

《Android实现一个隐私弹窗功能》：本文主要介绍Android实现一个隐私弹窗功能,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧... 效果图如下：1. 设置同意、退出、点击用户协议、点击隐私协议的函数参数2. 《用户协议》、《隐私政策》设置成可点击的，且颜色要区分出来res/l
阅读更多...
Android实现一键录屏功能(附源码)

Android实现一键录屏功能(附源码)

《Android实现一键录屏功能(附源码)》在Android5.0及以上版本,系统提供了MediaProjectionAPI,允许应用在用户授权下录制屏幕内容并输出到视频文件,所以本文将基于此实现一个... 目录一、项目介绍二、相关技术与原理三、系统权限与用户授权四、项目架构与流程五、环境配置与依赖六、完整
阅读更多...
Android 12解决push framework.jar无法开机的方法小结

Android 12解决push framework.jar无法开机的方法小结

《Android12解决pushframework.jar无法开机的方法小结》：本文主要介绍在Android12中解决pushframework.jar无法开机的方法,包括编译指令、框架层和s... 目录1. android 编译指令1.1 framework层的编译指令1.2 替换framework.ja
阅读更多...
Android开发环境配置避坑指南

Android开发环境配置避坑指南

《Android开发环境配置避坑指南》本文主要介绍了Android开发环境配置过程中遇到的问题及解决方案,包括VPN注意事项、工具版本统一、Gerrit邮箱配置、Git拉取和提交代码、MergevsR... 目录网络环境：VPN 注意事项工具版本统一：android Studio & JDKGerrit的邮
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2