Android ImageView繪制圓角效果
更新時間：2017年01月02日 13:03:35 作者：yuminfeng728
這篇文章主要介紹了Android ImageView繪制圓角效果，一種是使用Xfermode，另一種是BitmapShader來實(shí)現(xiàn)圓形和圓角的效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
前言
Android 開發(fā)中，我們經(jīng)常需要實(shí)現(xiàn)圖片的圓形/圓角的效果，我們可以使用兩種方式來實(shí)現(xiàn)這樣的效果。一種是使用Xfermode，另一種是BitmapShader來實(shí)現(xiàn)。下面我將分別介紹這兩種用法。
使用Xfermode的方式實(shí)現(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像素的圓形，一個是將目標(biāo)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來實(shí)現(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ò)請求的異步實(shí)現(xiàn)
這篇文章主要介紹了Android HTTP網(wǎng)絡(luò)請求的異步實(shí)現(xiàn)，感興趣的小伙伴們可以參考一下2016-07-07
下面小編就為大家?guī)硪黄狝ndroid ScrollView取消慣性滾動的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要給大家介紹了關(guān)于Kotlin中5種單例模式的相關(guān)資料，分別包括了餓漢式、懶漢式 、線程安全的懶漢式 、雙重校驗(yàn)鎖式以及靜態(tài)內(nèi)部類式，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2018-08-08
這篇文章主要為大家介紹了Android熱修復(fù)及插件化原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
Android總結(jié)之WebView與Javascript交互（互相調(diào)用）
本篇文章主要介紹了WebView與Javascript進(jìn)行數(shù)據(jù)交互，詳解的講訴了WebView與Javascript進(jìn)行數(shù)據(jù)交互的方法，有興趣的可以了解一下。2016-11-11
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)翻頁特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
Android編程實(shí)現(xiàn)使用Intent傳輸包含自定義類的ArrayList示例
這篇文章主要介紹了Android編程實(shí)現(xiàn)使用Intent傳輸包含自定義類的ArrayList,涉及Android對象序列化、反序列化、Intent數(shù)據(jù)傳輸?shù)认嚓P(guān)操作技巧,需要的朋友可以參考下2017-08-08
本文主要介紹了Android軟鍵盤彈出時把原來布局頂上去的解決方法。具有一定的參考作用，下面跟著小編一起來看下吧2017-01-01
本篇文章主要介紹了Android自定義單選多選下拉列表的實(shí)例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
選中item，其字體設(shè)置為#3197FF，未選中的，其字體為#FFFFFF，下面與大家分享下listview怎么改變選中行字體顏色，感興趣的朋友可以參考下哈2013-06-06