热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

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

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

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

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

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

<&#63;xml version="1.0" encoding="utf-8"&#63;>







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程序效果图中的 图四 效果
[和图三效果一样] 。


推荐阅读
author-avatar
Pen-彭静丹h
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有