自定义view系列之——Imageview--圆形，圆角，正方形，自适应高度，设置比例

在日常项目，图片展示是家常便饭，对面一些无理的要求的我们也得硬着头皮去实现。我总结了一些最常用的几种自定义ImageView图片展现方式。包括圆角图，圆形图，正方形图，自定义比例图，高度自适应图。

github代码直通车: https://github.com/18380438200/FunctionImageViews

先上效果图：

giphy.gif

xml布局使用：

圆形图：常用于头像显示
关键代码：

    private void setUpShader() {
        Drawable drawable = getDrawable();
        if (drawable == null) {
            return;
        }

        Bitmap bmp = drawableToBitamp(drawable);
        // 将bmp作为着色器，就是在指定区域内绘制bmp
        mBitmapShader = new BitmapShader(bmp, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR);
        float scale = 1.0f;
        if (type == TYPE_CIRCLE) {
            // 拿到bitmap宽或高的小值
            int bSize = Math.min(bmp.getWidth(), bmp.getHeight());
            scale = mWidth * 1.0f / bSize;
            mMatrix.setScale(scale,scale);
        } else if (type == TYPE_ROUND) {
            // 如果图片的宽或者高与view的宽高不匹配，计算出需要缩放的比例；缩放后的图片的宽高，一定要大于我们view的宽高；所以我们这里取大值；但是图片会不在中间，所以天才李静就想了一种方法
            //scale = Math.max(width_round * 1.0f / bmp.getWidth(), height_round
             //       * 1.0f / bmp.getHeight());
            // shader的变换矩阵，我们这里主要用于放大或者缩小
            mMatrix.setScale(width_round * 1.0f / bmp.getWidth(), height_round
                    * 1.0f / bmp.getHeight());
        }

        // 设置变换矩阵
        mBitmapShader.setLocalMatrix(mMatrix);
        // 设置shader
        mBitmapPaint.setShader(mBitmapShader);
    }

正方形图：比如需要2列布局，宽度铺满，要求为正方形图显示，那么不同手机分辨率不同，宽度无法指定，高度也无法指定。此情况就需要正方形图了。
关键代码：

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //让宽度的测量尺寸代替高度尺寸
        super.onMeasure(widthMeasureSpec,widthMeasureSpec);
    }

设置比例显示图：比如我们项目里有电影的封面图，要求16：9的比例，设置任意比例Imageview就出场咯。通过属性app:height_to_width_ratio="" 和app:width_to_height_ratio=""设置宽高比。
例如高度设置，给定了宽度为高度的比例，调用super.onMeasure(View.MeasureSpec.makeMeasureSpec(
(int) (height * mWidthRatio), View.MeasureSpec.EXACTLY) 设置固定宽度。
关键代码：

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // 优先级从大到小：
        if (mDrawableSizeRatio > 0) {
            // 根据前景图宽高比例来测量view的大小
            if (mIsWidthFitDrawableSizeRatio) {
                mWidthRatio = mDrawableSizeRatio;
            } else if (mIsHeightFitDrawableSizeRatio) {
                mHeightRatio = 1 / mDrawableSizeRatio;
            }
        }

        if (mHeightRatio > 0 && mWidthRatio > 0) {
            throw new RuntimeException("高度和宽度不能同时设置百分比！！");
        }

        if (mWidthRatio > 0) { // 高度已知，根据比例，设置宽度
            int height = View.MeasureSpec.getSize(heightMeasureSpec);
            super.onMeasure(View.MeasureSpec.makeMeasureSpec(
                    (int) (height * mWidthRatio), View.MeasureSpec.EXACTLY),
                    View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY));
        } else if (mHeightRatio > 0) { // 宽度已知，根据比例，设置高度
            int width = View.MeasureSpec.getSize(widthMeasureSpec);
            super.onMeasure(View.MeasureSpec.makeMeasureSpec(width,
                    View.MeasureSpec.EXACTLY), View.MeasureSpec.makeMeasureSpec(
                    (int) (width * mHeightRatio), View.MeasureSpec.EXACTLY));
        } else { // 系统默认测量
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        }
    }

自适应高度图：我们有一列视频封面显示图，但是手机分辨率，横竖屏拍摄，按照16:9,4:3,1:1,2.35:1这些比例拍出来比例不同，常常需要宽度铺满或2列铺满，高度自适应。
关键代码：

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        Drawable drawable = getDrawable();
        if(null != drawable){
            int width = MeasureSpec.getSize(widthMeasureSpec);
            int height = (int) Math.ceil((float) width * (float) drawable.getIntrinsicHeight() / (float) drawable.getIntrinsicWidth());
            setMeasuredDimension(width,height);
        }else{
            super.onMeasure(widthMeasureSpec,heightMeasureSpec);
        }
    }

getIntrinsicWidth()和getIntrinsicHeight()，是用来取得Drawable的固有的宽度和高度,返回数据单位是dp。
获取图片原有高：宽比例，乘以测量宽度尺寸得到测量高度，在给imageview设置测量高度。以此保证比例与原图一致。