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 

布局文件

     ...   ... 

原生的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下载

以上就是Android仿京东金融首页头像效果的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » 移动