仿京东商品详情滑动头部折叠效果

之前看到京东安卓版商品详情页滑动时候头部折叠进去的效果感觉好舒服 于是就想知道怎么实现的

• 先来看看京东的效果

jd.gif

• 不知道京东是怎么实现的，自己水平又低，我只能想到的是滑动速度不一致导致的视觉差 于是就这么做了 请忽略我丑丑的布局...

ViewTreeObserver viewTreeObserver = ivShopPhoto.getViewTreeObserver();
        viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                llGoodDetail.getViewTreeObserver().removeGlobalOnLayoutListener(
                        this);
                height = DeviceUtil.px2dip(ShopDetailActivity.this, ivShopPhoto.getHeight());
                mSvShop.setOnMyScrollChangeListener(new MyNestedScrollView.ScrollInterface() {
                    @Override
                    public void onScrollChange(int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                        ivShopPhoto.setTranslationY(-scrollY / 3);
                        changeTitle(scrollY);
                    }
                });
            }

主要是setTranslationY让图片的偏移量为负的scrollview的三分之一

ivShopPhoto.setTranslationY(-scrollY / 3);

至于下面的changeTitle则与 本文无关 是监听滑动时候标题栏的渐变 ，顺便纪录下吧

private void changeTitle(int scrollY) {
        if (scrollY <= 0) {   //设置标题的背景颜色
            llGoodDetail.setBackgroundColor(Color.argb(0, 255, 255, 255));
            tvShopTitle.setTextColor(Color.argb(0, 1, 24, 28));
            ivBack.setImageResource(R.drawable.icon_fanhui);
            ivShare.setImageResource(R.drawable.icon_fenxiang);
        } else if (scrollY > 0 && scrollY <= height) {
            //    滑动距离小于图的高度时，设置背景和字体颜色颜色透明度渐变
            float scale = (float) scrollY / height;
            float alpha = (255 * scale);
            tvShopTitle.setTextColor(Color.argb((int) alpha, 1, 24, 28));
            llGoodDetail.setBackgroundColor(Color.argb((int) alpha, 255, 255, 255));
            ivBack.setAlpha(alpha);
            ivShare.setAlpha(alpha);
        } else {    //滑动到图下面设置普通颜色
            llGoodDetail.setBackgroundColor(Color.argb(255, 255, 255, 255));
            tvShopTitle.setTextColor(Color.argb(255, 1, 24, 28));
            ivBack.setImageResource(R.drawable.iv_back);
            ivShare.setImageResource(R.drawable.iv_share);
        }
    }

下面是我的xml文件

<RelativeLayout
        android:id="@+id/ll_good_detail"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:layout_gravity="top"
        android:background="#00000000">

        <ImageView
            android:id="@+id/iv_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_margin="10dp"
            android:src="@drawable/icon_fanhui"/>

        <TextView
            android:id="@+id/tv_good_detail_title_good"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="商品详情"
            android:textColor="#00000000"
            android:textSize="18sp"/>

        <ImageView
            android:id="@+id/iv_share"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_margin="10dp"
            android:src="@drawable/icon_fenxiang"/>
    </RelativeLayout>

记得在进来的时候初始化

 llGoodDetail.setBackgroundColor(Color.argb(0, 255, 255, 255));
 tvShopTitle.setTextColor(Color.argb(0, 1, 24, 28));

• 回归正题，给图片设置了setTranslationY(-scrollY / *)到底可行吗？答案是可以的，看看下面的效果图

after_error.gif

可以看出，是实现效果了，虽然不怎么明显（这是因为页面内容不多所以滑动的距离太短，还有就是录制gif感觉跟看到的不一样了），但是滑动的时候会出现一段空白，这个呢是因为滑动速率不同造成的，怎么解决呢，可以给布局中添加一个透明的图片高度的view，造成一种假象，看起来ImageView在ScrollView中，其实则是image在下面，上面是个透明的占位图，看看布局代码就知道了

布局.png

• 再看看最终的效果

after.gif

• 再放出我之前没用这个的效果，其实gif录出来感觉效果好些没那么明显，实际用眼睛看起来，对比还是很强的，明显刚才那个效果就很舒服，感觉有了点灵气。 到这里就完了 看起来效果是相似的 也不知道京东怎么做的 但是肯定不是这样的

normal.gif