Нужно создать это изображение с этой рамкой - PullRequest
0 голосов
/ 02 мая 2018

Привет! Мне нужно, чтобы это изображение было с этой рамкой

Полигональное изображение с этой границей:

Its polygonal image view with this border

Я создал этот тип представления изображения с помощью этого пользовательского представления изображения в виде шестиугольной маски.

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>

Это полученный пользовательский интерфейс:

This is the resulting ui produced

Я знаю, что я не использую самый оптимальный способ, но, пожалуйста, дайте мне знать, как я могу применить границу, подобную этой, к моему гексагональному представлению изображения, или любая другая опция также будет оценена.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...