欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2024-02-28 10:04:10
首先我将贴出几种实现圆角边框的dmeo程序效果图: 方式一:使用shape元素填充背景,设置圆角/带弧度的角 1、首先在 \res\drawable下新建shape...

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

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

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

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

<?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 代码如下:

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上。
图片圆形剪切的方法如下:

/**
* 将方形图片剪切成圆图
* @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程序效果图中的 图四 效果
[和图三效果一样] 。