Android ImageView繪制圓角效果
前言
Android 開發(fā)中,我們經(jīng)常需要實現(xiàn)圖片的圓形/圓角的效果,我們可以使用兩種方式來實現(xiàn)這樣的效果。一種是使用Xfermode,另一種是BitmapShader來實現(xiàn)。下面我將分別介紹這兩種用法。
使用Xfermode的方式實現(xiàn)
使用該方式的關(guān)鍵代碼,如下:
private Bitmap creataBitmap(Bitmap bitmap) { //用指定的一個Bitmap來構(gòu)建一個畫布 Bitmap target = Bitmap.createBitmap(1000,1000, Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(target); final Paint paint = new Paint(); paint.setColor(Color.GREEN); paint.setAntiAlias(true); //在剛才的畫布上繪制一個圓形區(qū)域 canvas.drawCircle(500,500,500,paint); //設(shè)置Xfermode,使用SRC_IN模式,這樣可以取到第二張圖片重疊后的區(qū)域 paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); //在畫布上繪制第二個需要顯示的bitmap canvas.drawBitmap(bitmap,0,0,paint); return target; }
上面代碼中看出在指定的畫布上繪制了兩層圖像,一個是半徑為500像素的圓形,一個是將目標Bitmap繪制在上面。之間還調(diào)用了paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));作用是這兩個繪制的效果圖疊加后,取得第二個圖的交集圖。所以,我們先繪制一個圓形,然后繪制Bitmap,交集為圓形,取出的就是圓形區(qū)域的Bitmap了。
PorterDuff.Mode中一共有16種效果顯示,如下:
可以根據(jù)不同的Mode,控制顯示的效果圖。
開始應(yīng)用
1.自定義屬性在attrs.xml中
<?xml version="1.0" encoding="utf-8"?> <resources> <attr name="borderRadius" format="dimension" /> <attr name="type"> <enum name="circle" value="0"/> <enum name="round" value="1"/> </attr> <attr name="src" format="reference"/> <declare-styleable name="RoundImageView"> <attr name="borderRadius"/> <attr name="type"/> <attr name="src"/> </declare-styleable> </resources>
2.自定義View
public class RoundImageView extends View { private int type; private static final int TYPE_CIRCLE = 0; private static final int TYPE_ROUND = 1; //圖片 private Bitmap mSrc; //圓角大小 private int mRadius; //高度 private int mWidth; //寬度 private int mHeight; public RoundImageView(Context context, AttributeSet attrs) { super(context, attrs); //獲取自定義的屬性 TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.RoundImageView); //獲取自定以屬性的數(shù)目 int count = a.getIndexCount(); for (int i=0 ; i<count ; i++){ int attr = a.getIndex(i); switch (attr){ case R.styleable.RoundImageView_borderRadius: int defValue = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,10f,getResources().getDisplayMetrics()); mRadius = a.getDimensionPixelSize(attr, defValue); break; case R.styleable.RoundImageView_type: type = a.getInt(attr,0); break; case R.styleable.RoundImageView_src: mSrc = BitmapFactory.decodeResource(getResources(),a.getResourceId(attr,0)); break; } } a.recycle(); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); //設(shè)置寬度 int specMode = MeasureSpec.getMode(widthMeasureSpec); int specSize = MeasureSpec.getSize(widthMeasureSpec); if (specMode == MeasureSpec.EXACTLY){ mWidth = specSize; }else { int desireByImg = getPaddingLeft() + getPaddingRight() + mSrc.getWidth(); if (specMode == MeasureSpec.AT_MOST)// wrap_content { mWidth = Math.min(desireByImg, specSize); } else mWidth = desireByImg; } //設(shè)置高度 specMode = MeasureSpec.getMode(heightMeasureSpec); specSize = MeasureSpec.getSize(heightMeasureSpec); if (specMode == MeasureSpec.EXACTLY){ mHeight = specSize; }else { int desire = getPaddingTop() + getPaddingBottom() + mSrc.getHeight(); if (specMode == MeasureSpec.AT_MOST)// wrap_content { mHeight = Math.min(desire, specSize); } else mHeight = desire; } setMeasuredDimension(mWidth,mHeight); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); switch (type){ case TYPE_CIRCLE: int min = Math.min(mWidth,mHeight); //從當(dāng)前存在的Bitmap,按一定的比例創(chuàng)建一個新的Bitmap。 mSrc = Bitmap.createScaledBitmap(mSrc, min, min, false); canvas.drawBitmap(createCircleImage(mSrc, min), 0, 0, null); break; case TYPE_ROUND: mSrc = Bitmap.createScaledBitmap(mSrc, mWidth, mHeight, false); canvas.drawBitmap(createRoundConerImage(mSrc), 0, 0, null); break; } } /** * 繪制圓角 * @param source * @return */ private Bitmap createRoundConerImage(Bitmap source) { final Paint paint = new Paint(); paint.setAntiAlias(true); Bitmap target = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(target); RectF rect = new RectF(0, 0, mWidth, mHeight); canvas.drawRoundRect(rect, mRadius, mRadius, paint); paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); canvas.drawBitmap(source, 0, 0, paint); return target; } /** * 繪制圓形 * @param source * @param min * @return */ private Bitmap createCircleImage(Bitmap source, int min) { final Paint paint = new Paint(); paint.setAntiAlias(true); Bitmap target = Bitmap.createBitmap(min, min, Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(target); canvas.drawCircle(min/2,min/2,min/2,paint); paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); canvas.drawBitmap(source, 0, 0, paint); return target; } }
3.布局文件
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:roundview="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:padding="10dp" tools:context="mo.yumf.com.myviews.MainActivity"> <mo.yumf.com.myviews.RoundImageView android:layout_width="200dp" android:layout_height="200dp" android:layout_marginTop="20dp" roundview:borderRadius="10dp" roundview:src="@drawable/ac_default_icon" roundview:type="round"/> <mo.yumf.com.myviews.RoundImageView android:layout_width="200dp" android:layout_height="200dp" android:layout_marginTop="20dp" roundview:src="@drawable/ac_default_icon" roundview:type="circle"/> </LinearLayout>
上面的自定義View中,存在一個局限,那就是只能在布局中設(shè)置要加載的圖片資源,不能在代碼中設(shè)置圖片。下面我們使用同樣的方式,選擇自定義ImageView來實現(xiàn)。
public class RoundImageView extends ImageView { private int type; private static final int TYPE_CIRCLE = 0; private static final int TYPE_ROUND = 1; //圖片 private Bitmap mSrc; //圓角大小 private int mRadius; public RoundImageView(Context context, AttributeSet attrs) { super(context, attrs); //獲取自定義的屬性 TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.RoundImageView); //獲取自定以屬性的數(shù)目 int count = a.getIndexCount(); for (int i=0 ; i<count ; i++){ int attr = a.getIndex(i); switch (attr){ case R.styleable.RoundImageView_borderRadius: int defValue = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,10f,getResources().getDisplayMetrics()); mRadius = a.getDimensionPixelSize(attr, defValue); break; case R.styleable.RoundImageView_type: type = a.getInt(attr,0); break; } } a.recycle(); } @Override protected void onDraw(Canvas canvas) { if (getDrawable() != null){ Bitmap bitmap = getBitmap(getDrawable()); if (bitmap != null){ switch (type){ case TYPE_CIRCLE: //獲取ImageView中的寬高,取最小值 int min = Math.min(getMeasuredWidth(),getMeasuredHeight()); //從當(dāng)前存在的Bitmap,按一定的比例創(chuàng)建一個新的Bitmap。 mSrc = Bitmap.createScaledBitmap(bitmap, min, min, false); canvas.drawBitmap(createCircleImage(mSrc, min), 0, 0, null); break; case TYPE_ROUND: mSrc = Bitmap.createScaledBitmap(bitmap, getMeasuredWidth(), getMeasuredHeight(), false); canvas.drawBitmap(createRoundConerImage(mSrc), 0, 0, null); break; } } }else { super.onDraw(canvas); } } private Bitmap getBitmap(Drawable drawable) { if (drawable instanceof BitmapDrawable){ return ((BitmapDrawable)drawable).getBitmap(); }else if (drawable instanceof ColorDrawable){ Rect rect = drawable.getBounds(); int width = rect.right - rect.left; int height = rect.bottom - rect.top; int color = ((ColorDrawable)drawable).getColor(); Bitmap bitmap = Bitmap.createBitmap(width,height, Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(bitmap); canvas.drawARGB(Color.alpha(color),Color.red(color), Color.green(color), Color.blue(color)); return bitmap; }else { return null; } } /** * 繪制圓角 * @param source * @return */ private Bitmap createRoundConerImage(Bitmap source) { final Paint paint = new Paint(); paint.setAntiAlias(true); Bitmap target = Bitmap.createBitmap(getMeasuredWidth(), getMeasuredHeight(), Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(target); RectF rect = new RectF(0, 0, getMeasuredWidth(), getMeasuredHeight()); canvas.drawRoundRect(rect, mRadius, mRadius, paint); paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); canvas.drawBitmap(source, 0, 0, paint); return target; } /** * 繪制圓形 * @param source * @param min * @return */ private Bitmap createCircleImage(Bitmap source, int min) { final Paint paint = new Paint(); paint.setAntiAlias(true); Bitmap target = Bitmap.createBitmap(min, min, Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(target); canvas.drawCircle(min/2,min/2,min/2,paint); paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); canvas.drawBitmap(source, 0, 0, paint); return target; } }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android HTTP網(wǎng)絡(luò)請求的異步實現(xiàn)
這篇文章主要介紹了Android HTTP網(wǎng)絡(luò)請求的異步實現(xiàn),感興趣的小伙伴們可以參考一下2016-07-07Android總結(jié)之WebView與Javascript交互(互相調(diào)用)
本篇文章主要介紹了WebView與Javascript進行數(shù)據(jù)交互,詳解的講訴了WebView與Javascript進行數(shù)據(jù)交互的方法,有興趣的可以了解一下。2016-11-11Android編程實現(xiàn)使用Intent傳輸包含自定義類的ArrayList示例
這篇文章主要介紹了Android編程實現(xiàn)使用Intent傳輸包含自定義類的ArrayList,涉及Android對象序列化、反序列化、Intent數(shù)據(jù)傳輸?shù)认嚓P(guān)操作技巧,需要的朋友可以參考下2017-08-08