Introduction#

Github this is day 4 and shows

  • Shape and path
  • Bubble chat
  • ZStack
Screen Shot 2022-11-15 at 15 49 21

Shape and Path#

create a shape and implement the path method, this will create a bubble chat shape

struct ChatButtle: Shape {
    func path(in rect: CGRect) -> Path {
        let path = UIBezierPath(
            roundedRect: rect,
            byRoundingCorners: [.topLeft, .topRight, .bottomLeft], cornerRadii: CGSize(width: 15, height: 15)
        )
        return Path(path.cgPath)
    }
}

apply clipshape onto a text

Text("reading question here")
  .padding()
  .background(Color.gray.opacity(0.3))
  .clipShape(ChatButtle())
  .padding(.horizontal, 5)

also how to style a button

Button { self.showAnswer.toggle() } label: {
    Text(self.showAnswer ? "Hide Anwser" : "Show Answer")
    .fontWeight(.bold)
    .padding(.vertical)
    .foregroundColor(Color.white)
}
.frame(maxWidth: .infinity)
.background(Color.green)
.clipShape(RoundedRectangle(cornerRadius: 10))
.padding(.horizontal, 5)

ZStack#

put them together

struct Day4DrawShape: View {


    @State private var showAnswer: Bool = false


    var body: some View {
        ZStack {
            VStack {
                Spacer()
                Button {
                    self.showAnswer.toggle()
                } label: {
                    Text(self.showAnswer ? "Hide Anwser" : "Show Answer")
                        .fontWeight(.bold)
                        .padding(.vertical)
                        .foregroundColor(Color.white)
                }
                .frame(maxWidth: .infinity)
                .background(Color.green)
                .clipShape(RoundedRectangle(cornerRadius: 10))
                .padding(.horizontal, 5)
            }.zIndex(2)
            ScrollView {
                VStack {
                    Text("reading question here")
                        .padding()
                        .background(Color.gray.opacity(0.3))
                        .clipShape(ChatButtle())
                        .padding(.horizontal, 5)
                }
                if (self.showAnswer){
                    Text("reading answer here")
                        .frame(maxWidth: .infinity)
                        .padding()
                        .background(Color.green.opacity(0.3))
                        .clipShape(ChatButtle())
                        .padding(.horizontal, 5)
                }
            }
            .zIndex(1)
        }
    }
}