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());
 }
}

布局文件

<?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下载

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