仿知乎广告效果

仿知乎广告的效果，先看效果图

效果如下：

向上滑动，图片的头部先出来，然后随着滚动，也一起滚动，到图片滑出屏幕时候，图片内部也到达底部。

向下滑动，图片的底部先出来，然后随着滚动，也一起滚动，到图片滑出屏幕时候，图片内部也到达头部。

所以有几个要点

1， 图片内部肯定是使用canvas.translate

2，图片随着list滑动而滑动

3， 图片要设置属性 android:scaleType=”matrix”

第一步：所以先自定义一个ImageView，根据list传进来的距离来translate

public class ZhiHuImageView extends AppCompatImageView {

     /**
     * 测量的实际最小高度
     */
    private int mMinDx;
    /**
     * 移动的距离
     */
    private int mDx;

    public ZhiHuImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mMinDx = h;
    }

    /**
     * 暴露给外界来设置移动距离的
     * @param dx  滑动的距离
     */
    public void setDy(int dx){
        /**
         * 拿到图片的Drawable，判空处理
         */
        if(getDrawable() == null){
            return;
        }
        //需要移动的距离
        mDx = dx - mMinDx;

        //滑动距离 必须大于0
        if (mDx <= 0) {
            mDx = 0;
        }
        //图片滑动最大距离  =  图片实际高度   -   显示的最小高度（xml布局中设置的高度）
        if (mDx > getDrawable().getBounds().height() - mMinDx) {
            mDx = getDrawable().getBounds().height() - mMinDx;
        }

        //每次算好距离开始重绘
        invalidate();
    }

    public int getDx(){
        return mDx;
    }

    @Override
    protected void onDraw(Canvas canvas) {

        Drawable drawable = getDrawable();
        if(drawable == null){
            Log.e("Tag","NULL=drawable");
            return;
        }
        int w = getWidth();
        /**
         * 高度  = （宽度/实际宽度）*实际高度
         * 因为宽度是match的，getIntrinsicWidth()获得是固有宽度
         */
        int h = (int) (getWidth() * 1.0f / drawable.getIntrinsicWidth() * drawable.getIntrinsicHeight());
        drawable.setBounds(0, 0, w, h);
        Log.e("Tag","h="+h);
        Log.e("Tag","getIntrinsicHeight="+drawable.getIntrinsicHeight());
        Log.e("Tag","getDx="+mDx);
        //锁画布
        canvas.save();
        //画布原点移动到新的坐标
        canvas.translate(0, -getDx());
        super.onDraw(canvas);
        canvas.restore();
    }
}

第二步：list传递滑动距离传递

适配器adapter用的是BaseQuickAdapter：

<code>    //代码省略
    if (position > 0 && position % 4 == 0) {
            //每隔4个显示
            helper.setVisible(R.id.ll_item, false);
            helper.setVisible(R.id.zh_img, true);
            String url ="http://imgstore04.cdn.sogou.com/app/a/100520024/877e990117d6a7ebc68f46c5e76fc47a";
            String url1 ="https://raw.githubusercontent.com/hongyangAndroid/demo_rvadimage/master/rvimageads/src/main/res/mipmap-xxhdpi/gril.jpg";
            zhiHuImageView = helper.getView(R.id.zh_img);
            Glide.with(mContext)
                    .load(url)
                    .into(zhiHuImageView);
        } else {
            helper.setVisible(R.id.ll_item, true);
            helper.setVisible(R.id.zh_img, false);
        }
      //代码省略</code>
<code>核心方法addOnScrollListener，
</code>
<code> mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
                    @Override
                    public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                        super.onScrolled(recyclerView, dx, dy);
                        //第一个可见item
                        int fPos = linearLayoutManager.findFirstVisibleItemPosition();
                        //最后个可见item
                        int lPos = linearLayoutManager.findLastCompletelyVisibleItemPosition();
                        for (int i = fPos; i <= lPos; i++) {
                            //从可见的item找到显示的图片的item
                            View view = linearLayoutManager.findViewByPosition(i);
                            ZhiHuImageView adImageView = (ZhiHuImageView) view.findViewById(R.id.zh_img);
                            if (adImageView.getVisibility() == View.VISIBLE) {
                                adImageView.setDy(linearLayoutManager.getHeight() - view.getTop());
                                Log.e("Tag","linearLayoutManager.getHeight()=="+linearLayoutManager.getHeight());
                                Log.e("Tag","view.getTop()=="+view.getTop());
                            }
                        }
                    }
                });</code>

第三步：item的布局

android:scaleType=”matrix” 设置图片显示方式为左上原点绘制显示

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:fresco="http://schemas.android.com/apk/res-auto"
              android:id="@+id/ll_one_item"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:background="@drawable/ripple_one_item_bg"
              android:orientation="vertical"
              android:paddingLeft="5dp"
              android:paddingTop="5dp">
    <com.hu.test.wight.ZhiHuImageView
        android:id="@+id/zh_img"
        android:scaleType="matrix"
        android:visibility="gone"
        android:src="@mipmap/grsm"
        android:layout_width="match_parent"
        android:layout_height="200dp"/>
    <LinearLayout
        android:id="@+id/ll_item"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <com.facebook.drawee.view.SimpleDraweeView
            android:id="@+id/iv_one_photo"
            android:layout_width="100dp"
            android:layout_height="132dp"
            android:layout_marginRight="12dp"
            android:background="#f2f4f5"
            android:scaleType="fitXY"
            android:transitionName="@string/transition_movie_img"
            fresco:placeholderImage="@mipmap/load"
            />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginRight="12dp"
            android:orientation="vertical">

            <!--电影名-->
            <TextView
                android:id="@+id/tv_one_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:gravity="center"
                android:maxLines="1"
                android:textColor="#ff333333"
                android:textSize="17sp"
                android:textStyle="bold"/>

            <!--导演-->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="2dp"
                android:layout_marginTop="2dp"
                android:orientation="horizontal">

                <LinearLayout
                    android:layout_width="43dp"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="导演："/>

                    <View
                        android:layout_width="28dp"
                        android:layout_height="2dp"
                        android:layout_marginTop="2dp"
                        android:background="@color/colorPrimary"/>

                </LinearLayout>

                <TextView
                    android:id="@+id/tv_one_directors"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:ellipsize="end"
                    android:maxLines="1"
                    />
            </LinearLayout>

            <!--主演-->

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="主演："/>

                <TextView
                    android:id="@+id/tv_one_casts"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:ellipsize="end"
                    android:maxLines="2"
                    />

            </LinearLayout>

            <TextView
                android:id="@+id/tv_one_genres"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="2dp"
                android:layout_marginTop="2dp"
                android:ellipsize="end"
                android:maxLines="1"
                />

            <TextView
                android:id="@+id/tv_one_rating_rate"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:maxLines="1"
                />
        </LinearLayout>

    </LinearLayout>

    <View
        android:id="@+id/view_color"
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:layout_marginLeft="112dp"
        android:layout_marginTop="5dp"/>
</LinearLayout>

基本就完成了知乎广告的效果了