开源项目Meizhi学习笔记--RatioImageView

RatioImageView

在使用RecyclerView+StaggeredGridLayoutManager实现布局中，图片数据从服务器返回，但服务器上每一张图片的大小不一致，在RecyclerView滑动过程中会出现以下效果。

其中ImageView的布局代码为

<ImageView
        android:id="@+id/meizhi"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:adjustViewBounds="true"/>

从上面可以看出有的图片太小，有的图片太大，而且在滑动的过程中有闪烁现象。宽度是StaggeredGridLayoutManager测量给定的，而高度是根据原来的图片进行缩放。

使用RatioImageView

public class RatioImageView extends ImageView {

    private int originalWidth;
    private int originalHeight;


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


    public RatioImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }


    public RatioImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }


    public void setOriginalSize(int originalWidth, int originalHeight) {
        this.originalWidth = originalWidth;
        this.originalHeight = originalHeight;
    }


    @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        if (originalWidth > 0 && originalHeight > 0) {
            float ratio = (float) originalWidth / (float) originalHeight;

            int width = MeasureSpec.getSize(widthMeasureSpec);
            int height = MeasureSpec.getSize(heightMeasureSpec);
            // TODO: 现在只支持固定宽度
            if (width > 0) {
                height = (int) ((float) width / ratio);
            }

            setMeasuredDimension(width, height);
        } else {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        }
    }
}

布局代码

  <....RatioImageView
        android:id="@+id/meizhi"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:adjustViewBounds="true"/>

设置setOriginalSize时机

  public ViewHolder(View itemView) {
                ....
            ratioImageView.setOriginalSize(50,50);
        }

最后的效果