Android 仿京东淘宝 商品详情页 商品图片效果
最近重构商品,产品要求,按照淘宝京东来。。。。
成品如图这个效果
思路就是监听外边ScrollView的滑动监听,然后给上边图片设置margin,二话不说上代码
简单的界面布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><com.zhangd.zhangdtest.view.MyScrollViewandroid:id="@+id/scrollView"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#fff"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><ImageViewandroid:id="@+id/im_top"android:layout_width="match_parent"android:layout_height="300dp"android:scaleType="fitXY"android:src="@drawable/image"/></RelativeLayout><TextViewandroid:layout_width="match_parent"android:layout_height="40dp"android:text="11111"android:gravity="center"/><View style="@style/line"/><TextViewandroid:layout_width="match_parent"android:layout_height="40dp"android:text="11111"android:gravity="center"/><View style="@style/line"/>......</LinearLayout></com.zhangd.zhangdtest.view.MyScrollView></LinearLayout>
因为Scrollview没有直接的监听滑动距离的方法,只能自己重写一个简单的MyScrollView,通过重写onScrollChanged方法来实时获取滑动的距离
MyScrollView.java
public class MyScrollView extends ScrollView {private ScrollViewListener scrollViewListener = null;public interface ScrollViewListener {void onScrollChanged(int y);}public MyScrollView(Context context) {super(context);}public MyScrollView(Context context, AttributeSet attrs,int defStyle) {super(context, attrs, defStyle);}public MyScrollView(Context context, AttributeSet attrs) {super(context, attrs);}public void setScrollViewListener(ScrollViewListener scrollViewListener) {this.scrollViewListener = scrollViewListener;}@Overrideprotected void onScrollChanged(int x, int y, int oldx, int oldy) {super.onScrollChanged(x, y, oldx, oldy);if (scrollViewListener != null) {scrollViewListener.onScrollChanged(y);}}
}
然后界面Activity里边,通过比较滑动的距离和图片的高,在滑动的距离比图片高度小的时候,设置图片的margin
public class ScrollViewActivity1 extends BaseActivity implements MyScrollView.ScrollViewListener {private ImageView im_top;private MyScrollView scrollView;private int imageHeight;@Overridepublic void setContentView() {setContentView(R.layout.activity_scroll1);}@Overrideprotected void findViewById() {im_top = (ImageView) findViewById(R.id.im_top);scrollView = (MyScrollView) findViewById(R.id.scrollView);im_top.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {@Overridepublic void onGlobalLayout() {imageHeight = im_top.getHeight();if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {im_top.getViewTreeObserver().removeGlobalOnLayoutListener(this);} else {im_top.getViewTreeObserver().removeOnGlobalLayoutListener(this);}}});// 设置滑动监听scrollView.setScrollViewListener(this);}@Overrideprotected void initView() {}/*** 滑动回调* @param y*/@Overridepublic void onScrollChanged(int y) {if (y < imageHeight) {setMargins(im_top, 0, y / 2, 0, -y / 2);}}public static void setMargins (View v, int l, int t, int r, int b) {if (v.getLayoutParams() instanceof ViewGroup.MarginLayoutParams) {ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) v.getLayoutParams();p.setMargins(l, t, r, b);v.requestLayout();}}
}
OK鸟
Android 仿京东淘宝 商品详情页 商品图片效果相关推荐
- Android 仿京东淘宝拼多多的商品分类,双列表联动,RecyclerView嵌套
淘宝京东的相对简单很多,两个RecyclerView就可实现了. 现在要做的是右边滑动的时候左边跟着联动,如下图: 思路:左右肯定都是RecyclerView了,至于中间的图片嘛当然也是Recycle ...
- Android 仿京东淘宝多规格选择
上图直接点,下次在修改理论,因为要下班了 这是淘宝的规格选择,我随便选择了一个,将就着看吧 然后再来看看我的效果 这个我是在CSDN上看的一篇文章 我把地址贴出来这是原文地址我是在他的基础改的 我做了 ...
- Android——仿京东淘宝分类页面
效果图: json在assets下 添加依赖: compile 'com.squareup.okhttp3:okhttp:3.8.1' compile 'com.facebook.fresco:fre ...
- 微信小程序仿京东淘宝商品排序
微信小程序仿京东淘宝商品排序 效果图如下所示 仿京东微信小程序视频请加QQ:1010753897 下载地址:https://download.csdn.net/download/qq_43764578 ...
- 菜鸟窝-仿京东淘宝项目学习笔记(二)ToolBar的基本使用
本篇知识点均来自于菜鸟窝-仿京东淘宝实战项目视频中 今天继续仿京东淘宝项目的学习,第二天,学习ToolBar的基本使用,本篇记录视频中一些重要的笔记 笔记一:ToolBar的一些重要属性 xml st ...
- 弘辽科技:如何制作高转化的淘宝宝贝详情页?只需三招!
原标题<弘辽科技:如何制作高转化的淘宝宝贝详情页?只需三招!> 商品详情页是影响店铺转化的重要的因素之一,很多商家都觉得宝贝详情页很难制作,其实制作宝贝详情页还是很简单的,首先我们就要找准 ...
- 仿京东淘宝等首页广告弹窗广告 dialog
记录贴 防止以后忘记. 上图 1.dialog布局 图片随便找的 <?xml version="1.0" encoding="utf-8"?> &l ...
- HTML5期末大作业:淘宝网站设计——仿2018淘宝首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码
HTML5期末大作业:淘宝网站设计--仿2018淘宝首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作 ...
- HTML5期末大作业:淘宝网站设计——仿2021淘宝首页(1页) 大学生网页制作教程 表格布局网页模板 学生HTML静态水网页设计作业成品 简单网页制作代码 学生商城网页作品免费设计
HTML5期末大作业:淘宝网站设计--仿2021淘宝首页(1页) 大学生网页制作教程 表格布局网页模板 学生HTML静态水网页设计作业成品 简单网页制作代码 学生商城网页作品免费设计 常见网页设计作业 ...
最新文章
- 独家 | 如何创建用于离线估算业务指标的测试集?(附代码链接)
- HDLC和 PPP的实验
- Java中对象的比较 == 和 equals()
- 十六进制数用int吗_你真的精通C语言吗?来解这十道C语言迷题试试吧!
- python可以做什么工作-济南大数据可以做哪些岗位
- IDEA如何添加项目启动参数
- STL总结之list
- LordPe dump进程内存实现
- 《场景革命》读书笔记
- JavaSE学习笔记之网络编程
- 【python】腾讯云+python SDK免费发送短信
- 内联(inlining)
- ubuntu 移除PPA
- 小白读《锋利的jQuery(第2版)》第五章学习笔记(表单、表格)
- 未来老婆查询生成器威信小程序源码
- 面试官:你期望薪资是多少?这样回答让你多拿3000
- GBase 8a MPP Cluster基本部署组网方案介绍
- 开发人员必备电子书下载
- Windows下给GitHub 配置 GIT 工具时密匙添加问题
- gnuplot 入门教程之3D绘图