Android 仿知乎創意廣告 廣告還能這麼玩？

本文已在個人公衆號hongyangAndroid原創首發。

1、概述

貌似前段時間刷知乎看到的一種很是有特點的廣告展示方式，即在列表頁，某一個Item顯示背後部分廣告圖，隨着列表滾動，會逐漸展現所有圖片。

剛看到的時候就想實現一哈，一直比較懶，公衆號後臺也有人問如何實現，今天來給你們講解下，固然了，目前一些自定義View已經不算難題，因此本文的講解會作一些實現思路引導，相信不會是那麼枯燥的文章，但願對你們有必定的幫助。

恩，如今知乎上已經找不到該效果了，試了多個歷史版本也沒找到，那隻能貼實現的效果圖了~

效果圖以下：

2選1，你喜歡哪一個效果圖呢~~

2、思路

好了，拋開別的，肯定下本文的目標：

實如今列表中展現某張圖片：

往上滾動：在圖片剛出現時展現頂部部分，隨着滾動部分展現所有 往下滾動：在圖片剛出現時展現底部部分，隨着滾動部分展現所有

換句話說，咱們須要在列表滾動時，改變圖片顯示的部分。

兩個點：

• 捕獲列表滾動的dy，不論是ListView仍是RecyclerView相信這一點都能作到
• 圖片顯示部分變化，咱們能夠利用canvas.translate

結合一下，就是，監聽列表的滾動dy，傳給咱們的圖片控件，設置translate，而後繪製。

到這裏，思路很是清晰，這個東西確定能作了。

初步方案：自定義一個View，本身去繪製bitmap，對外暴露setDy(dy)，而後根據dy作canvas偏移重繪便可。

有了初步方案，基本不慌了，那麼再想一想？

可否利用已有的控件，好比ImageView呢？

確定能夠，這樣省去了咱們去聲明一個接受圖片的屬性，咱們編寫一個子類，依然是經過設置src去使用。

那繼承ImageView實現一波再說。

開始碼代碼前，力推下個人公衆號：

專一於Android的相關技術~

3、實現

首先咱們先寫個假的列表，鑑於RV用的愈來愈多，就用RecyclerView吧。

佈局

主佈局文件，一個RecyclerView便可：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/id_recyclerview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
 />

複製代碼

item佈局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/item_bg" android:gravity="center">

    <com.imooc.rvimageads.AdImageViewVersion1 android:id="@+id/id_iv_ad" android:layout_width="match_parent" android:layout_height="180dp" android:scaleType="matrix" android:src="@mipmap/grsm" android:visibility="gone" />

    <TextView android:layout_margin="12dp" android:id="@+id/id_tv_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="這是title" android:textSize="16dp" android:textStyle="bold" />

    <TextView android:id="@+id/id_tv_desc" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/id_tv_title" android:layout_marginLeft="12dp" android:layout_marginRight="12dp" android:layout_marginBottom="12dp" android:text="這是描述" />

</RelativeLayout>

複製代碼

很簡單，先不用管AdImageViewVersion1類，這將是咱們具體的實現類。 經過佈局文件，能夠看到，咱們只使用了一個item佈局文件，而後經過visible,gone控制展現不一樣形態。

Activity

public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;
    private LinearLayoutManager mLinearLayoutManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mRecyclerView = findViewById(R.id.id_recyclerview);

        List<String> mockDatas = new ArrayList<>();
        for (int i = 0; i < 100; i++) {
            mockDatas.add(i + "");
        }

        mRecyclerView.setLayoutManager(mLinearLayoutManager = new LinearLayoutManager(this));

        mRecyclerView.setAdapter(new CommonAdapter<String>(MainActivity.this,
                R.layout.item,
                mockDatas) {
            @Override
            protected void convert(ViewHolder holder, String o, int position) {
                if (position > 0 && position % 6 == 0) {
                    holder.setVisible(R.id.id_tv_title, false);
                    holder.setVisible(R.id.id_tv_desc, false);
                    holder.setVisible(R.id.id_iv_ad, true);
                } else {
                    holder.setVisible(R.id.id_tv_title, true);
                    holder.setVisible(R.id.id_tv_desc, true);
                    holder.setVisible(R.id.id_iv_ad, false);
                }
            }
        });
}
       
複製代碼

僅僅是設置數據了，Adapter這裏用了

compile 'com.zhy:base-rvadapter:3.0.3'
複製代碼

你能夠隨便用一個你本身喜歡的Adapter封裝類。

到這裏，一個列表頁就顯示出來了，而且每隔6個會顯示成圖片。

不截圖了，腦補下...

如今才正式開始實現。

自定義AdImageView

public class AdImageViewVersion1 extends AppCompatImageView {
    public AdImageViewVersion1(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    private RectF mBitmapRectF;
    private Bitmap mBitmap;

    private int mMinDy;

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

        mMinDy = h;
        Drawable drawable = getDrawable();

        if (drawable == null) {
            return;
        }

        mBitmap = drawableToBitamp(drawable);
        mBitmapRectF = new RectF(0, 0,
                w,
                mBitmap.getHeight() * w / mBitmap.getWidth());

    }


    private Bitmap drawableToBitamp(Drawable drawable) {
        if (drawable instanceof BitmapDrawable) {
            BitmapDrawable bd = (BitmapDrawable) drawable;
            return bd.getBitmap();
        }
        int w = drawable.getIntrinsicWidth();
        int h = drawable.getIntrinsicHeight();
        Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        drawable.setBounds(0, 0, w, h);
        drawable.draw(canvas);
        return bitmap;
    }

	// ... 省略一些代碼
}
複製代碼

由於咱們要繪製，因此這裏咱們把drawable轉成bitmap，而後咱們默認要顯示最底部，因此須要一個最小的偏移，即控件高度。

這些事情，咱們都在onSizeChanged作了。

而且咱們根據當前控件寬度，對bitmap進行了縮放，並將縮放後的尺寸存在了mBitmapRectF中，以便於繪製。

那麼接下來就是繪製了，還記得繪製過程當中，咱們主要利用translate來控制繪製的區域，因此咱們還要對外暴露一個setDy方法，so，咱們的代碼大體是這樣的：

private int mDy;

public void setDy(int dy) {

    if (getDrawable() == null) {
        return;
    }
    mDy = dy - mMinDy;
    if (mDy <= 0) {
        mDy = 0;
    }
    if (mDy > mBitmapRectF.height() - mMinDy) {
        mDy = (int) (mBitmapRectF.height() - mMinDy);
    }
    invalidate();
}

@Override
protected void onDraw(Canvas canvas) {
    if (mBitmap == null) {
        return;
    }
    canvas.save();
    canvas.translate(0, -mDy);
    canvas.drawBitmap(mBitmap, null, mBitmapRectF, null);
    canvas.restore();
}
複製代碼

setDy的時候，咱們作了一個邊界判斷，最小的狀況，咱們偏移-mMinDy，顯示圖片的底部。 最大的時候，咱們偏移圖片高度-mMinDy，顯示頂部部分。

因此咱們對傳入的值作了最小與最大值判斷。

那麼在繪製的時候，就簡單了，先translate dy距離，而後繪製便可。

到這裏咱們的自定義View部分就結束了，代碼不多~

結合RecyclerView

接下來就是在RecyclerView滾動時，給咱們傳入dy便可。

mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
    @Override
    public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
        super.onScrolled(recyclerView, dx, dy);

        int fPos = mLinearLayoutManager.findFirstVisibleItemPosition();
        int lPos = mLinearLayoutManager.findLastCompletelyVisibleItemPosition();
        for (int i = fPos; i <= lPos; i++) {
            View view = mLinearLayoutManager.findViewByPosition(i);
            AdImageViewVersion1 adImageView = view.findViewById(R.id.id_iv_ad);
            if (adImageView.getVisibility() == View.VISIBLE) {
                adImageView.setDy(mLinearLayoutManager.getHeight() - view.getTop());
            }
        }
    }
});
複製代碼

經過addOnScrollListener監聽，當滾動時，拿到全部可見的Item，找出正在顯示圖片的Item。而後調用setDy，dy的值爲mLinearLayoutManager.getHeight() - view.getTop()，當View從最底部出現的時候爲0，當View到達最頂部的時候爲當前rv的高度。

你能夠合理的利用setDy傳入的值，作移動差，顯示區域從上到下等，均可以。

這樣就完成了~~

一句話實現：即滾動時不斷改變dy，而後translate繪製便可。

4、再想一想

到這裏已經實現了，可是你知足了嗎？不在想一想？

咱們回顧下代碼，這個代碼，好像drawableToBitamp看起來很是不爽，也是比較耗內存的部分。咱們再想一想：

自己Drawable就是能繪製的，爲何咱們要轉成bitmap呢？

好像有道理，ImageView自己繪製的就是Drawable，咱們須要控制的就是這個Drawable的繪製範圍要足夠大，不能被控件自己的寬高所影響，致使圖片被壓扁。

好像有那麼一個方法：

drawable.setBounds();
複製代碼

那就簡單了，去除drawable2bitmap的代碼，直接利用本來的繪製便可，咱們惟一要作的就是設置bounds，作一個translate dy便可。

完整代碼：

public class AdImageView extends AppCompatImageView {
    // 刪除構造方法
    
    private int mDx;
    private int mMinDx;

    public void setDx(int dx) {
        if (getDrawable() == null) {
            return;
        }
        mDx = dx - mMinDx;
        if (mDx <= 0) {
            mDx = 0;
        }
        if (mDx > getDrawable().getBounds().height() - mMinDx) {
            mDx = getDrawable().getBounds().height() - mMinDx;
        }
        invalidate();
    }

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

    public int getDx() {
        return mDx;
    }

    @Override
    protected void onDraw(Canvas canvas) {

        Drawable drawable = getDrawable();
        int w = getWidth();
        int h = (int) (getWidth() * 1.0f / drawable.getIntrinsicWidth() * drawable.getIntrinsicHeight());
        drawable.setBounds(0, 0, w, h);
        canvas.save();
        canvas.translate(0, -getDx());
        super.onDraw(canvas);
        canvas.restore();
    }
}
複製代碼

短短的代碼就實現了，這樣看起來順眼多了~~

再貼下效果圖：

效果圖主要看字，你懂的！

好了，本篇總結：

• 看到當看一個效果，能夠先對它進行拆分，找出關鍵點，針對每一個關鍵點，考慮可行性。
• 若是肯定每一個點均可行，那麼基本的方案就出來了。
• 有了基本的方案，不要着急寫，再想一想還有無改善空間。

例子比較簡單，have a nice day ~~

github.com/hongyangAnd…