Apple menu and Sport App is cool, however I would like my very own thought extra cooler than different. I’m attempt to make new!
Right here full code:
import SwiftUI
struct ContentView: View {
@State non-public var isExpanded = false
@State non-public var pillWidth: CGFloat = 0
let peak: CGFloat = 40
var physique: some View {
ZStack(alignment: .topLeading) {
VStack(alignment: .main, spacing: 3) {
// PILL
HStack(spacing: 3) {
Button {
withAnimation(.spring(response: 0.35, dampingFraction: 0.85)) {
isExpanded.toggle()
}
} label: {
HStack(spacing: 3) {
Picture(systemName: "individual.crop.sq..on.sq..angled.fill")
Textual content("1 Signal")
.fontWeight(.common)
}
.padding(.horizontal, 16)
.body(peak: peak)
.background(
Coloration.grey.opacity(0.2)
.clipShape(
CustomCorners(
tl: peak/2,
tr: 2,
bl: peak/2,
br: 2
)
)
)
}
Picture(systemName: "chevron.proper")
.rotationEffect(.levels(isExpanded ? 90 : 0))
.animation(.easeInOut(length: 0.2), worth: isExpanded)
.foregroundColor(.grey)
.body(width: peak, peak: peak)
.background(
Coloration.grey.opacity(0.2)
.clipShape(
CustomCorners(
tl: 2,
tr: peak/2,
bl: 2,
br: peak/2
)
)
)
}
.background(
GeometryReader { geo in
Coloration.clear
.onAppear {
pillWidth = geo.dimension.width
}
}
)
// DROPDOWN
if isExpanded {
VStack(alignment: .main, spacing: 15) {
row("2 Signal")
row("3 Signal")
row("4 Signal")
}
.padding(.vertical, 17)
.body(width: pillWidth)
.background(
RoundedRectangle(cornerRadius: 28)
.fill(Coloration.grey.opacity(0.2))
)
.scaleEffect(y: isExpanded ? 1 : 0, anchor: .prime)
.opacity(isExpanded ? 1 : 0)
.offset(y: isExpanded ? 0 : -10)
.animation(.spring(response: 0.35, dampingFraction: 0.85), worth: isExpanded)
}
}
}
.padding(40)
}
}
func row(_ title: String) -> some View {
HStack {
Textual content(title)
Spacer()
Picture(systemName: "chevron.proper")
}
.padding(.horizontal, 16)
.body(peak: 28)
}
struct CustomCorners: Form {
var tl: CGFloat = 0
var tr: CGFloat = 0
var bl: CGFloat = 0
var br: CGFloat = 0
func path(in rect: CGRect) -> Path {
let path = UIBezierPath()
path.transfer(to: CGPoint(x: rect.minX + tl, y: rect.minY))
path.addLine(to: CGPoint(x: rect.maxX - tr, y: rect.minY))
path.addArc(withCenter: CGPoint(x: rect.maxX - tr, y: rect.minY + tr),
radius: tr, startAngle: .pi * 1.5, endAngle: 0, clockwise: true)
path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY - br))
path.addArc(withCenter: CGPoint(x: rect.maxX - br, y: rect.maxY - br),
radius: br, startAngle: 0, endAngle: .pi * 0.5, clockwise: true)
path.addLine(to: CGPoint(x: rect.minX + bl, y: rect.maxY))
path.addArc(withCenter: CGPoint(x: rect.minX + bl, y: rect.maxY - bl),
radius: bl, startAngle: .pi * 0.5, endAngle: .pi, clockwise: true)
path.addLine(to: CGPoint(x: rect.minX, y: rect.minY + tl))
path.addArc(withCenter: CGPoint(x: rect.minX + tl, y: rect.minY + tl),
radius: tl, startAngle: .pi, endAngle: .pi * 1.5, clockwise: true)
return Path(path.cgPath)
}
}
#Preview {
ContentView()
}
End result:
By the way in which: I’m make a menu for my App, SignDict. so I want a some thought… to make L Form with animation… any thought?
NOTE: I’m attempt to put this menu customized view to navigation bar merchandise button, too bug after I added to it and sorry if my English grammar is horrible!
