android - 需要使用此边框创建此图像视图
问题描述
嗨,我需要用这个边框制作这个图像视图
带有此边框的多边形图像视图:
我用这个自定义的六边形蒙版图像视图创建了这种类型的图像视图。
public class HexagonMaskView extends android.support.v7.widget.AppCompatImageView {
private Path hexagonPath;
private Path hexagonBorderPath;
private Paint mBorderPaint,mEdgesPaint;
float radiusX;
public HexagonMaskView(Context context) {
super(context);
init();
}
public HexagonMaskView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public HexagonMaskView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
this.hexagonPath = new Path();
this.hexagonBorderPath = new Path();
this.mBorderPaint = new Paint();
this.mBorderPaint.setColor(getResources().getColor(R.color.colorAccent));
this.mBorderPaint.setStrokeCap(Paint.Cap.ROUND);
this.mBorderPaint.setStrokeWidth(40f);
this.mBorderPaint.setStyle(Paint.Style.STROKE);
this.mEdgesPaint = new Paint();
this.mEdgesPaint.setColor(getResources().getColor(R.color.colorAccent));
this.mEdgesPaint.setStrokeCap(Paint.Cap.ROUND);
this.mEdgesPaint.setStrokeWidth(15f);
this.mEdgesPaint.setStyle(Paint.Style.STROKE);
}
private void calculatePath(float radius) {
radiusX = radius;
mBorderPaint.setStrokeWidth(radius/3);
mEdgesPaint.setStrokeWidth(radius/6);
float halfRadius = radius / 2f;
float triangleHeight = (float) (Math.sqrt(3.0) * halfRadius);
float centerX = getMeasuredWidth() / 2f;
float centerY = getMeasuredHeight() / 2f;
this.hexagonPath.reset();
this.hexagonPath.moveTo(centerX, centerY + radius);
this.hexagonPath.lineTo(centerX - triangleHeight, centerY + halfRadius);
this.hexagonPath.lineTo(centerX - triangleHeight, centerY - halfRadius);
this.hexagonPath.lineTo(centerX, centerY - radius);
this.hexagonPath.lineTo(centerX + triangleHeight, centerY - halfRadius);
this.hexagonPath.lineTo(centerX + triangleHeight, centerY + halfRadius);
this.hexagonPath.close();
float radiusBorder = radius - 5f;
float halfRadiusBorder = radiusBorder / 2f;
float triangleBorderHeight = (float) (Math.sqrt(3.0) * halfRadiusBorder);
this.hexagonBorderPath.reset();
this.hexagonBorderPath.moveTo(centerX, centerY + radiusBorder);
this.hexagonBorderPath.lineTo(centerX - triangleBorderHeight, centerY + halfRadiusBorder);
this.hexagonBorderPath.lineTo(centerX - triangleBorderHeight, centerY - halfRadiusBorder);
this.hexagonBorderPath.lineTo(centerX, centerY - radiusBorder);
this.hexagonBorderPath.lineTo(centerX + triangleBorderHeight, centerY - halfRadiusBorder);
this.hexagonBorderPath.lineTo(centerX + triangleBorderHeight, centerY + halfRadiusBorder);
this.hexagonBorderPath.close();
invalidate();
}
@Override
public void onDraw(Canvas c) {
float halfRadiusBorder = radiusX / 2f;
float radiusBorder = radiusX - 5f;
float triangleBorderHeight = (float) (Math.sqrt(3.0) * halfRadiusBorder);
float centerX = getMeasuredWidth() / 2f;
float centerY = getMeasuredHeight() / 2f;
c.clipPath(hexagonPath, Region.Op.INTERSECT);
c.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
super.onDraw(c);
}
@Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
setMeasuredDimension(width, height);
calculatePath(Math.min(width / 2f, height / 2f) - 10f);
}
这段代码制作了一个自定义图像视图,其形状与我想要的完全一样,但问题是我无法正确应用边框,因为屏幕尺寸会更改边框如果应用为图像叠加层有尺寸问题,因为它不是直接应用于图像视图
这就是我使用相对布局来制作我想要的东西的方式
<RelativeLayout
android:id="@+id/frameCont"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.dev.mytechnology.hellostream.Helper.HexagonMaskView
android:id="@+id/image"
android:layout_width="@dimen/_43sdp"
android:layout_height="@dimen/_43sdp"
android:src="@drawable/sample_face_1_dummy"
android:layout_centerInParent="true"
android:background="@android:color/transparent"/>
<ImageView
android:id="@+id/frame"
android:layout_width="@dimen/_45sdp"
android:layout_height="@dimen/_45sdp"
android:layout_centerInParent="true"
android:src="@drawable/hs_hexa_frame_white" />
</RelativeLayout>
这是生成的用户界面:
我知道我没有使用最佳方式,但请让我知道如何在我的六边形图像视图上应用这样的边框,或者任何其他选项也将不胜感激。
解决方案
推荐阅读
- angular - 使用可观察对象添加/删除项目的 Angular 服务
- python-3.x - 两个熊猫系列的减法
- database - 如何在 Power BI 中使用一个地址进行授权并使用另一个地址提取数据?
- javascript - 这个错误是由使用 React 代码拆分和组件继承引起的吗?
- python - 命令提示符中的 Python?
- javascript - Vuejs - 如何提高 Vuejs 的安全性
- arrays - 为什么在 Perl 中将列表引用分配给数组变量?
- google-coral - Coral SOM 数据表 V1.8 问题
- react-native - 我需要选择一个日期,并根据日期需要使用 React Native 显示一个包含当天相关数据的表格
- python - 按名称获取角色(discord.py 重写)