仿知乎内容广告栏 WindowImageView

作者 | Bleoo

地址 | http://www.jianshu.com/p/8c14fa566c52

声明 | 本文是 Bleoo 原创，已获授权发布，未经原作者允许请勿转载

前言

前几天看到知乎里的双11广告有这么一个效果，就决定仿一个出来。

项目地址在 https://github.com/Bleoo/WindowImageView，觉得不错就给个star吧~

该库已上传至 jitpack，可直接引用。

图片已处理，避免 OOM，并且支持 Fresco，加载网络图片。

以下是效果实现的核心思路，具体实现请到项目中看。

Draw

思路是先将 canvas 坐标系垂直偏移出 View，即偏移量为负数，然后在将 drawable 绘制在 (0,0) 点处，这时候的 (0,0) 点已经在 View 可视范围之外了。

public void draw(Canvas canvas) {
    ...
    // canvas的坐标系先偏移到view之外的某个点，disPlayTop垂直偏移量
    canvas.translate(0, disPlayTop);
    // 再将drawable绘制出来，rescaleHeight图片处理后的高度
    drawable.setBounds(0, 0, getWidth(), rescaleHeight);
    drawable.draw(canvas);
    ...
}

disPlayTop 垂直偏移量

这个得结合 View 的当前位置 及 translationMultiple 偏移倍数 来计算。

// 当图片处理完成后的回调
public void onProcessFinished(int width, int height) {
    rescaleHeight = height;
    // 计算出RecyclerView高度与图片高度不一致时的偏移倍数translationMultiple
    resetTransMultiple(height);
    // 获取View所在坐标
    getLocationInWindow(location);
    // 当图片处理完成，计算垂直偏移量，rvLocationRecyclerView所在坐标
    disPlayTop = -(location[1] - rvLocation[1]) * translationMultiple;
    ...
}

translationMultiple 偏移倍数

通过 图片高度 及 RecyclerView 的高度 来计算偏移倍数。

private void resetTransMultiple(int scaledHeight) {
    ...
    // 计算最小垂直偏移量
    mMimDisPlayTop = -scaledHeight + getHeight();
    // 计算垂直偏移倍数，rvHeight为RecyclerView的高度
    translationMultiple = 1.0f * -mMimDisPlayTop / (rvHeight - getHeight());
    ...
}

onScrolled 滑动

通过 RecyclerView 的滑动回调 及 translationMultiple 偏移倍数 来计算 disPlayTop 垂直偏移量，然后主动重绘。

@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
    super.onScrolled(recyclerView, dx, dy);
    ...
    disPlayTop += dy * translationMultiple;
    invalidate();
    ...
}

github

项目地址 https://github.com/Bleoo/WindowImageView，觉得不错就给个star吧~

项目技术

1 仿房产销冠 APP 销控表界面-多 RecyclerView 同步滚动

2 Android 仿微信朋友圈全文、收起功能

3 「DragMoreScrollView」一种相册交互效果的实现

END