圆边框android,android 9.0圆形 带边框 图片内容 超出圆形边框

最新推荐文章于 2022-05-10 20:28:25 发布
最新推荐文章于 2022-05-10 20:28:25 发布
阅读量224 收藏
点赞数
文章标签： 圆边框android

作者更新太慢了。。Bug只能自己动手修了(有没有影响到其他功能需要大家再认真测下 我试是没问题的~)

==========================分割线==============================

一、问题出在哪？

控件用到了 Xfermode这个东西，我试了下。

1、先画一个circle(非bitmap)，然后setXfermode 为Src_In，再画一个bitmap(图片的)，正常显示。

2、先画一个bitmap(图片的)，然后setXfermode 为Dsr_In,再画circle。异常。(大概看下来代码 作者应该用的这一种画法)

第一种：先画circle 在canvas那层，再画Bitmap新一层，中间Xfermode

第二种: 先画bitmap一层，再画circle还是原来那层 中间Xfermode

=============================上代码======================

package com.othershe.library;

import android.content.Context;

import android.content.res.TypedArray;

import android.graphics.Bitmap;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Matrix;

import android.graphics.Paint;

import android.graphics.Path;

import android.graphics.PorterDuff;

import android.graphics.PorterDuffXfermode;

import android.graphics.RectF;

import android.graphics.Xfermode;

import android.graphics.drawable.BitmapDrawable;

import android.graphics.drawable.Drawable;

import android.support.annotation.ColorInt;

import android.support.annotation.Nullable;

import android.support.v7.widget.AppCompatImageView;

import android.util.AttributeSet;

public class NiceImageView extends AppCompatImageView {

private Context context;

private boolean isCircle; // 是否显示为圆形，如果为圆形则设置的corner无效

private boolean isCoverSrc; // border、inner_border是否覆盖图片

private int borderWidth; // 边框宽度

private int borderColor = Color.WHITE; // 边框颜色

private int innerBorderWidth; // 内层边框宽度

private int innerBorderColor = Color.WHITE; // 内层边框充色

private int cornerRadius; // 统一设置圆角半径，优先级高于单独设置每个角的半径

private int cornerTopLeftRadius; // 左上角圆角半径

private int cornerTopRightRadius; // 右上角圆角半径

private int cornerBottomLeftRadius; // 左下角圆角半径

private int cornerBottomRightRadius; // 右下角圆角半径

private int maskColor; // 遮罩颜色

private Xfermode xfermode;

private int width;

private int height;

private float radius;

private float[] borderRadii;

private float[] srcRadii;

private RectF srcRectF; // 图片占的矩形区域

private RectF borderRectF; // 边框的矩形区域

private Path path = new Path();

private Paint paint = new Paint();

public NiceImageView(Context context) {

this(context, null);

}

public NiceImageView(Context context, @Nullable AttributeSet attrs) {

this(context, attrs, 0);

}

public NiceImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

this.context = context;

TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.NiceImageView, 0, 0);

for (int i = 0; i < ta.getIndexCount(); i++) {

int attr = ta.getIndex(i);

if (attr == R.styleable.NiceImageView_is_cover_src) {

isCoverSrc = ta.getBoolean(attr, isCoverSrc);

} else if (attr == R.styleable.NiceImageView_is_circle) {

isCircle = ta.getBoolean(attr, isCircle);

} else if (attr == R.styleable.NiceImageView_border_width) {

borderWidth = ta.getDimensionPixelSize(attr, borderWidth);

} else if (attr == R.styleable.NiceImageView_border_color) {

borderColor = ta.getColor(attr, borderColor);

} else if (attr == R.styleable.NiceImageView_inner_border_width) {

innerBorderWidth = ta.getDimensionPixelSize(attr, innerBorderWidth);

} else if (attr == R.styleable.NiceImageView_inner_border_color) {

innerBorderColor = ta.getColor(attr, innerBorderColor);

} else if (attr == R.styleable.NiceImageView_corner_radius) {

cornerRadius = ta.getDimensionPixelSize(attr, cornerRadius);

} else if (attr == R.styleable.NiceImageView_corner_top_left_radius) {

cornerTopLeftRadius = ta.getDimensionPixelSize(attr, cornerTopLeftRadius);

} else if (attr == R.styleable.NiceImageView_corner_top_right_radius) {

cornerTopRightRadius = ta.getDimensionPixelSize(attr, cornerTopRightRadius);

} else if (attr == R.styleable.NiceImageView_corner_bottom_left_radius) {

cornerBottomLeftRadius = ta.getDimensionPixelSize(attr, cornerBottomLeftRadius);

} else if (attr == R.styleable.NiceImageView_corner_bottom_right_radius) {

cornerBottomRightRadius = ta.getDimensionPixelSize(attr, cornerBottomRightRadius);

} else if (attr == R.styleable.NiceImageView_mask_color) {

maskColor = ta.getColor(attr, maskColor);

}

}

ta.recycle();

borderRadii = new float[8];

srcRadii = new float[8];

borderRectF = new RectF();

srcRectF = new RectF();

xfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);

calculateRadii();

clearInnerBorderWidth();

}

@Override

protected void onSizeChanged(int w, int h, int oldw, int oldh) {

super.onSizeChanged(w, h, oldw, oldh);

width = w;

height = h;

initBorderRectF();

initSrcRectF();

}

//替换掉NICEIAMGE类中的这个方法就行了

@Override

protected void onDraw(Canvas canvas) {

// 使用图形混合模式来显示指定区域的图片

canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);

Drawable drawable = getDrawable();

if (drawable == null) {

super.onDraw(canvas);

return;

}

paint.reset();

path.reset();

if (!isCoverSrc) {

float sx = 1.0f * (width - 2 * borderWidth - 2 * innerBorderWidth) / width;

float sy = 1.0f * (height - 2 * borderWidth - 2 * innerBorderWidth) / height;

// 缩小画布，使图片内容不被border、padding覆盖

canvas.scale(sx, sy, width / 2.0f, height / 2.0f);

}

if (isCircle) {

path.addCircle(width / 2.0f, height / 2.0f, radius, Path.Direction.CCW);

} else {

path.addRoundRect(srcRectF, srcRadii, Path.Direction.CCW);

}

paint.setAntiAlias(true);

paint.setStyle(Paint.Style.FILL);

canvas.drawPath(path, paint);

paint.setXfermode(xfermode);

canvas.drawBitmap(zoomDrawable(drawable), 0, 0, paint);

paint.setXfermode(null);

// 绘制遮罩

if (maskColor != 0) {

paint.setColor(maskColor);

canvas.drawPath(path, paint);

}

// 恢复画布

canvas.restore();

// 绘制边框

drawBorders(canvas);

}

private void drawBorders(Canvas canvas) {

if (isCircle) {

if (borderWidth > 0) {

drawCircleBorder(canvas, borderWidth, borderColor, radius - borderWidth / 2.0f);

}

if (innerBorderWidth > 0) {

drawCircleBorder(canvas, innerBorderWidth, innerBorderColor, radius - borderWidth - innerBorderWidth / 2.0f);

}

} else {

if (borderWidth > 0) {

drawRectFBorder(canvas, borderWidth, borderColor, borderRectF, borderRadii);

}

}

}

private void drawCircleBorder(Canvas canvas, int borderWidth, int borderColor, float radius) {

initBorderPaint(borderWidth, borderColor);

path.addCircle(width / 2.0f, height / 2.0f, radius, Path.Direction.CCW);

canvas.drawPath(path, paint);

}

private void drawRectFBorder(Canvas canvas, int borderWidth, int borderColor, RectF rectF, float[] radii) {

initBorderPaint(borderWidth, borderColor);

path.addRoundRect(rectF, radii, Path.Direction.CCW);

canvas.drawPath(path, paint);

}

private void initBorderPaint(int borderWidth, int borderColor) {

path.reset();

paint.setStrokeWidth(borderWidth);

paint.setColor(borderColor);

paint.setStyle(Paint.Style.STROKE);

}

/**

* 计算外边框的RectF

*/

private void initBorderRectF() {

if (!isCircle) {

borderRectF.set(borderWidth / 2.0f, borderWidth / 2.0f, width - borderWidth / 2.0f, height - borderWidth / 2.0f);

}

}

/**

* 计算图片原始区域的RectF

*/

private void initSrcRectF() {

if (isCircle) {

radius = Math.min(width, height) / 2.0f;

srcRectF.set(width / 2.0f - radius, height / 2.0f - radius, width / 2.0f + radius, height / 2.0f + radius);

} else {

srcRectF.set(0, 0, width, height);

if (isCoverSrc) {

srcRectF = borderRectF;

}

}

}

/**

* 计算RectF的圆角半径

*/

private void calculateRadii() {

if (isCircle) {

return;

}

if (cornerRadius > 0) {

for (int i = 0; i < borderRadii.length; i++) {

borderRadii[i] = cornerRadius;

srcRadii[i] = cornerRadius - borderWidth / 2.0f;

}

} else {

borderRadii[0] = borderRadii[1] = cornerTopLeftRadius;

borderRadii[2] = borderRadii[3] = cornerTopRightRadius;

borderRadii[4] = borderRadii[5] = cornerBottomRightRadius;

borderRadii[6] = borderRadii[7] = cornerBottomLeftRadius;

srcRadii[0] = srcRadii[1] = cornerTopLeftRadius - borderWidth / 2.0f;

srcRadii[2] = srcRadii[3] = cornerTopRightRadius - borderWidth / 2.0f;

srcRadii[4] = srcRadii[5] = cornerBottomRightRadius - borderWidth / 2.0f;

srcRadii[6] = srcRadii[7] = cornerBottomLeftRadius - borderWidth / 2.0f;

}

}

private void calculateRadiiAndRectF(boolean reset) {

if (reset) {

cornerRadius = 0;

}

calculateRadii();

initBorderRectF();

invalidate();

}

/**

* 目前圆角矩形情况下不支持inner_border，需要将其置0

*/

private void clearInnerBorderWidth() {

if (!isCircle) {

this.innerBorderWidth = 0;

}

}

public void isCoverSrc(boolean isCoverSrc) {

this.isCoverSrc = isCoverSrc;

initSrcRectF();

invalidate();

}

public void isCircle(boolean isCircle) {

this.isCircle = isCircle;

clearInnerBorderWidth();

initSrcRectF();

invalidate();

}

public void setBorderWidth(int borderWidth) {

this.borderWidth = Utils.dp2px(context, borderWidth);

calculateRadiiAndRectF(false);

}

public void setBorderColor(@ColorInt int borderColor) {

this.borderColor = borderColor;

invalidate();

}

public void setInnerBorderWidth(int innerBorderWidth) {

this.innerBorderWidth = Utils.dp2px(context, innerBorderWidth);

clearInnerBorderWidth();

invalidate();

}

public void setInnerBorderColor(@ColorInt int innerBorderColor) {

this.innerBorderColor = innerBorderColor;

invalidate();

}

public void setCornerRadius(int cornerRadius) {

this.cornerRadius = Utils.dp2px(context, cornerRadius);

calculateRadiiAndRectF(false);

}

public void setCornerTopLeftRadius(int cornerTopLeftRadius) {

this.cornerTopLeftRadius = Utils.dp2px(context, cornerTopLeftRadius);

calculateRadiiAndRectF(true);

}

public void setCornerTopRightRadius(int cornerTopRightRadius) {

this.cornerTopRightRadius = Utils.dp2px(context, cornerTopRightRadius);

calculateRadiiAndRectF(true);

}

public void setCornerBottomLeftRadius(int cornerBottomLeftRadius) {

this.cornerBottomLeftRadius = Utils.dp2px(context, cornerBottomLeftRadius);

calculateRadiiAndRectF(true);

}

public void setCornerBottomRightRadius(int cornerBottomRightRadius) {

this.cornerBottomRightRadius = Utils.dp2px(context, cornerBottomRightRadius);

calculateRadiiAndRectF(true);

}

public void setMaskColor(@ColorInt int maskColor) {

this.maskColor = maskColor;

invalidate();

}

private Bitmap drawableToBitamp(Drawable drawable) {

if (drawable instanceof BitmapDrawable) {

BitmapDrawable bd = (BitmapDrawable) drawable;

return bd.getBitmap();

}

// 设置为颜色时，获取的drawable宽高会有问题，所有当为颜色时候获取控件的宽高

int w = drawable.getIntrinsicWidth() <= 0 ? getWidth() : drawable.getIntrinsicWidth();

int h = drawable.getIntrinsicHeight() <= 0 ? getHeight() : drawable.getIntrinsicHeight();

Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);

Canvas canvas = new Canvas(bitmap);

drawable.setBounds(0, 0, w, h);

drawable.draw(canvas);

return bitmap;

}

private Bitmap zoomDrawable(Drawable drawable) {

int width = drawable.getIntrinsicWidth();

int height = drawable.getIntrinsicHeight();

Bitmap oldbmp = drawableToBitamp(drawable);

Matrix matrix = new Matrix();

float scaleWidth = ((float) getWidth() / width);

float scaleHeight = ((float) getHeight() / height);

matrix.postScale(scaleWidth, scaleHeight);

Bitmap newbmp = Bitmap.createBitmap(oldbmp, 0, 0, width, height,

matrix, true);

return newbmp;

}

}

===========================上面为整个类===============================

咱家是猫没名没姓
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android 圆形头像/有外边框的圆形头像CircleImageView自定义控件使用详解
04-21
现在很主流使用圆形头像，还要带边框的一个圆圈圈，自己做的项目里就有这样的需求，大大小小好多地方。 基本上可以拿来就用，注释我也添加的比较详细了。
android 自定义组件圆形边框
dzc__ze的专栏
11-29 383
在android开发中，我们经常要自定义组件如TextView等背景或边框为四角圆形。 首先，我们在drawable目录下新建一个xml文件，bg.xml &lt;?xml version="1.0" encoding="utf-8"?&gt;&lt;shape xmlns:android="http://schemas.android.com/apk/res/android"    and...
android画圆形边框
musk6的博客
12-19 1094
Android_圆形带边框shape
码农曾的博客
04-11 4883
&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="false"&gt; &lt;soli
Android 圆角边框
GreeHand_的博客
12-31 470
效果图 在drawable下自定义一个btn_yuanjiao.xml <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <stroke android:width="1dp"
FSCapture_9.0
09-20
软件内置功能完善的图像编辑器，支持几乎所有主流图片格式，除提供缩放、旋转、剪切、格式转换、调整大小等基本功能外，还可向图像中加入标题、边框和水印、文本、线条、图形等内容，并可调整图像颜色，进行多种...
pads9.0电子设计软件
12-15
PADS 9.0版产品的出现标志着下一代PADS流程技术的诞生。与以往的旧产品相比, PADS 9.0修复和改善了之前版本软件的不足和缺点，集成了许多全新的功能，拥有了更高的可扩展性和集成度，从而使设计者能够结合Mentor ...
清华紫光 th ocr9.0.zip
07-01
OCR)是一款专业的图像汉字识别软件，它可以帮助你直接把图片信息“挖”出来，软件支持从TIF、BMP和PCX图片格式中读取文字内容，支持简/繁体中文、英文和手写中英文，虽然不敢保证全部能读取（尤其文字靠近边框时，...
FastStone Capture 9.0 已注册绿色汉化版本
04-08
它内置的图像编辑器，支持所有主流图片格式，除提供缩放、旋转、剪切、格式转换、调整大小等基本功能外，还能向图像中加入标题、边框和水印、文本、线条、图形等内容，调整图像颜色，进行多种特效处理。
IE9简体中文正式版 (Internet Explorer 9.0) win7 32位
10-26
之前IE9公发布了两个技术预览版，分别提供了GPU渲染和新的JS引擎，并且微软正计划对IE9进行更多改变，使其全面支持W3C的Web标准，包括HTML5, SVG 1.1第二版, CSS3媒体查询, CSS3边框与背景, CSS3选择器, DOM level 3...
Android 圆角边框
Justinbili的博客
05-10 1302
1.新建drawable资源文件 首先在drawable文件下新建一个radius_border.xml文件，在创建之前先来了解下各个属性的作用 solid : 背景填充 corners ：圆角 (可单独设置圆角） stroke ：边框（可设置边框宽度和颜色） padding ：内边距 gradient ：渐变色（背景） size ：大小 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.
Android实现圆角边框
早有蜻蜓立上头
04-12 769
设置边框圆角可以在drawable-mdpi目录里定义一个xml: <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" android:bottomRightRadius="10dp"
Android边框圆角
JavaQ
12-21 1995
先上效果图，如图所示：        设置边框圆角可以在drawable-mdpi目录里定义一个xml文件，如corners_bg.xml，具体代码如下： <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" an
Android——实现圆形图片带边框效果
小欣儿的专栏
10-27 4087
/**  *   * @ClassName: RoundImageView  * @Description: 图像圆形化  *  圆形ImageView，可设置最多两个宽度不同且颜色不同的圆形边框。  *  设置颜色在xml布局文件中由自定义属性配置参数指定  */ public class RoundImageView extends ImageView {         //
Android 圆角边框实现
wy353208214的专栏
04-28 947
转载：shape 渐变！描边！圆角！漂亮的自定义背景 有朋友建议看看shape的用法，确实很有帮助。这里我偷懒转一篇比较详细的帖子,和大家Android中常常使用shape来定义控件的一些显示属性，今天看了一些shape的使用，对shape有了大体的了解，稍作总结： 先看下面的代码： <gradient
Android View加载圆形图片且同时绘制圆形图片的外部边缘边线及边框：LayerDrawable实现...
weixin_34184158的博客
07-26 196
 Android View加载圆形图片且同时绘制圆形图片的外部边缘边线及边框：LayerDrawable实现 LayerDrawable实现的结果和附录文章1,2,3中的layer-list一致。我写个例子，这次使用LayerDrawable把附录文章4的功能再次实现走通一遍。 写一个布局，简单放一个正方形的View： <?xml version="1.0" encodi...
android 圆角边框及图片
黄贺群的专栏
09-21 1081
Android中常常使用shape来定义控件的一些显示属性，今天看了一些shape的使用，对shape有了大体的了解，稍作总结： 先看下面的代码：                                                                          android:startColor="#ff8c00"         
android studio圆形边框中添加图片
最新发布
08-14
要在Android Studio中的圆形边框中添加图片，您可以按照以下步骤进行操作： 1. 在res/drawable文件夹中创建一个XML文件（例如circlular_border.xml），并添加以下代码： ``` <shape xmlns:android=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值