Android仿京东金融首页头像效果

概述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); } else {  // 向上移动  marginLayoutParams.setmargins(dp2px(20),dp2px(70) - y,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"> <@R_502_4614@Layout androID:layout_wIDth="match_parent" androID:layout_height="50dp" androID:background="#F2F4F7"> ... </@R_502_4614@Layout> <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"> <@R_502_4614@Layout  androID:layout_wIDth="match_parent"  androID:layout_height="80dp"  androID:background="#F2F4F7">  ... </@R_502_4614@Layout> <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 oldy) { super.onScrollChanged(x,y,oldx,oldy); if (scrollVIEwListener != null) { scrollVIEwListener.onScrollChanged(this,x,oldy); } } public interface ScrollVIEwListener { voID onScrollChanged(ObservableScrollVIEw scrollVIEw,int oldy); }}

3.写在最后

欢迎同学们吐槽评论，如果你觉得本篇博客对你有用，那么就留个言或者顶一下吧(＾－＾)

完整的Demo下载

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android仿京东金融首页头像效果全部内容，希望文章能够帮你解决Android仿京东金融首页头像效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。