Android仿京东金融首页头像效果
程序员文章站
2023-12-22 19:03:40
1.介绍
看下效果图,gif录的有些卡顿,在真机上运行效果很好。
2.实现
很有意思的一个效果,原理其实很简单,就是通过监听scrollview在y轴的滑动距离,...
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()); } }
布局文件
<?xml version="1.0" encoding="utf-8"?> <framelayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#fff"> <linearlayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <relativelayout android:layout_width="match_parent" android:layout_height="50dp" android:background="#f2f4f7"> ... </relativelayout> <com.yl.jdfinanceindex.observablescrollview android:id="@+id/scrollview" android:layout_width="match_parent" android:layout_height="match_parent" android:overscrollmode="never" android:scrollbars="none"> <linearlayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <relativelayout android:layout_width="match_parent" android:layout_height="80dp" android:background="#f2f4f7"> ... </relativelayout> <view android:layout_width="match_parent" android:layout_height="1000dp" /> </linearlayout> </com.yl.jdfinanceindex.observablescrollview> </linearlayout> <com.yl.jdfinanceindex.circleimageview 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" /> </framelayout>
原生的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.写在最后
欢迎同学们吐槽评论,如果你觉得本篇博客对你有用,那么就留个言或者顶一下吧(^-^)
完整的demo下载
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。