将图片改成圆形图片,自定义imageview控件
2018-03-13 12:13
405 查看
http://blog.csdn.net/doublefi123/article/details/8795282
在很多应用中,我们看到,个人主页里面的头像一般都是圆的,设计成圆的会使整个界面布局变的优雅漂亮。那么,怎么使头像变圆呢?有的人说可以在上面加一个中间为透明圆形的png图,用它来遮盖住头像不就行了嘛,但是png四周始终始终是不透明的,怎么做也达不到如下的效果图的。
下面我们讲讲怎么做成的吧。
首先创建一个继承ImageView的抽象类MaskedImage。让他重写onDraw方法。代码如下
[java]
view plaincopyprint?
public abstract class MaskedImage extends ImageView {
private static final Xfermode MASK_XFERMODE;
private Bitmap mask;
private Paint paint;
static {
PorterDuff.Mode localMode = PorterDuff.Mode.DST_IN;
MASK_XFERMODE = new PorterDuffXfermode(localMode);
}
public MaskedImage(Context paramContext) {
super(paramContext);
}
public MaskedImage(Context paramContext, AttributeSet paramAttributeSet) {
super(paramContext, paramAttributeSet);
}
public MaskedImage(Context paramContext, AttributeSet paramAttributeSet, int paramInt) {
super(paramContext, paramAttributeSet, paramInt);
}
public abstract Bitmap createMask();
protected void onDraw(Canvas paramCanvas) {
Drawable localDrawable = getDrawable();
if (localDrawable == null)
return;
try {
if (this.paint == null) {
Paint localPaint1 = new Paint();
this.paint = localPaint1;
this.paint.setFilterBitmap(false);
Paint localPaint2 = this.paint;
Xfermode localXfermode1 = MASK_XFERMODE;
@SuppressWarnings(“unused”)
Xfermode localXfermode2 = localPaint2.setXfermode(localXfermode1);
}
float f1 = getWidth();
float f2 = getHeight();
int i = paramCanvas.saveLayer(0.0F, 0.0F, f1, f2, null, 31);
int j = getWidth();
int k = getHeight();
localDrawable.setBounds(0, 0, j, k);
localDrawable.draw(paramCanvas);
if ((this.mask == null) || (this.mask.isRecycled())) {
Bitmap localBitmap1 = createMask();
this.mask = localBitmap1;
}
Bitmap localBitmap2 = this.mask;
Paint localPaint3 = this.paint;
paramCanvas.drawBitmap(localBitmap2, 0.0F, 0.0F, localPaint3);
paramCanvas.restoreToCount(i);
return;
} catch (Exception localException) {
StringBuilder localStringBuilder = new StringBuilder()
.append(“Attempting to draw with recycled bitmap. View ID = ”);
System.out.println(“localStringBuilder==”+localStringBuilder);
}
}
}
[java] view plain copy print?public abstract class MaskedImage extends ImageView {
private static final Xfermode MASK_XFERMODE;
private Bitmap mask;
private Paint paint;
static {
PorterDuff.Mode localMode = PorterDuff.Mode.DST_IN;
MASK_XFERMODE = new PorterDuffXfermode(localMode);
}
public MaskedImage(Context paramContext) {
super(paramContext);
}
public MaskedImage(Context paramContext, AttributeSet paramAttributeSet) {
super(paramContext, paramAttributeSet);
}
public MaskedImage(Context paramContext, AttributeSet paramAttributeSet, int paramInt) {
super(paramContext, paramAttributeSet, paramInt);
}
public abstract Bitmap createMask();
protected void onDraw(Canvas paramCanvas) {
Drawable localDrawable = getDrawable();
if (localDrawable == null)
return;
try {
if (this.paint == null) {
Paint localPaint1 = new Paint();
this.paint = localPaint1;
this.paint.setFilterBitmap(false);
Paint localPaint2 = this.paint;
Xfermode localXfermode1 = MASK_XFERMODE;
@SuppressWarnings(“unused”)
Xfermode localXfermode2 = localPaint2.setXfermode(localXfermode1);
}
float f1 = getWidth();
float f2 = getHeight();
int i = paramCanvas.saveLayer(0.0F, 0.0F, f1, f2, null, 31);
int j = getWidth();
10759
int k = getHeight();
localDrawable.setBounds(0, 0, j, k);
localDrawable.draw(paramCanvas);
if ((this.mask == null) || (this.mask.isRecycled())) {
Bitmap localBitmap1 = createMask();
this.mask = localBitmap1;
}
Bitmap localBitmap2 = this.mask;
Paint localPaint3 = this.paint;
paramCanvas.drawBitmap(localBitmap2, 0.0F, 0.0F, localPaint3);
paramCanvas.restoreToCount(i);
return;
} catch (Exception localException) {
StringBuilder localStringBuilder = new StringBuilder()
.append(”Attempting to draw with recycled bitmap. View ID = ”);
System.out.println(”localStringBuilder==”+localStringBuilder);
}
}
}
然后新建一个类CircularImage继承MaskedImage。代码如下:
[java]
view plaincopyprint?
<SPAN style=“FONT-SIZE: 14px”>public class CircularImage extends MaskedImage { public CircularImage(Context paramContext) { super(paramContext); } public CircularImage(Context paramContext, AttributeSet paramAttributeSet) { super(paramContext, paramAttributeSet); } public CircularImage(Context paramContext, AttributeSet paramAttributeSet, int paramInt) { super(paramContext, paramAttributeSet, paramInt); } public Bitmap createMask() { int i = getWidth(); int j = getHeight(); Bitmap.Config localConfig = Bitmap.Config.ARGB_8888; Bitmap localBitmap = Bitmap.createBitmap(i, j, localConfig); Canvas localCanvas = new Canvas(localBitmap); Paint localPaint = new Paint(1); localPaint.setColor(-16777216); float f1 = getWidth(); float f2 = getHeight(); RectF localRectF = new RectF(0.0F, 0.0F, f1, f2); localCanvas.drawOval(localRectF, localPaint); return localBitmap; } }</SPAN>
[java] view plain copy print?<span style=“font-size:14px;” data-filtered=“filtered”>public class CircularImage extends MaskedImage { public CircularImage(Context paramContext) { super(paramContext); } public CircularImage(Context paramContext, AttributeSet paramAttributeSet) { super(paramContext, paramAttributeSet); } public CircularImage(Context paramContext, AttributeSet paramAttributeSet, int paramInt) { super(paramContext, paramAttributeSet, paramInt); } public Bitmap createMask() { int i = getWidth(); int j = getHeight(); Bitmap.Config localConfig = Bitmap.Config.ARGB_8888; Bitmap localBitmap = Bitmap.createBitmap(i, j, localConfig); Canvas localCanvas = new Canvas(localBitmap); Paint localPaint = new Paint(1); localPaint.setColor(-16777216); float f1 = getWidth(); float f2 = getHeight(); RectF localRectF = new RectF(0.0F, 0.0F, f1, f2); localCanvas.drawOval(localRectF, localPaint); return localBitmap; } }</span>
新建一个MainActivity,代码如下:
[java]
view plaincopyprint?
public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); CircularImage cover_user_photo = (CircularImage) findViewById(R.id.cover_user_photo); cover_user_photo.setImageResource(R.drawable.face); } }
[java] view plain copy print?public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); CircularImage cover_user_photo = (CircularImage) findViewById(R.id.cover_user_photo); cover_user_photo.setImageResource(R.drawable.face); } }
其XML布局文件为:
[html]
view plaincopyprint?
<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:gravity=“center” >
<ImageView
android:layout_width=“82.0dip”
android:layout_height=“82.0dip”
android:layout_centerInParent=“true”
android:contentDescription=“@null”
android:src=“@drawable/me_head_bg” />
<com.doublefi123.diary.widget.CircularImage
android:id=“@+id/cover_user_photo”
android:layout_width=“74.0dip”
android:layout_height=“74.0dip”
android:layout_centerInParent=“true” />
</RelativeLayout>
[html] view plain copy print?<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:gravity=“center” >
<ImageView
android:layout_width=“82.0dip”
android:layout_height=“82.0dip”
android:layout_centerInParent=“true”
android:contentDescription=“@null”
android:src=“@drawable/me_head_bg” />
<com.doublefi123.diary.widget.CircularImage
android:id=“@+id/cover_user_photo”
android:layout_width=“74.0dip”
android:layout_height=“74.0dip”
android:layout_centerInParent=“true” />
</RelativeLayout>
这样就OK啦。哈哈
源码在此:http://download.csdn.net/detail/doublefi123/5252186
在很多应用中,我们看到,个人主页里面的头像一般都是圆的,设计成圆的会使整个界面布局变的优雅漂亮。那么,怎么使头像变圆呢?有的人说可以在上面加一个中间为透明圆形的png图,用它来遮盖住头像不就行了嘛,但是png四周始终始终是不透明的,怎么做也达不到如下的效果图的。
下面我们讲讲怎么做成的吧。
首先创建一个继承ImageView的抽象类MaskedImage。让他重写onDraw方法。代码如下
[java]
view plaincopyprint?
public abstract class MaskedImage extends ImageView {
private static final Xfermode MASK_XFERMODE;
private Bitmap mask;
private Paint paint;
static {
PorterDuff.Mode localMode = PorterDuff.Mode.DST_IN;
MASK_XFERMODE = new PorterDuffXfermode(localMode);
}
public MaskedImage(Context paramContext) {
super(paramContext);
}
public MaskedImage(Context paramContext, AttributeSet paramAttributeSet) {
super(paramContext, paramAttributeSet);
}
public MaskedImage(Context paramContext, AttributeSet paramAttributeSet, int paramInt) {
super(paramContext, paramAttributeSet, paramInt);
}
public abstract Bitmap createMask();
protected void onDraw(Canvas paramCanvas) {
Drawable localDrawable = getDrawable();
if (localDrawable == null)
return;
try {
if (this.paint == null) {
Paint localPaint1 = new Paint();
this.paint = localPaint1;
this.paint.setFilterBitmap(false);
Paint localPaint2 = this.paint;
Xfermode localXfermode1 = MASK_XFERMODE;
@SuppressWarnings(“unused”)
Xfermode localXfermode2 = localPaint2.setXfermode(localXfermode1);
}
float f1 = getWidth();
float f2 = getHeight();
int i = paramCanvas.saveLayer(0.0F, 0.0F, f1, f2, null, 31);
int j = getWidth();
int k = getHeight();
localDrawable.setBounds(0, 0, j, k);
localDrawable.draw(paramCanvas);
if ((this.mask == null) || (this.mask.isRecycled())) {
Bitmap localBitmap1 = createMask();
this.mask = localBitmap1;
}
Bitmap localBitmap2 = this.mask;
Paint localPaint3 = this.paint;
paramCanvas.drawBitmap(localBitmap2, 0.0F, 0.0F, localPaint3);
paramCanvas.restoreToCount(i);
return;
} catch (Exception localException) {
StringBuilder localStringBuilder = new StringBuilder()
.append(“Attempting to draw with recycled bitmap. View ID = ”);
System.out.println(“localStringBuilder==”+localStringBuilder);
}
}
}
[java] view plain copy print?public abstract class MaskedImage extends ImageView {
private static final Xfermode MASK_XFERMODE;
private Bitmap mask;
private Paint paint;
static {
PorterDuff.Mode localMode = PorterDuff.Mode.DST_IN;
MASK_XFERMODE = new PorterDuffXfermode(localMode);
}
public MaskedImage(Context paramContext) {
super(paramContext);
}
public MaskedImage(Context paramContext, AttributeSet paramAttributeSet) {
super(paramContext, paramAttributeSet);
}
public MaskedImage(Context paramContext, AttributeSet paramAttributeSet, int paramInt) {
super(paramContext, paramAttributeSet, paramInt);
}
public abstract Bitmap createMask();
protected void onDraw(Canvas paramCanvas) {
Drawable localDrawable = getDrawable();
if (localDrawable == null)
return;
try {
if (this.paint == null) {
Paint localPaint1 = new Paint();
this.paint = localPaint1;
this.paint.setFilterBitmap(false);
Paint localPaint2 = this.paint;
Xfermode localXfermode1 = MASK_XFERMODE;
@SuppressWarnings(“unused”)
Xfermode localXfermode2 = localPaint2.setXfermode(localXfermode1);
}
float f1 = getWidth();
float f2 = getHeight();
int i = paramCanvas.saveLayer(0.0F, 0.0F, f1, f2, null, 31);
int j = getWidth();
10759
int k = getHeight();
localDrawable.setBounds(0, 0, j, k);
localDrawable.draw(paramCanvas);
if ((this.mask == null) || (this.mask.isRecycled())) {
Bitmap localBitmap1 = createMask();
this.mask = localBitmap1;
}
Bitmap localBitmap2 = this.mask;
Paint localPaint3 = this.paint;
paramCanvas.drawBitmap(localBitmap2, 0.0F, 0.0F, localPaint3);
paramCanvas.restoreToCount(i);
return;
} catch (Exception localException) {
StringBuilder localStringBuilder = new StringBuilder()
.append(”Attempting to draw with recycled bitmap. View ID = ”);
System.out.println(”localStringBuilder==”+localStringBuilder);
}
}
}
public abstract class MaskedImage extends ImageView { private static final Xfermode MASK_XFERMODE; private Bitmap mask; private Paint paint; static { PorterDuff.Mode localMode = PorterDuff.Mode.DST_IN; MASK_XFERMODE = new PorterDuffXfermode(localMode); } public MaskedImage(Context paramContext) { super(paramContext); } public MaskedImage(Context paramContext, AttributeSet paramAttributeSet) { super(paramContext, paramAttributeSet); } public MaskedImage(Context paramContext, AttributeSet paramAttributeSet, int paramInt) { super(paramContext, paramAttributeSet, paramInt); } public abstract Bitmap createMask(); protected void onDraw(Canvas paramCanvas) { Drawable localDrawable = getDrawable(); if (localDrawable == null) return; try { if (this.paint == null) { Paint localPaint1 = new Paint(); this.paint = localPaint1; this.paint.setFilterBitmap(false); Paint localPaint2 = this.paint; Xfermode localXfermode1 = MASK_XFERMODE; @SuppressWarnings("unused") Xfermode localXfermode2 = localPaint2.setXfermode(localXfermode1); } float f1 = getWidth(); float f2 = getHeight(); int i = paramCanvas.saveLayer(0.0F, 0.0F, f1, f2, null, 31); int j = getWidth(); int k = getHeight(); localDrawable.setBounds(0, 0, j, k); localDrawable.draw(paramCanvas); if ((this.mask == null) || (this.mask.isRecycled())) { Bitmap localBitmap1 = createMask(); this.mask = localBitmap1; } Bitmap localBitmap2 = this.mask; Paint localPaint3 = this.paint; paramCanvas.drawBitmap(localBitmap2, 0.0F, 0.0F, localPaint3); paramCanvas.restoreToCount(i); return; } catch (Exception localException) { StringBuilder localStringBuilder = new StringBuilder() .append("Attempting to draw with recycled bitmap. View ID = "); System.out.println("localStringBuilder=="+localStringBuilder); } } }
然后新建一个类CircularImage继承MaskedImage。代码如下:
[java]
view plaincopyprint?
<SPAN style=“FONT-SIZE: 14px”>public class CircularImage extends MaskedImage { public CircularImage(Context paramContext) { super(paramContext); } public CircularImage(Context paramContext, AttributeSet paramAttributeSet) { super(paramContext, paramAttributeSet); } public CircularImage(Context paramContext, AttributeSet paramAttributeSet, int paramInt) { super(paramContext, paramAttributeSet, paramInt); } public Bitmap createMask() { int i = getWidth(); int j = getHeight(); Bitmap.Config localConfig = Bitmap.Config.ARGB_8888; Bitmap localBitmap = Bitmap.createBitmap(i, j, localConfig); Canvas localCanvas = new Canvas(localBitmap); Paint localPaint = new Paint(1); localPaint.setColor(-16777216); float f1 = getWidth(); float f2 = getHeight(); RectF localRectF = new RectF(0.0F, 0.0F, f1, f2); localCanvas.drawOval(localRectF, localPaint); return localBitmap; } }</SPAN>
[java] view plain copy print?<span style=“font-size:14px;” data-filtered=“filtered”>public class CircularImage extends MaskedImage { public CircularImage(Context paramContext) { super(paramContext); } public CircularImage(Context paramContext, AttributeSet paramAttributeSet) { super(paramContext, paramAttributeSet); } public CircularImage(Context paramContext, AttributeSet paramAttributeSet, int paramInt) { super(paramContext, paramAttributeSet, paramInt); } public Bitmap createMask() { int i = getWidth(); int j = getHeight(); Bitmap.Config localConfig = Bitmap.Config.ARGB_8888; Bitmap localBitmap = Bitmap.createBitmap(i, j, localConfig); Canvas localCanvas = new Canvas(localBitmap); Paint localPaint = new Paint(1); localPaint.setColor(-16777216); float f1 = getWidth(); float f2 = getHeight(); RectF localRectF = new RectF(0.0F, 0.0F, f1, f2); localCanvas.drawOval(localRectF, localPaint); return localBitmap; } }</span>
public class CircularImage extends MaskedImage { public CircularImage(Context paramContext) { super(paramContext); } public CircularImage(Context paramContext, AttributeSet paramAttributeSet) { super(paramContext, paramAttributeSet); } public CircularImage(Context paramContext, AttributeSet paramAttributeSet, int paramInt) { super(paramContext, paramAttributeSet, paramInt); } public Bitmap createMask() { int i = getWidth(); int j = getHeight(); Bitmap.Config localConfig = Bitmap.Config.ARGB_8888; Bitmap localBitmap = Bitmap.createBitmap(i, j, localConfig); Canvas localCanvas = new Canvas(localBitmap); Paint localPaint = new Paint(1); localPaint.setColor(-16777216); float f1 = getWidth(); float f2 = getHeight(); RectF localRectF = new RectF(0.0F, 0.0F, f1, f2); localCanvas.drawOval(localRectF, localPaint); return localBitmap; } }
新建一个MainActivity,代码如下:
[java]
view plaincopyprint?
public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); CircularImage cover_user_photo = (CircularImage) findViewById(R.id.cover_user_photo); cover_user_photo.setImageResource(R.drawable.face); } }
[java] view plain copy print?public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); CircularImage cover_user_photo = (CircularImage) findViewById(R.id.cover_user_photo); cover_user_photo.setImageResource(R.drawable.face); } }
public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); CircularImage cover_user_photo = (CircularImage) findViewById(R.id.cover_user_photo); cover_user_photo.setImageResource(R.drawable.face); } }
其XML布局文件为:
[html]
view plaincopyprint?
<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:gravity=“center” >
<ImageView
android:layout_width=“82.0dip”
android:layout_height=“82.0dip”
android:layout_centerInParent=“true”
android:contentDescription=“@null”
android:src=“@drawable/me_head_bg” />
<com.doublefi123.diary.widget.CircularImage
android:id=“@+id/cover_user_photo”
android:layout_width=“74.0dip”
android:layout_height=“74.0dip”
android:layout_centerInParent=“true” />
</RelativeLayout>
[html] view plain copy print?<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:gravity=“center” >
<ImageView
android:layout_width=“82.0dip”
android:layout_height=“82.0dip”
android:layout_centerInParent=“true”
android:contentDescription=“@null”
android:src=“@drawable/me_head_bg” />
<com.doublefi123.diary.widget.CircularImage
android:id=“@+id/cover_user_photo”
android:layout_width=“74.0dip”
android:layout_height=“74.0dip”
android:layout_centerInParent=“true” />
</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:gravity="center" > <ImageView android:layout_width="82.0dip" android:layout_height="82.0dip" android:layout_centerInParent="true" android:contentDescription="@null" android:src="@drawable/me_head_bg" /> <com.doublefi123.diary.widget.CircularImage android:id="@+id/cover_user_photo" android:layout_width="74.0dip" android:layout_height="74.0dip" android:layout_centerInParent="true" /> </RelativeLayout>
这样就OK啦。哈哈
源码在此:http://download.csdn.net/detail/doublefi123/5252186
</div>
相关文章推荐
- Android自定义圆形图片控件CircleImageView
- (转)安卓自定义圆形图片控件的使用(hdodenhof/CircleImageView)
- 自定义圆形控件继承ImageView加载本地图片
- android 自定义ImageView控件实现圆形图片-适用于用户头像
- 自定义圆形图片显示控件CircleImageView
- android 自定义ImageView控件实现圆形图片-适用于用户头像
- 安卓学习笔记---自定义ImageView实现图片圆形 ,椭圆和矩形圆角显示(矩形圆角加边框)
- Android自定义ImageView实现图片圆形 ,椭圆和矩形圆角显示
- 自定义圆形控件RoundImageView并认识一下attr.xml
- 【Android开源】CircleImageView自定义圆形控件的使用
- android-自定义ImageView-圆形图片绘制代码详解
- 自定义圆形ImageView控件
- 自定义图片比例适配控件 ProportionImageView
- Android布局自定义Shap圆形ImageView,可以单独设置背景与图片
- 自定义圆形控件RoundImageView并认识一下attr.xml
- Android布局自定义Shap圆形ImageView,可以单独设置背景与图片
- 【Android自定义View实战】之自定义圆形头像CircleImageView支持加载网络图片
- 自定义ImageView实现圆角图片和圆形图片
- Android中自定义圆形图片的CircleImageView和RoundedImageView基本使用效果
- CircleImageView自定义圆形头像控件