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

Question

Я хочу нарисовать фигуру, которая уже нарисована на стороне Android, как:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:innerRadius="0dp"
        android:shape="ring"
        android:thicknessRatio="2"
        android:useLevel="false">


    <stroke
            android:width="2dp"
            android:color="@color/color_boader" />
</shape>

Я установил ее как кнопку фон с надписью «Зарегистрироваться», как на следующем рисунке:

Я хочу сделать то же самое в iOS с SwiftUI. Я пробовал следовать с ZStack:

ZStack(alignment: .trailing) {
                        Spacer()
                            .frame(width: 40, height: 2)
                            .background(Color.boader)
                        Text("Sign up")
                            .foregroundColor(.white)
                            .padding()
                            .padding()
                            .overlay(
                                Circle()
                                    .stroke(Color.boader, lineWidth: 2))
                            .offset(x: 20)
                    }

Есть ли лучший способ добиться этого?

Answer 1

Вы можете сделать свой собственный Shape, используя Path, а затем использовать эту форму в качестве фона для другого вида:

struct ButtonWithSpecialRing: View {

    var body: some View {

        Button(action: {
            print("signed in")
        }) {

            Text("Sign up!")
                .background(CircleWithSemiLine()
                    .stroke()
                    .foregroundColor(.gray))
        }

    }

}

struct CircleWithSemiLine: Shape {

    func path(in rect: CGRect) -> Path {

        var path = Path()
        let radius = rect.size.width / 2

        path.addArc(center: CGPoint(x: radius, y: radius / 2), radius: radius, startAngle: .degrees(0), endAngle: .degrees(360), clockwise: false)

        path.addLine(to: CGPoint(x: radius , y: radius / 2)) // you may play with radius to fit text

        return path

    }

}

Вы можете играть со смещением немного или с radius для лучшего центрирования , Я достиг только этого результата за короткое время, но вы можете go дальше: