Android 仿知乎创意广告 广告还能这么玩？

时间  2019-11-09
标签 android 创意 广告 还能 栏目 Android 繁體版
原文   原文链接

本文已在个人公众号hongyangAndroid原创首发。php

1、概述

貌似前段时间刷知乎看到的一种很是有特点的广告展示方式，即在列表页，某一个Item显示背后部分广告图，随着列表滚动，会逐渐展现所有图片。java

刚看到的时候就想实现一哈，一直比较懒，公众号后台也有人问如何实现，今天来给你们讲解下，固然了，目前一些自定义View已经不算难题，因此本文的讲解会作一些实现思路引导，相信不会是那么枯燥的文章，但愿对你们有必定的帮助。android

恩，如今知乎上已经找不到该效果了，试了多个历史版本也没找到，那只能贴实现的效果图了~git

效果图以下：github

2选1，你喜欢哪一个效果图呢~~canvas

2、思路

好了，抛开别的，肯定下本文的目标：vim

实如今列表中展现某张图片：bash

往上滚动：在图片刚出现时展现顶部部分，随着滚动部分展现所有 往下滚动：在图片刚出现时展现底部部分，随着滚动部分展现所有app

换句话说，咱们须要在列表滚动时，改变图片显示的部分。ide

两个点：

  • 捕获列表滚动的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…

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程