900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > Android 仿京东淘宝 商品详情页 商品图片效果

Android 仿京东淘宝 商品详情页 商品图片效果

时间:2021-01-11 07:39:39

相关推荐

Android 仿京东淘宝 商品详情页 商品图片效果

最近重构商品,产品要求,按照淘宝京东来。。。。

成品如图这个效果

思路就是监听外边ScrollView的滑动监听,然后给上边图片设置margin,二话不说上代码

简单的界面布局

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="/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鸟

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。