Android 圆角边框的实现方式汇总
首先我将贴出几种实现圆角边框的dmeo程序效果图:
方式一:使用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文件作为背景即可。 如图
3、效果显示为 demo程序效果图中的 图一 效果
方式二:使用.9<九妹>带圆角图片设为背景
如图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 如下图:
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程序效果图中的 图四 效果
[和图三效果一样] 。
上一篇: 无边框窗口代码详解