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)
}
}
}