Android ImageViewの領域を角丸にする方法

1. ImageViewを継承したクラスを用意する

view plainprint?

1. public class RoundImageView extends ImageView {  
2.     ...  
3. }  

public class RoundImageView extends ImageView { ... }

2. 角丸の黒い9patch画像もしくはshapeを用意する

res/drawable/mask.xml

view plainprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android" >  
3.     <corners android:radius="32dp" />  
4.     <solid android:color="#000000" />  
5. </shape>  

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <corners android:radius="32dp" /> <solid android:color="#000000" /> </shape>

3. onDraw()で SRC_ATOP を使ってくりぬく

view plainprint?

1. public class RoundImageView extends ImageView {  
2.   
3.     Paint mMaskedPaint;  
4.     Paint mCopyPaint;  
5.     Drawable mMaskDrawable;  
6.   
7.     public RoundImageView(Context context) {  
8.         this(context, null);  
9.     }  
10.   
11.     public RoundImageView(Context context, AttributeSet attrs) {  
12.         super(context, attrs);  
13.   
14.         mMaskedPaint = new Paint();  
15.         mMaskedPaint.setXfermode(new PorterDuffXfermode(  
16.                 PorterDuff.Mode.SRC_ATOP));  
17.   
18.         mCopyPaint = new Paint();  
19.         mMaskDrawable = getResources().getDrawable(R.drawable.mask);  
20.     }  
21.   
22.     Rect mBounds;  
23.     RectF mBoundsF;  
24.   
25.     protected void onSizeChanged(int w, int h, int oldw, int oldh) {  
26.         mBounds = new Rect(0, 0, w, h);  
27.         mBoundsF = new RectF(mBounds);  
28.     }  
29.   
30.     @Override  
31.     protected void onDraw(Canvas canvas) {  
32.         int sc = canvas.saveLayer(mBoundsF, mCopyPaint,  
33.                 Canvas.HAS_ALPHA_LAYER_SAVE_FLAG  
34.                         | Canvas.FULL_COLOR_LAYER_SAVE_FLAG);  
35.   
36.         mMaskDrawable.setBounds(mBounds);  
37.         mMaskDrawable.draw(canvas);  
38.   
39.         canvas.saveLayer(mBoundsF, mMaskedPaint, 0);  
40.   
41.         super.onDraw(canvas);  
42.   
43.         canvas.restoreToCount(sc);  
44.     }  
45. }  

public class RoundImageView extends ImageView { Paint mMaskedPaint; Paint mCopyPaint; Drawable mMaskDrawable; public RoundImageView(Context context) { this(context, null); } public RoundImageView(Context context, AttributeSet attrs) { super(context, attrs); mMaskedPaint = new Paint(); mMaskedPaint.setXfermode(new PorterDuffXfermode( PorterDuff.Mode.SRC_ATOP)); mCopyPaint = new Paint(); mMaskDrawable = getResources().getDrawable(R.drawable.mask); } Rect mBounds; RectF mBoundsF; protected void onSizeChanged(int w, int h, int oldw, int oldh) { mBounds = new Rect(0, 0, w, h); mBoundsF = new RectF(mBounds); } @Override protected void onDraw(Canvas canvas) { int sc = canvas.saveLayer(mBoundsF, mCopyPaint, Canvas.HAS_ALPHA_LAYER_SAVE_FLAG | Canvas.FULL_COLOR_LAYER_SAVE_FLAG); mMaskDrawable.setBounds(mBounds); mMaskDrawable.draw(canvas); canvas.saveLayer(mBoundsF, mMaskedPaint, 0); super.onDraw(canvas); canvas.restoreToCount(sc); } }

4. カスタムビューとして使う

view plainprint?

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:paddingBottom="@dimen/activity_vertical_margin"  
6.     android:paddingLeft="@dimen/activity_horizontal_margin"  
7.     android:paddingRight="@dimen/activity_horizontal_margin"  
8.     android:paddingTop="@dimen/activity_vertical_margin"  
9.     tools:context=".MainActivity" >  
10.   
11.     <com.example.roundimage.RoundImageView  
12.         android:layout_width="96dp"  
13.         android:layout_height="96dp"  
14.         android:src="@drawable/image1" />  
15.   
16. </RelativeLayout>  

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity" > <com.example.roundimage.RoundImageView android:layout_width="96dp" android:layout_height="96dp" android:src="@drawable/image1" /> </RelativeLayout>