android - 在 Android 中创建圆角六边形 ImageView 形状

标签 android canvas imageview

Hexagon Imageview

我想要圆角,如上图所示。如何在android中创建这种类型的六边形。我尝试了很多次,但它并不像我想要的那样工作。

我尝试使用以下代码来做到这一点,但在其中我只得到了六角形,但不是我想要的。

public class HexagonImageView extends ImageView {

private Path hexagonPath;
private Path hexagonBorderPath;
private float radius;
private Bitmap image;
private int viewWidth;
private int viewHeight;
private Paint paint;
private BitmapShader shader;
private Paint paintBorder;
private int borderWidth = 5;

public HexagonImageView(Context context) {
    super(context);
    setup();
}

public HexagonImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
    setup();
}

public HexagonImageView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    setup();
}

private void setup() {
    paint = new Paint();
    paint.setAntiAlias(true);

    paintBorder = new Paint();
    setBorderColor(Color.WHITE);
    paintBorder.setAntiAlias(true);
    this.setLayerType(LAYER_TYPE_SOFTWARE, paintBorder);
    paintBorder.setShadowLayer(4.0f, 1.0f, 1.0f, Color.BLACK);

    hexagonPath = new Path();
    hexagonBorderPath = new Path();

}

public void setRadius(float r) {
    this.radius = r;
    calculatePath();
    this.invalidate();
}

public void setBorderWidth(int borderWidth)  {
    this.borderWidth = borderWidth;
    this.invalidate();
}

public void setBorderColor(int borderColor)  {
    if (paintBorder != null)
        paintBorder.setColor(borderColor);

    this.invalidate();
}

private void calculatePath() {

float triangleHeight = (float) (Math.sqrt(3) * radius / 2);
float centerX = viewWidth/2;
float centerY = viewHeight/2;

hexagonBorderPath.moveTo(centerX, centerY + radius);
hexagonBorderPath.lineTo(centerX - triangleHeight, centerY + radius/2);
hexagonBorderPath.lineTo(centerX - triangleHeight, centerY - radius/2);
hexagonBorderPath.lineTo(centerX, centerY - radius);
hexagonBorderPath.lineTo(centerX + triangleHeight, centerY - radius/2);
hexagonBorderPath.lineTo(centerX + triangleHeight, centerY + radius/2);
hexagonBorderPath.moveTo(centerX, centerY + radius);

float radiusBorder = radius - borderWidth;    
float triangleBorderHeight = (float) (Math.sqrt(3) * radiusBorder / 2);

hexagonPath.moveTo(centerX, centerY + radiusBorder);
hexagonPath.lineTo(centerX - triangleBorderHeight, centerY + radiusBorder/2);
hexagonPath.lineTo(centerX - triangleBorderHeight, centerY - radiusBorder/2);
hexagonPath.lineTo(centerX, centerY - radiusBorder);
hexagonPath.lineTo(centerX + triangleBorderHeight, centerY - radiusBorder/2);
hexagonPath.lineTo(centerX + triangleBorderHeight, centerY + radiusBorder/2);
hexagonPath.moveTo(centerX, centerY + radiusBorder);

this.invalidate();
}

private void loadBitmap()  {
BitmapDrawable bitmapDrawable = (BitmapDrawable) this.getDrawable();

    if (bitmapDrawable != null)
    image = bitmapDrawable.getBitmap();
}

@SuppressLint("DrawAllocation")
@Override
public void onDraw(Canvas canvas){
super.onDraw(canvas);

loadBitmap();

// init shader
if (image != null) {

    canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);

    shader = new BitmapShader(Bitmap.createScaledBitmap(image, canvas.getWidth(), canvas.getHeight(), true), Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
    paint.setShader(shader);

    canvas.drawPath(hexagonBorderPath, paintBorder);
    canvas.drawPath(hexagonPath, paint);
    canvas.clipPath(hexagonPath, Region.Op.DIFFERENCE);
}

}

@Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
super.onMeasure(widthMeasureSpec, heightMeasureSpec);

int width = measureWidth(widthMeasureSpec);
int height = measureHeight(heightMeasureSpec, widthMeasureSpec);

viewWidth = width - (borderWidth * 2);
viewHeight = height - (borderWidth * 2);

radius = height / 2 - borderWidth;

calculatePath();

setMeasuredDimension(width, height);
}

private int measureWidth(int measureSpec)   {
int result = 0;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);

if (specMode == MeasureSpec.EXACTLY)  {
    result = specSize;
}
else {
    result = viewWidth;
}

return result;
}

private int measureHeight(int measureSpecHeight, int measureSpecWidth)  {
int result = 0;
int specMode = MeasureSpec.getMode(measureSpecHeight);
int specSize = MeasureSpec.getSize(measureSpecHeight);

if (specMode == MeasureSpec.EXACTLY) {
    result = specSize;
}
else {
    result = viewHeight;
}

return result;
}
}

最佳答案

这个库可以帮助你吗?

=> https://github.com/siyamed/android-shape-imageview

关于android - 在 Android 中创建圆角六边形 ImageView 形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31701586/

相关文章:

java - 如何从重写的 setImageBitmap() 中获取 ImageView 的大小

android - 在 ViewPager 位置从 SQLite 表设置 EditText

android - Android 中的性能测试用例接口(interface)

java - 在 TextView Switcher 或替代方案中滚动

javascript - HTML5 Canvas 中的 textAlign 属性在 IE 11 中无法正常工作

javascript - 如何预览线条工具?

javascript - 来自音频的 JavaScript 波形可视化

java - 为什么 imageView 没有居中?

android - ImageView 周围不需要的填充

android - 从 Java 到 Kotlin : synchronization and lock/wait/notify pattern