Android仿制知乎滑动广告条

开篇废话

前些天看到知乎和网易在APP中加了一个滑动的广告，所以就仿做了一个，其实没什么技术含量，也没什么难度，滑动广告之GitHub地址，帮我点个Star。

滑动广告条

大概效果就是下图这样。

滑动Banner

思路

我能想到两种解决方案：

• 自定义view，使滑动的时候，绘制改变。
• 将父布局设置背景色，子布局背景色透明。

方法一：自定义view

自定义view

自定义一个ScrollBannerView，就是我们显示广告的view。

public class ScrollBannerView  extends View {

    private Bitmap mBannerBitmap;

    private Rect rectSrc;
    private Rect rectDst;

    private int screenWidth;
    private int screenHeight;

    public ScrollBannerView(Context context) {
        super(context);
    }

    public ScrollBannerView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public ScrollBannerView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public void setBannerImageResource(@DrawableRes int resId) {
        mBannerBitmap = BitmapFactory.decodeResource(getResources(), resId);

        // 获取屏幕宽高
        WindowManager wm = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics dm = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(dm);
        screenWidth = dm.widthPixels;
        screenHeight = dm.heightPixels;

        // 把图片修改为屏幕大小
        mBannerBitmap = scaleBitmap(mBannerBitmap, screenWidth, screenHeight);
    }

    public void notifyLayoutChange() {
        // 获取view当前位置
        int[] location = new int[2];
        getLocationOnScreen(location);
        int x = location[0];
        int y = location[1];

        // 定义需要截取图片的位置
        int showLeft = 0;
        int showTop = y;
        int showRight = mBannerBitmap.getWidth();
        int showBottom = y + getHeight();

        // 显示在屏幕上view的宽高
        int width = getWidth();
        int height = y + getHeight() > screenHeight ? screenHeight - y : getHeight();

        // 图片范围
        rectSrc = new Rect(showLeft, showTop, showRight, showBottom);
        // 绘制范围
        rectDst = new Rect(0, showTop < 0 ? -showTop : 0, width, height);

        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // 绘制
        if (mBannerBitmap != null && rectSrc != null && rectDst != null) {
            canvas.drawBitmap(mBannerBitmap, rectSrc, rectDst, null);
        }
    }

    private Bitmap scaleBitmap(Bitmap origin, int newWidth, int newHeight) {
        if (origin == null) {
            return null;
        }
        int height = origin.getHeight();
        int width = origin.getWidth();
        float scaleWidth = ((float) newWidth) / width;
        float scaleHeight = ((float) newHeight) / height;
        Matrix matrix = new Matrix();
        matrix.postScale(scaleWidth, scaleHeight); // 使用后乘
        Bitmap newBM = Bitmap.createBitmap(origin, 0, 0, width, height, matrix, false);
        if (!origin.isRecycled()) {
            origin.recycle();
        }
        return newBM;
    }

}

布局中使用

在Activity中使用

public class BannerViewActivity extends AppCompatActivity {

    private NestedScrollView mScroll;
    private ScrollBannerView mBanner;

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

    private void initView() {
        mScroll = (NestedScrollView) findViewById(R.id.scroll);
        mScroll.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {
            @Override
            public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                if (mBanner != null){
                    mBanner.notifyLayoutChange();
                }
            }
        });
        mBanner = (ScrollBannerView) findViewById(R.id.banner);
        mBanner.setBannerImageResource(R.drawable.banner);
    }

}

这里使用了NestedScrollView，NestedScrollView可以在滑动时回调，然后我们去对mBanner做相应的改变。

方法二：背景色透明

布局

Activity

public class BannerAlphaActivity extends AppCompatActivity {

    private ScrollView mScroll;
    private View mBanner;

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

    private void initView() {
        mScroll = (ScrollView) findViewById(R.id.scroll);
        mScroll.setBackground(getResources().getDrawable(R.drawable.banner));  // 设置Banner
        mBanner = (View) findViewById(R.id.banner);

        mTv = findViewById(R.id.tv);
        mTv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(new Intent(BannerAlphaActivity.this, BannerViewActivity.class));
            }
        });
    }

}

写在后面

有两种方法解决，在使用中，方法二比较方便，如果这个广告被应用到很多地方，将方法一更好的再封装一下，用起来也许会更方便。
这个Demo比较简单，没什么技术难点，如果还是有些不懂的，可以留言，我在文中可以做更多的解释。

更多内容戳这里（整理好的各种文集）