Can Android imitate Zhihu's creative advertising be played like this?

1. Overview

It seems that I saw a very unique way of advertising display when I was browsing Zhihu some time ago. That is, on the list page, a certain item shows part of the advertising picture behind it, and as the list scrolls, all the pictures will gradually be displayed.

When I first saw it, I wanted to implement it, but I have always been lazy. Some people also asked me how to implement it in the background of the official account. Today I will explain it to you. Of course, some custom Views are not difficult at present, so the explanation in this article will provide some guidance on implementation ideas. I believe it will not be such a boring article. I hope it will be of some help to you.

Well, I can’t find this effect on Zhihu anymore. I tried multiple historical versions but still couldn’t find it. So I can only post the effect picture of the implementation~

The effect diagram is as follows:

Choose 1 from 2, which rendering do you like?

2. Ideas

Okay, let’s put aside other things and determine the goal of this article:

To display a picture in a list:

• Scroll up: Show the top part of the image when it first appears, and show the whole image as you scroll.
• Scroll down: Show the bottom part of the image when it first appears, and show the whole part as you scroll.

In other words, we need to change the displayed part of the image when the list scrolls.

Two points:

• Capture the dy of the list scrolling, whether it is ListView or RecyclerView, I believe this can be done
• The picture shows some changes, we can use canvas.translate

To combine them, we listen to the scrolling dy of the list, pass it to our image control, set the translate, and then draw it.

At this point, the idea is very clear, and this thing can definitely be done.

Preliminary plan: customize a View, draw the bitmap yourself, expose setDy(dy) to the outside world, and then redraw the canvas based on dy offset.

Now that I have a preliminary plan, I am basically not panicking anymore. So what should I think about?

Can we use existing controls, such as ImageView?

Of course you can. This saves us from declaring a property to accept the image. We write a subclass and still use it by setting src.

Let’s inherit ImageView and implement it first.

Implementation

First, let's write a fake list. Since RV is used more and more, let's use RecyclerView.

layout

The main layout file, a RecyclerView is enough:

 <?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 layout file:

 <?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= "This is the 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= "This is a description" /> 
 
 </RelativeLayout>

Very simple, ignore the AdImageViewVersion1 class for now, this will be our specific implementation class.

From the layout file, you can see that we only use one item layout file, and then use visible and gone controls to display different forms.

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 );
 }
 }
 });
 }

Just set the data, Adapter is used here

 compile 'com.zhy:base-rvadapter:3.0.3'  

You can use any Adapter encapsulation class you like.

At this point, a list page is displayed, and every 6 items will be displayed as pictures.

No more screenshots, just imagine...

Now it is officially starting to be realized.

Custom 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;
 } 
 
 // ... some code omitted
 }

Because we want to draw, we convert the drawable into a bitmap here, and then we display the top by default, so we need a minimum offset, which is the height of the control.

We have done all these things in onSizeChanged.

And we scale the bitmap according to the current control width, and store the scaled size in mBitmapRectF for easy drawing.

Then the next step is drawing. Remember that during the drawing process, we mainly use translate to control the drawing area, so we also need to expose a setDy method to the outside world. So, our code is roughly like this:

 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();
 }

When setting Dy, we make a boundary judgment. In the minimum case, we offset -mMinDy to display the bottom of the picture.

***When we use the image height -mMinDy, we show the top part.

So we make a minimum and maximum value judgment on the passed value.

Then when drawing, it is simple, first translate the dy distance, and then draw.

Our custom View part ends here, with very little code~

Combine with RecyclerView

The next step is to pass dy to us when RecyclerView scrolls.

 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());
 }
 }
 }
 });

Through addOnScrollListener listening, when scrolling, get all visible items and find the item that is displaying the picture. Then call setDy, the value of dy is mLinearLayoutManager.getHeight() - view.getTop(), when the view appears from the top, it is 0, when the view reaches the top, it is the height of the current rv.

You can reasonably use the value passed in by setDy to make a movement difference, display the area from top to bottom, etc.

That's it~~

To achieve it in one sentence: keep changing dy when scrolling, and then translate to draw it.

4. Think Again

Looking at this code, it seems that drawableToBitamp looks very unpleasant and is also the part that consumes more memory. Let's think about it again:

Drawable itself can be drawn, why do we need to convert it into a bitmap?

It seems to make sense. ImageView itself draws Drawable. What we need to control is that the drawing range of this Drawable should be large enough and cannot be affected by the width and height of the control itself, causing the image to be flattened.

There seems to be a method:

 drawable.setBounds();

That's easy. Just remove the drawable2bitmap code and use the original drawing directly. The only thing we have to do is to set the bounds and do a translate dy.

Complete code:

 public class AdImageView extends AppCompatImageView {
 // Delete the constructor 
 
 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();
 }
 }

It is achieved with just a short code, which looks much more pleasing to the eye~~

Here is the effect diagram:

The effect picture mainly depends on the words, you know!

Well, this article summarizes:

• When you see an effect, you can first break it down, find the key points, and consider the feasibility for each key point.
• If you determine that every point is feasible, then the basic plan will emerge.
• Once you have a basic plan, don't rush to write it. Think about whether there is room for improvement.

The example is relatively simple, have a nice day ~~