仿知乎广告

仿知乎滑动广告

前几天刷知乎的时候被一条广告给惊艳住了，在一个item中通过滑动展示了一张完整的图片，而且图片有一种不随着屏幕滚动的错觉，细想一下感觉代码简单，但是这种创意牛掰啊。果然过了两天公众号就推送了实现文章，不过效果和实现方式不是我想要的，元旦放假无聊写一个玩下

先上效果图 

---

实现思路

思路挺简单imageView不完全展示图片，等滑动时给canvas设置一个相同的偏移量，随着imageview往下滑动，canvas就往下绘制图片的剩余部分，从而造成图片不动的错觉。 
通过监听listview的滑动再把偏移量设置给imageview这种方法也可以实现但是使用起来太麻烦。因为这个功能是imageview自带的，没有必要通过外界传过来，直接获取在屏幕中位置就能得出偏移量。

 
先说要实现的效果，滚动的item从屏幕上方出现时item显示的是图片的顶部，等item的顶部滚到图片的起始位置时，图片不滚动只滚动item，等item的底部到达图片的结束位置时，图片跟随item向下滚动。同理item从屏幕底部出现时显示的是图片的底部。。。

分析用到的几个数据： 
1、屏幕的高 
2、图片的高 
3、item的高 
4、item顶部距离屏幕顶部的距离 = y 
5、起始位置 = (屏幕的高-图片的高)/2 
6、结束位置 = 屏幕的高 - 起始位置

逻辑更简单： 
if(y>起始位置 && y<结束位置-item的高){ 
画布上移 y-起始位置 
}else if( y>=结束位置-item的高){ 
画布下移 图片高-item高 
}

package com.zzj.myapplication22;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.WindowManager;

/**
 * Created by Administrator on 2017/12/30/030.
 */

public class ScrollImageView extends android.support.v7.widget.AppCompatImageView {

    private int height;

    public ScrollImageView(Context context) {
        this(context,null);
    }

    public ScrollImageView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public ScrollImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        WindowManager wm = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);
        height = wm.getDefaultDisplay().getHeight();
    }

    @Override
    protected void onDraw(Canvas canvas) {

        int[] location = new int[2];
        getLocationOnScreen(location);
        int y = location[1];
        Drawable drawable = getDrawable();
        int w = getWidth();
        int h = (int) (getWidth() * 1.0f / drawable.getIntrinsicWidth() * drawable.getIntrinsicHeight());
        drawable.setBounds(0, 0, w, h);
        int startH = (height - h)/2;
        int endH = height - startH;

        if (y>startH && y<endH-getBottom()){
            canvas.translate(0, -(y-startH));
        }else if (y>=endH-getBottom()){
            canvas.translate(0, getBottom()-h);
        }
        super.onDraw(canvas);
        invalidate();
    }
}

package com.zzj.myapplication22;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ListView;

public class MainActivity extends AppCompatActivity {

    private ListView listView;
    private ScrollImageView scrollImageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        listView = (ListView) findViewById(R.id.listview);
        listView.setAdapter(new MyAdapter());
    }


    private class MyAdapter extends BaseAdapter {

        @Override
        public int getCount() {
            return 50;
        }

        @Override
        public Object getItem(int position) {
            return null;
        }

        @Override
        public long getItemId(int position) {
            return 0;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            View imageLayout = getLayoutInflater().inflate(R.layout.item_image, null);
            scrollImageView = imageLayout.findViewById(R.id.image);
            switch (position%4) {
                case 0:
                    scrollImageView.setImageResource(R.mipmap.test1);
                    break;
                case 1:
                    scrollImageView.setImageResource(R.mipmap.test2);
                    break;
                case 2:
                    scrollImageView.setImageResource(R.mipmap.test3);
                    break;
                case 3:
                    scrollImageView.setImageResource(R.mipmap.test4);
                    break;
                default:
                    imageLayout = getLayoutInflater().inflate(R.layout.item_text, null);
                    break;
            }
            return imageLayout;

        }
    }
}

如果想x方向固定呢，就有一种覆盖翻页的效果~不写了懒 
https://github.com/JoinHi/MyApplication22