Android(安卓)圆角圆形ImageView(超简单实现)
前言:今天偶然看到我之前写过的一篇博客 Android项目中遇到的坑之(Android圆角圆形图 一),我在想,这不就是在模仿ImageView么,我为什么要模仿,直接拿来用不是更好么?我能直接在ImageView的源码上去改改代码? 于是就有了下面这篇文章了。
先上一张效果图:
效果还是很不错的,代码更简单哦~~~
但凡搞过android的童鞋一定都知道ImageView,既然ImageView已经处理好了各种缩放问题,然后兼容性就更不用说了是吧,好歹别人也是一个系统组件,那显示图片等一系列的任务ImageView都帮我们实现好了,我们无非就是在它的基础上添加一个显示圆角圆形的功能,所以我们看看它的源码..
其它的源码我们就不看了,我们重点看它的onDraw方法:
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (mDrawable == null) { return; // couldn't resolve the URI } if (mDrawableWidth == 0 || mDrawableHeight == 0) { return; // nothing to draw (empty bounds) } if (mDrawMatrix == null && mPaddingTop == 0 && mPaddingLeft == 0) { mDrawable.draw(canvas); } else { final int saveCount = canvas.getSaveCount(); canvas.save(); if (mCropToPadding) { final int scrollX = mScrollX; final int scrollY = mScrollY; canvas.clipRect(scrollX + mPaddingLeft, scrollY + mPaddingTop, scrollX + mRight - mLeft - mPaddingRight, scrollY + mBottom - mTop - mPaddingBottom); } canvas.translate(mPaddingLeft, mPaddingTop); if (mDrawMatrix != null) { canvas.concat(mDrawMatrix); } mDrawable.draw(canvas); canvas.restoreToCount(saveCount); } }
代码还是很简单的,相比小伙伴都看得懂,我简单的说一下,当我们设置了ImageView的scaleType后,imageview会通过算法依据我们传递的scaletype类型转换成Matrix对象,我们可以看到这么一段代码:
if (mDrawMatrix != null) { canvas.concat(mDrawMatrix); }
转换成Matrix对象后,直接设给了当前画布,然后把我们传递给ImageView的图片显示出来:
mDrawable.draw(canvas); canvas.restoreToCount(saveCount);
是的,没错就是这么简单~~~
然后我们需要做什么呢?
首先定一个attrs文件:
<?xml version="1.0" encoding="utf-8"?><resources> <declare-styleable name="RoundImageView"> <attr name="type" format="enum"> <enum name="circle" value="1"/> <enum name="round" value="2"/> attr> <attr name="radius" format="dimension"/>ssss declare-styleable>resources>
首先我们定义一个view叫RoundImageView,然后继承ImageView,重写其构造方法:
public class RoundImageView extends ImageView { /** * 圆形模式 */ private static final int MODE_CIRCLE = 1; /** * 普通模式 */ private static final int MODE_NONE = 0; /** * 圆角模式 */ private static final int MODE_ROUND = 2; private Paint mPaint; private int currMode = 0; /** * 圆角半径 */ private int currRound = dp2px(10); public RoundImageView(Context context) { super(context); initViews(); } public RoundImageView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public RoundImageView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); obtainStyledAttrs(context, attrs, defStyleAttr); initViews(); } private void obtainStyledAttrs(Context context, AttributeSet attrs, int defStyleAttr) { TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.RoundImageView, defStyleAttr, 0); currMode = a.hasValue(R.styleable.RoundImageView_type) ? a.getInt(R.styleable.RoundImageView_type, MODE_NONE) : MODE_NONE; currRound = a.hasValue(R.styleable.RoundImageView_radius) ? a.getDimensionPixelSize(R.styleable.RoundImageView_radius, currRound) : currRound; a.recycle(); }}
然后就是重写onMeasure方法了,我要处理的就是当模式为圆形的时候强制把控件的宽高保持一致:
@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { /** * 当模式为圆形模式的时候,我们强制让宽高一致 */ if (currMode == MODE_CIRCLE) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int result = Math.min(getMeasuredHeight(), getMeasuredWidth()); setMeasuredDimension(result, result); } else { super.onMeasure(widthMeasureSpec, heightMeasureSpec); } }
好了,然后就是重写我们的onDraw方法了,我们直接把ImageView的代码拷贝过来,然后稍稍改一下:
@Override protected void onDraw(Canvas canvas) { Drawable mDrawable = getDrawable(); Matrix mDrawMatrix = getImageMatrix(); if (mDrawable == null) { return; // couldn't resolve the URI } if (mDrawable.getIntrinsicWidth() == 0 || mDrawable.getIntrinsicHeight() == 0) { return; // nothing to draw (empty bounds) } if (mDrawMatrix == null && getPaddingTop() == 0 && getPaddingLeft() == 0) { mDrawable.draw(canvas); } else { final int saveCount = canvas.getSaveCount(); canvas.save(); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) { if (getCropToPadding()) { final int scrollX = getScrollX(); final int scrollY = getScrollY(); canvas.clipRect(scrollX + getPaddingLeft(), scrollY + getPaddingTop(), scrollX + getRight() - getLeft() - getPaddingRight(), scrollY + getBottom() - getTop() - getPaddingBottom()); } } canvas.translate(getPaddingLeft(), getPaddingTop()); if (currMode == MODE_CIRCLE) {//当为圆形模式的时候 Bitmap bitmap = drawable2Bitmap(mDrawable); mPaint.setShader(new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)); canvas.drawCircle(getWidth() / 2, getHeight() / 2, getWidth() / 2, mPaint); } else if (currMode == MODE_ROUND) {//当为圆角模式的时候 Bitmap bitmap = drawable2Bitmap(mDrawable); mPaint.setShader(new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)); canvas.drawRoundRect(new RectF(getPaddingLeft(), getPaddingTop(), getWidth() - getPaddingRight(), getHeight() - getPaddingBottom()), currRound, currRound, mPaint); } else { if (mDrawMatrix != null) { canvas.concat(mDrawMatrix); } mDrawable.draw(canvas); } canvas.restoreToCount(saveCount); } }
好啦~~ 因为我们写到的代码就只有几行:
if (currMode == MODE_CIRCLE) {//当为圆形模式的时候 Bitmap bitmap = drawable2Bitmap(mDrawable); mPaint.setShader(new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)); canvas.drawCircle(getWidth() / 2, getHeight() / 2, getWidth() / 2, mPaint); } else if (currMode == MODE_ROUND) {//当为圆角模式的时候 Bitmap bitmap = drawable2Bitmap(mDrawable); mPaint.setShader(new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)); canvas.drawRoundRect(new RectF(getPaddingLeft(), getPaddingTop(), getWidth() - getPaddingRight(), getHeight() - getPaddingBottom()), currRound, currRound, mPaint); }
就是当模式为circle跟round的时候,给画笔设置一个bitmapshader(bitmapshader不懂的童鞋自己上api或网上看看其用法)然后用当前canvas画一个圆或者圆角矩形。
然后你就可以用起来了:
<?xml version="1.0" encoding="utf-8"?>"http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context="com.yasin.roundimageview.MainActivity" android:orientation="vertical" > <com.yasin.roundimageview.RoundImageView android:layout_width="100dp" android:layout_height="100dp" android:src="@mipmap/test" android:scaleType="fitXY" /> <com.yasin.roundimageview.RoundImageView android:layout_marginTop="10dp" android:layout_width="100dp" android:layout_height="100dp" android:src="@mipmap/test" android:scaleType="centerCrop" app:type="round" /> <com.yasin.roundimageview.RoundImageView android:layout_marginTop="10dp" android:layout_width="100dp" android:layout_height="100dp" android:src="@mipmap/test" app:type="circle" android:scaleType="fitXY" /> "match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_marginTop="10dp" > <com.yasin.roundimageview.RoundImageView android:layout_width="50dp" android:layout_height="50dp" android:src="@color/colorAccent" /> <com.yasin.roundimageview.RoundImageView android:layout_marginLeft="10dp" android:layout_width="50dp" android:layout_height="50dp" android:src="@color/colorAccent" app:type="round" /> <com.yasin.roundimageview.RoundImageView android:layout_marginLeft="10dp" android:layout_width="50dp" android:layout_height="50dp" android:src="@color/colorAccent" app:type="circle" />
好啦~~!! 是不是觉得soeasy呢??
最后贴上RoundImageView全部代码:
package com.yasin.roundimageview;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.Drawable;import android.os.Build;import android.util.AttributeSet;import android.util.TypedValue;import android.widget.ImageView;/** * Created by leo on 17/3/14. */public class RoundImageView extends ImageView { /** * 圆形模式 */ private static final int MODE_CIRCLE = 1; /** * 普通模式 */ private static final int MODE_NONE = 0; /** * 圆角模式 */ private static final int MODE_ROUND = 2; private Paint mPaint; private int currMode = 0; /** * 圆角半径 */ private int currRound = dp2px(10); public RoundImageView(Context context) { super(context); initViews(); } public RoundImageView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public RoundImageView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); obtainStyledAttrs(context, attrs, defStyleAttr); initViews(); } private void obtainStyledAttrs(Context context, AttributeSet attrs, int defStyleAttr) { TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.RoundImageView, defStyleAttr, 0); currMode = a.hasValue(R.styleable.RoundImageView_type) ? a.getInt(R.styleable.RoundImageView_type, MODE_NONE) : MODE_NONE; currRound = a.hasValue(R.styleable.RoundImageView_radius) ? a.getDimensionPixelSize(R.styleable.RoundImageView_radius, currRound) : currRound; a.recycle(); } private void initViews() { mPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { /** * 当模式为圆形模式的时候,我们强制让宽高一致 */ if (currMode == MODE_CIRCLE) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int result = Math.min(getMeasuredHeight(), getMeasuredWidth()); setMeasuredDimension(result, result); } else { super.onMeasure(widthMeasureSpec, heightMeasureSpec); } } @Override protected void onDraw(Canvas canvas) { Drawable mDrawable = getDrawable(); Matrix mDrawMatrix = getImageMatrix(); if (mDrawable == null) { return; // couldn't resolve the URI } if (mDrawable.getIntrinsicWidth() == 0 || mDrawable.getIntrinsicHeight() == 0) { return; // nothing to draw (empty bounds) } if (mDrawMatrix == null && getPaddingTop() == 0 && getPaddingLeft() == 0) { mDrawable.draw(canvas); } else { final int saveCount = canvas.getSaveCount(); canvas.save(); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) { if (getCropToPadding()) { final int scrollX = getScrollX(); final int scrollY = getScrollY(); canvas.clipRect(scrollX + getPaddingLeft(), scrollY + getPaddingTop(), scrollX + getRight() - getLeft() - getPaddingRight(), scrollY + getBottom() - getTop() - getPaddingBottom()); } } canvas.translate(getPaddingLeft(), getPaddingTop()); if (currMode == MODE_CIRCLE) {//当为圆形模式的时候 Bitmap bitmap = drawable2Bitmap(mDrawable); mPaint.setShader(new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)); canvas.drawCircle(getWidth() / 2, getHeight() / 2, getWidth() / 2, mPaint); } else if (currMode == MODE_ROUND) {//当为圆角模式的时候 Bitmap bitmap = drawable2Bitmap(mDrawable); mPaint.setShader(new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)); canvas.drawRoundRect(new RectF(getPaddingLeft(), getPaddingTop(), getWidth() - getPaddingRight(), getHeight() - getPaddingBottom()), currRound, currRound, mPaint); } else { if (mDrawMatrix != null) { canvas.concat(mDrawMatrix); } mDrawable.draw(canvas); } canvas.restoreToCount(saveCount); } } /** * drawable转换成bitmap */ private Bitmap drawable2Bitmap(Drawable drawable) { if (drawable == null) { return null; } Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(bitmap); //根据传递的scaletype获取matrix对象,设置给bitmap Matrix matrix = getImageMatrix(); if (matrix != null) { canvas.concat(matrix); } drawable.draw(canvas); return bitmap; } private int dp2px(float value) { return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, value, getResources().getDisplayMetrics()); }}
更多相关文章
- 没有一行代码,「2020 新冠肺炎记忆」这个项目却登上了 GitHub 中
- No.11 使用firewall配置的防火墙策略的生效模式
- Android(安卓)MVP模式进阶版——拿去直接用
- 白底黑字!Android浅色状态栏黑色字体模式
- Android(安卓)Studio 制作简单的App欢迎页面——基于Android(安
- 安卓 SQLite数据库操作实例
- Android(安卓)Activity启动模式之standard实例详解
- Git diff代码比较的高级技巧
- 一步步教你如何创建React Native的原生Android模块