正文

Android 圆角边框的实现方式汇总

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0710

这篇文章主要介绍了Android 圆角边框的实现方式汇总的相关资料,需要的朋友可以参考下

首先我将贴出几种实现圆角边框的dmeo程序效果图：

Android 圆角边框的实现方式汇总

方式一：使用shape元素填充背景，设置圆角/带弧度的角

1、首先在 \res\drawable下新建shape为根元素的资源文件：corners_bg.xml, 代码如下：

?
1
2
3
4
5
6
7
8
9
10
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 设置填充颜色 为白色 -->
<solid android:color="#ffffff" />
<!-- 设置几何图形四个角的弧度 -->
<corners android:radius="10dp"/>
<!-- 设置几何形状绘制边框 红色边框 -->
<stroke android:color="#cd2626"
android:width="2dp"/>
</shape>

2、在layout布局文件中对需要圆角的控件引用第一步的xml文件作为背景即可。 如图

Android 圆角边框的实现方式汇总

3、效果显示为 demo程序效果图中的 图一 效果

方式二：使用.9<九妹>带圆角图片设为背景

Android 圆角边框的实现方式汇总

如图mm_title_act_btn_normal.9.png 是一张带圆角的图片，只需引用它作为控件[这里是button]背景资源即可。显示效果为 demo程序效果图中的 图二 效果

方式三：重写控件的draw方法[这里我以继承imageview为例]：重新draw方法，绘制控件的圆角效果

1、cornersimageview.java为自定义的圆角imageview 代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
package com.ice.cornersdemo;
import android.content.context;
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.bitmapdrawable;
import android.graphics.drawable.colordrawable;
import android.graphics.drawable.drawable;
import android.util.attributeset;
import android.widget.imageview;
/**
* 自定义带圆角的imageview
* created by ice on 14-8-6.
*/
public class cornersimageview extends imageview{
private bitmap mbitmap;
private bitmapshader mbitmapshader;
private final matrix mshadermatrix = new matrix();
private final paint mbitmappaint = new paint();
private final rectf mdrawablerect = new rectf();
private float mdrawableradius;
private int mbitmapwidth;
private int mbitmapheight;
private static final bitmap.config bitmap_config = bitmap.config.argb_8888;
private static final int colordrawable_dimension = 1;
public cornersimageview(context context)
{
super(context);
}
public cornersimageview(context context, attributeset attrs)
{
this(context, attrs, 0);
}
public cornersimageview(context context, attributeset attrs, int defstyle)
{
super(context, attrs, defstyle);
init();
}
private void init() {
if (mbitmap == null)
{
return;
}
mbitmapshader = new bitmapshader(mbitmap, shader.tilemode.clamp, shader.tilemode.clamp);
// 设置抗锯齿
mbitmappaint.setantialias(true);
// 使用位图平铺的渲染效果
mbitmappaint.setshader(mbitmapshader);
mbitmapwidth = mbitmap.getwidth();
mbitmapheight = mbitmap.getheight();
mdrawablerect.set(0, 0, mbitmapwidth, mbitmapheight);
// 获取图片展示的圆形半径
mdrawableradius = math.min(mdrawablerect.width()/2, mdrawablerect.height()/2);
invalidate();
}
@override
public void draw(canvas canvas)
{
if (getdrawable() == null)
{
return;
}
canvas.drawcircle(getwidth()/2, getheight()/2, mdrawableradius, mbitmappaint);
}
@override
public void setimagebitmap(bitmap bm) {
super.setimagebitmap(bm);
mbitmap = bm;
init();
}
@override
public void setimagedrawable(drawable drawable) {
super.setimagedrawable(drawable);
mbitmap = getbitmapfromdrawable(drawable);
init();
}
@override
public void setimageresource(int resid) {
super.setimageresource(resid);
mbitmap = getbitmapfromdrawable(getdrawable());
init();
}
/**
* 将drawable转换成bitmap对象
* @param drawable
* @return
*/
private bitmap getbitmapfromdrawable(drawable drawable) {
if (drawable == null) {
return null;
}
if (drawable instanceof bitmapdrawable) {
return ((bitmapdrawable) drawable).getbitmap();
}
try {
bitmap bitmap;
if (drawable instanceof colordrawable) {
bitmap = bitmap.createbitmap(colordrawable_dimension, colordrawable_dimension,
bitmap_config);
} else {
bitmap = bitmap.createbitmap(drawable.getintrinsicwidth(), drawable.getintrinsicheight(),
bitmap_config);
}
canvas canvas = new canvas(bitmap);
drawable.setbounds(0, 0, canvas.getwidth(), canvas.getheight());
drawable.draw(canvas);
return bitmap;
} catch (outofmemoryerror e) {
return null;
}
}
}

2、在布局文件中使用自定义控件cornersimageview 如下图：

Android 圆角边框的实现方式汇总

3、显示效果为 demo程序效果图中的 图三 效果

其他：其实对于实现图片圆形显示前面介绍的重写imageview的draw方法是在控件本身上做处理，还有一种更简单的方式就是在要显示的图片身上做处理,及对图片本身进行圆形剪切，剪切后显示在控件imageview上。
图片圆形剪切的方法如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
* 将方形图片剪切成圆图
* @param bitmap
* @return
*/
public static bitmap getcirclebitmap(bitmap bitmap) {
bitmap output = bitmap.createbitmap(bitmap.getwidth(), bitmap.getheight(), config.argb_8888);
canvas canvas = new canvas(output);
rect rect = new rect(0, 0, bitmap.getwidth(), bitmap.getheight());
rectf rectf = new rectf(rect);
paint paint = new paint();
paint.setantialias(true); // 防止边缘的锯齿
paint.setfilterbitmap(true); // 对位图进行滤波处理
canvas.drawoval(rectf, paint); // 根据rectf 绘制一个椭圆/圆形
// 设置两张图片相交时的显示模式为 src_in
paint.setxfermode(new porterduffxfermode(mode.src_in));
canvas.drawbitmap(bitmap, rect, rectf, paint);
return output;
}

在代码上 我们只要获取到待显示图片的bitmap对象，然后调用上面的方法

getcirclebitmap(bitmap bitmap) 进行圆形剪切后得到新的bitmap对象，然后调用imageview的方法 setimagebitma(bitmapbitmap) 显示在控件上。显示效果为 demo程序效果图中的 图四 效果
[和图三效果一样] 。