动态头像 Android 实现,Android仿京东金融首页头像效果
1.介绍
看下效果图,gif录的有些卡顿,在真机上运行效果很好。
2.实现
很有意思的一个效果,原理其实很简单,就是通过监听ScrollView在Y轴的滑动距离,然后在代码中动态设置头像的位置和大小。
public class MainActivity extends AppCompatActivity {
private CircleImageView ivPortrait;
private ObservableScrollView scrollView;
private ViewGroup.MarginLayoutParams marginLayoutParams;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
ivPortrait = (CircleImageView) findViewById(R.id.iv_portrait);
scrollView = (ObservableScrollView) findViewById(R.id.scrollView);
marginLayoutParams = new ViewGroup.MarginLayoutParams(ivPortrait.getLayoutParams());
scrollView.setScrollViewListener(new ObservableScrollView.ScrollViewListener() {
@Override
public void onScrollChanged(ObservableScrollView scrollView, int x, int y, int oldx, int oldy) {
// 设置头像距离顶部的距离
int top = dp2px(70) - y;
if (top < dp2px(10)) {
// 固定在标题栏
marginLayoutParams.setMargins(dp2px(20), dp2px(10), 0, 0);
} else {
// 向上移动
marginLayoutParams.setMargins(dp2px(20), dp2px(70) - y, 0, 0);
}
// 根据向上滑动的距离设置头像的大小
FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(marginLayoutParams);
// 头像最大为45dp,最小为30dp
int height = dp2px(45) - y < dp2px(30) ? dp2px(30) : dp2px(45) - y;
layoutParams.height = height;
layoutParams.width = height;
ivPortrait.setLayoutParams(layoutParams);
}
});
}
private int dp2px(float dp) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp,
getResources().getDisplayMetrics());
}
}
布局文件
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFF">
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#F2F4F7">
...
android:id="@+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:overScrollMode="never"
android:scrollbars="none">
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#F2F4F7">
...
android:layout_width="match_parent"
android:layout_height="1000dp" />
android:id="@+id/iv_portrait"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="70dp"
android:src="@mipmap/ic_portrait" />
原生的ScrollView是不支持滑动监听的,需要自定义一个ObservableScrollView。
public class ObservableScrollView extends ScrollView {
private ScrollViewListener scrollViewListener;
public ObservableScrollView(Context context) {
super(context);
}
public ObservableScrollView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public ObservableScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public void setScrollViewListener(ScrollViewListener scrollViewListener) {
this.scrollViewListener = scrollViewListener;
}
@Override
protected void onScrollChanged(int x, int y, int oldx, int oldy) {
super.onScrollChanged(x, y, oldx, oldy);
if (scrollViewListener != null) {
scrollViewListener.onScrollChanged(this, x, y, oldx, oldy);
}
}
public interface ScrollViewListener {
void onScrollChanged(ObservableScrollView scrollView, int x, int y, int oldx, int oldy);
}
}
3.写在最后
欢迎同学们吐槽评论,如果你觉得本篇博客对你有用,那么就留个言或者顶一下吧(^-^)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
动态头像 Android 实现,Android仿京东金融首页头像效果相关推荐
- Android 仿京东金融首页头像效果
1.介绍 看下效果图,gif录的有些卡顿,在真机上运行效果很好. 2.实现 很有意思的一个效果,原理其实很简单,就是通过监听ScrollView在Y轴的滑动距离,然后在代码中动态设置头像的位置和大小. ...
- iOS开发 -- UIScrollView 仿京东金融首页效果
京东金融效果如下: 代码地址:https://github.com/bybyWind/ImitateJDjrApp.git 先搭建三个UIScrollVIew: @property(nonatomic ...
- Android之高仿京东APP首页“京东快报”自动向上滚动的广告条
转载请标明出处: http://blog.csdn.net/hai_qing_xu_kong/article/details/51013562 本文出自:[顾林海的博客] ##前言 上次在京东APP上 ...
- android app开发混合开发,混合开发入门 Vue结合Android/iOS开发仿京东项目App
download:混合开发入门 Vue结合Android/iOS开发仿京东项目App 无需原生开发基础,也能完美呈现京东商城.本课程融合vue.Android.IOS等目前流行的前端和移动端技术,混合 ...
- android仿优酷菜单,Android编程实现仿优酷旋转菜单效果(附demo源码)
本文实例讲述了Android编程实现仿优酷旋转菜单效果.分享给大家供大家参考,具体如下: 首先,看下效果: 不好意思,不会制作动态图片,只好上传静态的了,如果谁会,请教教我吧. 首先,看下xml文件: ...
- Android之高仿QQ6.6.0侧滑效果(背景动画、透明+沉浸式状态栏、渐变效果)
根据需求实现类似QQ侧滑效果,之前看到过很多实现方式通过SlidingMenu,但是既然官方推出了自己的专属控件,那么使用DrawerLayout就是不二选择.且看下文. 一.先来看看官方文档解释 D ...
- Android 仿今日头条首页标题栏效果
今天带来的是仿今日头条首页的联动滑动效果,废话不多说,先上效果图: 思路: 做这个我们需要实现的效果有 1.滑动内容区域,标题栏会有变化来显示当前所处的位置. 2.点击标题栏,内容区域也会随着滑动并跳 ...
- ios开发oc高仿京东金融白条额度余额的 ios开发水波纹 ios开发水正弦曲线波纹 ios开发雷达扫描的动画效果
ios开发oc高仿京东金融白条额度余额的 ios开发水波纹 ios开发水正弦曲线波纹 直接上代码,复制粘贴就可以 vc里的 WaterRippleView *topView = [[Water ...
- ios开发oc高仿京东金融白条额度余额的 ios开发水波纹 ios开发水正弦曲线波纹 ios开发雷达扫描的动画效果...
ios开发oc高仿京东金融白条额度余额的 ios开发水波纹 ios开发水正弦曲线波纹 直接上代码,复制粘贴就可以 vc里的 WaterRippleView *topView = [[Water ...
最新文章
- iBATIS配置文件的特殊使用方法
- YTU 2610: A改错题--体检情况分析
- linux命令scp
- python语言及其应用电子版翁正秋_Python语言及其应用
- 小东《迷路的情人》MV
- leetcode 474. Ones and Zeroes | 474. 一和零(双约束背包问题)
- 在 .NET 中创建对象的几种方式的对比
- hook NSArray 方法在debug模式下会崩溃, 在release模式下会返回nil
- php 手机端播放器,用JS代码适配电脑端和手机端播放器代码
- centos7 查看oracle运行日志_Linux(CentOS7)部署系列---常规应用部署方案
- 1月10日云栖精选夜读:专访金榕:四年蜕变,阿里iDST是如何登上浪潮之巅的?...
- 编译原理 上下文无关文法
- 深度学习与计算机视觉教程(15) | 视觉模型可视化与可解释性(CV通关指南·完结)
- 【树莓派 + 深度学习 + Python】从零开始做一个你画AI猜的小游戏
- Java:(游戏:豆机)
- Text file busy解决方法
- 01-前端工程化概述
- 【嵌入式开发】开发板设置系统时间
- 单细胞基础教程:跨条件整合分析
- 4G Cat.1跟通常我们说的4G有什么区别
热门文章
- 推荐系统和搜索引擎的关系
- python学习笔记之property
- [Project Euler] 来做欧拉项目练习题吧: 题目013
- 网络流量统计using ADB
- Android将ScrollView移动到最底部
- [Ubuntu] ubuntu13.04 从php5.4降级到php5.3
- jquery.ui.sortable 笔记
- iphone 调试技巧
- 等待3月份的beta1
- pycharm安装javascript插件_IDEA必备插件系列-Rainbow