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.MyScrollView
        android:id="@+id/scrollView"
        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="wrap_content">
                <ImageView
                    android:id="@+id/im_top"
                    android:layout_width="match_parent"
                    android:layout_height="300dp"
                    android:scaleType="fitXY"
                    android:src="@drawable/image"/>
            </RelativeLayout>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:text="11111"
                android:gravity="center"/>
            <View style="@style/line"/>
            <TextView
                android: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;
    }

    @Override
    protected 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;
    @Override
    public void setContentView() {
        setContentView(R.layout.activity_scroll1);
    }

    @Override
    protected void findViewById() {
        im_top = (ImageView) findViewById(R.id.im_top);
        scrollView = (MyScrollView) findViewById(R.id.scrollView);


        im_top.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public 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);

    }

    @Override
    protected void initView() {


    }

    /**
     * 滑动回调
     * @param y
     */
    @Override
    public 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鸟