关闭

自定义ImageView实现圆角

标签: ImageView
92人阅读 评论(0) 收藏 举报

package com.electric.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.widget.ImageView;

import com.electric.R;

public class RoundImageView extends ImageView{

/** 图片的类型,圆形或者圆角 **/
private int type;
private static final int TYPE_CIRCLE = 0;
private static final int TYPE_ROUND = 1;
/** 圆角的默认值 **/
private static final int BODER_RADIUS_DEFAULT = 10;
private int mBorderRadius;
private Paint mBitmapPaint;
/** 圆角的半径 **/
private int mRadius;
private Matrix mMatrix;
private BitmapShader mBitmapShader;
private int mWidth;
private RectF mRoundRect;

public RoundImageView(Context context) {
    super(context);
    init(context, null);
}

public RoundImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init(context, attrs);
}
private void init(Context context, AttributeSet attrs){
    mMatrix = new Matrix();
    mBitmapPaint = new Paint();
    mBitmapPaint.setAntiAlias(true);
    TypedArray a = context.obtainStyledAttributes(attrs,
            R.styleable.RoundImageView);
    mBorderRadius = a.getDimensionPixelSize(
            R.styleable.RoundImageView_borderRadius, (int) TypedValue
                    .applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                            BODER_RADIUS_DEFAULT, getResources()
                                    .getDisplayMetrics()));
    type = a.getInt(R.styleable.RoundImageView_type, TYPE_CIRCLE);// 默认为Circle
    a.recycle();
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    // 圆角图片的范围
    if (type == TYPE_ROUND)
        mRoundRect = new RectF(0, 0, getWidth(), getHeight());
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    if (type == TYPE_CIRCLE) {
        mWidth = Math.min(getMeasuredWidth(), getMeasuredHeight());
        mRadius = mWidth / 2;
        setMeasuredDimension(mWidth, mWidth);
    }

}

@Override
protected void onDraw(Canvas canvas) {
    if (getDrawable() == null) {
        return;
    }
    setUpShader();
    if (type == TYPE_ROUND) {
        canvas.drawRoundRect(mRoundRect, mBorderRadius, mBorderRadius,
                mBitmapPaint);
    } else {
        canvas.drawCircle(mRadius, mRadius, mRadius, mBitmapPaint);
    }
}
private void setUpShader() {
    Drawable drawable = getDrawable();
    if (drawable == null) {
        return;
    }

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


/**
 * drawable转bitmap
 *
 * @param drawable
 * @return
 */
private Bitmap drawableToBitamp(Drawable drawable) {
    if (drawable instanceof BitmapDrawable) {
        BitmapDrawable bd = (BitmapDrawable) drawable;
        return bd.getBitmap();
    }
    int w = drawable.getIntrinsicWidth();
    int h = drawable.getIntrinsicHeight();
    Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    drawable.setBounds(0, 0, w, h);
    drawable.draw(canvas);
    return bitmap;
}

}

0
0
查看评论

android 自定义View开发实战(四) 圆角矩形ImageView实现

0 前言有时项目中用ImageView显示图片时需要把形状显示成圆角矩形。因为直角的太生硬了,体验不太友好。为此我们可以自定义一个ImageView来实现。1 思路我们自定义一个RoundCornerImageView类继承ImageView,通过改变在onDraw()方法中改变最终绘制的形状。2 ...
  • qiyei2009
  • qiyei2009
  • 2016-11-25 16:24
  • 1169

Android开发之自定义圆角矩形图片ImageView

android中的ImageView只能显示矩形的图片,这样一来不能满足我们其他的需求,比如要显示圆角矩形的图片,这个时候,我们就需要自定义ImageView了,其原理就是首先获取到图片的Bitmap,然后进行裁剪对应的圆角矩形的bitmap,然后在onDraw()进行绘制圆角矩形图片输出。 自定...
  • lvmingci
  • lvmingci
  • 2016-12-12 16:27
  • 845

Android自定义圆角ImageView 支持网络图片

先看下效果图                        我们再来看一张C...
  • soul_code
  • soul_code
  • 2015-12-16 09:22
  • 4005

自定义圆角ImageVIew

今天继续写写博客,坚持下去懒癌是有救的。这个控件可以给图片带上圆角矩形或者圆形效果,并可以设置外带的边框。废话少说,先看看事例图: 上面两个就是正圆和圆角矩形的效果啦。它会自动缩放图片使之中心对齐铺满。 下面是写在属性文件里的自定义属性,边框颜色,边框大小,图片,是否是圆形,圆角值:
  • huangmayi
  • huangmayi
  • 2017-05-23 23:51
  • 320

自定义ImageView实现圆角矩形

Android自带的imageView是矩形了,如果要自定义实现imageview的其他形状,如圆形。圆角矩形之类的。下面就来实现圆角矩形, 原理是:先取得图片的Bitmap,然后进行裁剪对应的圆角矩形的Bitmap,然后在onDraw()进行绘制圆角矩形。 先看源码: package c...
  • oQiHaoGongYuan
  • oQiHaoGongYuan
  • 2015-09-22 12:16
  • 3066

自己收藏的几种圆角ImageView方式。

一:处理bitmap达到圆角效果 package com.xc.xcskin.view; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Bitmap.Config; ...
  • u013109455
  • u013109455
  • 2016-08-18 10:35
  • 119

自定义imageview 实现圆角 甚至圆形imageview(并不是将图片变圆角)

最近遇到新需求   不论用户上传什么形状的头像  展示的时候都要显示成圆形  且头像背后是有背景图的   。 于是想到了 将控件变圆  这样可以任意适配了 先上效果图 下图为方形头像 而此处展示为圆形 ...
  • wuhongqi0012
  • wuhongqi0012
  • 2013-12-16 12:45
  • 3106

设置ImageView形状成圆角矩形和纯圆形

纯圆形:<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"...
  • qq_18581651
  • qq_18581651
  • 2015-12-02 10:55
  • 972

Android自定义View——可设置形状(圆形、圆角矩形、椭圆)的ImageView,抗锯齿

(如果对自定义View不太熟悉,可以查看上篇文章《Android自定义View——基础知识篇》) 有时显示的图片(如用户头像)是圆形或者圆角矩形的,如果我们把每一种形状的图片都裁剪成一个图片文件,这样既麻烦也浪费空间,所以最好的办法是通过代码来设置图片的显示形状。 显示图片用到的是ImageV...
  • u012964944
  • u012964944
  • 2016-01-20 15:22
  • 5531

Android 圆角圆形ImageView(超简单实现)

前言:今天偶然看到我之前写过的一篇博客 Android项目中遇到的坑之(Android圆角圆形图 一),我在想,这不就是在模仿ImageView么,我为什么要模仿,直接拿来用不是更好么?我能直接在ImageView的源码上去改改代码? 于是就有了下面这篇文章了。先上一张效果图:效果还是很不错的,代码...
  • vv_bug
  • vv_bug
  • 2017-03-14 15:11
  • 3452
    个人资料
    • 访问:5049次
    • 积分:142
    • 等级:
    • 排名:千里之外
    • 原创:8篇
    • 转载:2篇
    • 译文:0篇
    • 评论:0条