Как я могу создать закругленный макет с двумя вертикальными линиями?

Question

Я хочу поместить две вертикальные линии в скругленный макет (линейный или относительный)

Как на картинке:

РЕДАКТИРОВАТЬ:

Моя попытка:

<RelativeLayout
    android:background="@drawable/rounded_bg"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <View
        android:layout_width="5dp"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"
        android:background="@color/colorPrimaryDark" />


</RelativeLayout>

И результат:

Answer 1

Отсечение является дорогостоящей операцией, и она действительно поддерживается только в Lollipop и выше.

Если у вас все в порядке только с Lollipop + и вы действительно хотите использовать RelativeLayout, вы можете позвонить myView.setClipToOutline(true),Если ваш myView имеет фон с закругленными углами, система скажет системе обрезать все дочерние элементы до этой округлой формы.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    myView.setClipToOutline(true);
}

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

Подробнее об этой стратегии здесь: https://www.techrepublic.com/article/pro-tip-round-corners-on-an-android-imageview-with-this-hack/

Answer 2

Если вам нужна прозрачная область вне фона с закругленными углами, маскировка лишних частей вертикальных линий не подходит.В этом случае вы можете использовать пользовательский View, который будет работать для уровней API 17 +:

public class RoundedCornersLinearLayout extends LinearLayout{

        private Paint backgroundPaint;
        private Paint linePaint;

        private float cornerRadius;
        private float line_width;
        private float line_margin;
        private RectF rect = new RectF(0, 0, 0,0);

        private Path rectPath = new Path();
        private Path linePath = new Path();

        public RoundedCornersLinearLayout(Context context) {
            super(context);
            init();
        }

        public RoundedCornersLinearLayout(Context context, @Nullable AttributeSet attrs) {
            super(context, attrs);
            init();
        }

        public RoundedCornersLinearLayout(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            init();
        }

        private void init() {
            setWillNotDraw(false);

            // add this so Canvas.clipPath() will give the desired result also for devices running Api level 17,
            // see https://stackoverflow.com/a/30354461/5015207
            if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN_MR2) {
                setLayerType(LAYER_TYPE_SOFTWARE, null);
            }
            backgroundPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            backgroundPaint.setColor(Color.GREEN);
            backgroundPaint.setStyle(Paint.Style.FILL);
            linePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            linePaint.setColor(Color.BLUE);
            linePaint.setStyle(Paint.Style.FILL);

            // with  <dimen name="corner_radius">60dp</dimen> in res/values/dimens.xml
            cornerRadius = getResources().getDimensionPixelSize(R.dimen.corner_radius);
            //  <dimen name="line_width">5dp</dimen>
            line_width =  getResources().getDimensionPixelSize(R.dimen.line_width);
            //  <dimen name="margin_10dp">10dp</dimen>
            line_margin = getResources().getDimensionPixelSize(R.dimen.margin_10dp);
        }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        float measuredWidth = right - left;
        float measuredHeight = bottom - top;
        rect.set(0, 0, measuredWidth, measuredHeight);

        rectPath.reset();
        linePath.reset();

        rectPath.addRoundRect(rect, cornerRadius, cornerRadius, Path.Direction.CW);
        linePath.addRect(measuredWidth - (line_margin + line_width), 0, measuredWidth - line_margin, measuredHeight, Path.Direction.CW);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawRoundRect(rect, cornerRadius, cornerRadius, backgroundPaint);    
        canvas.clipPath(rectPath);
        canvas.drawPath(linePath, linePaint);
    }
}

Скриншоты для Lollipop (эмулятор) ...

... и желе 4.2.2 (устройство):