欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2023-12-22 19:03:40
1.介绍 看下效果图,gif录的有些卡顿,在真机上运行效果很好。 2.实现 很有意思的一个效果,原理其实很简单,就是通过监听scrollview在y轴的滑动距离,...

1.介绍

看下效果图,gif录的有些卡顿,在真机上运行效果很好。

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

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

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

上一篇:

下一篇: