-
#14. 커스텀 탭뷰(CustomTabView)SwiftUI 앱만들기 2022. 7. 8. 12:02
#1. MyCustomTabView
import SwiftUI
enum TabIndex{
case home, cart, profile
}
struct MyCustomTabView: View {
@State var tabIndex : TabIndex
@State var largerScale : CGFloat = 1.4 //Icon 크기 변경
//MyView 뷰로 이동
func changeMyView(tabIndex: TabIndex ) -> MyView{
switch tabIndex {
case .home:
return MyView(title: "Home", bgColor: Color.green)
case .cart:
return MyView(title: "CART", bgColor: Color.purple)
case .profile:
return MyView(title: "PROFILE", bgColor: Color.blue)
}
}
//Icon 색 바꾸기
func changIconColor(tabIndex: TabIndex) -> Color {
switch tabIndex {
case .home:
return Color.green
case .cart:
return Color.purple
case .profile:
return Color.blue
}
}
//Circle 위치 변경하는 메서드
func calcCircleBgPosition(tabIndex: TabIndex, gmetry: GeometryProxy) -> CGFloat{
switch tabIndex {
case .home:
return -(gmetry.size.width) / 3
case .cart:
return 0
case .profile:
return gmetry.size.width / 3
}
}
var body: some View {
//Text("MyCustomTabView")
GeometryReader { gemometry in
ZStack(alignment: .bottom){
self.changeMyView(tabIndex: self.tabIndex)
//뒷배경에 원을 추가
Circle()
.foregroundColor(Color.white)
.frame(width: 90, height:90)
.offset(x: self.calcCircleBgPosition(tabIndex: self.tabIndex, gmetry: gemometry), y: UIApplication.shared.windows.filter {$0.isKeyWindow}.first?.safeAreaInsets.bottom == 0 ? 15: 0)
VStack(spacing: 0){
HStack(spacing:0){
//Btn #1
Button(action:{
print("Home button")
withAnimation{
self.tabIndex = .home
}
}){
Image(systemName: "house.fill")
.font(.system(size:25))
//아이콘 크기 늘리기
.scaleEffect(self.tabIndex == .home ? self.largerScale : 1.0)
.foregroundColor(self.tabIndex == .home ? self.changIconColor(tabIndex: self.tabIndex): Color.gray)
.frame(width: gemometry.size.width / 3, height: 50)
//Icone 위로 올리기
.offset(y: self.tabIndex == .home ? -10 : 0)
}.background(Color.white)
//Btn #2
Button(action:{
print("cart button")
withAnimation{
self.tabIndex = .cart
}
}){
Image(systemName: "cart.fill")
.font(.system(size:25))
//아이콘 크기 늘리기
.scaleEffect(self.tabIndex == .cart ? self.largerScale : 1.0)
.foregroundColor(self.tabIndex == .cart ? self.changIconColor(tabIndex: self.tabIndex): Color.gray)
.frame(width: gemometry.size.width / 3, height: 50)
//Icone 위로 올리기
.offset(y: self.tabIndex == .cart ? -10 : 0)
}.background(Color.white)
//Btn #3
Button(action:{
print("profile button")
withAnimation{
self.tabIndex = .profile
}
}){
Image(systemName: "person.circle.fill")
.font(.system(size:25))
//아이콘 크기 늘리기
.scaleEffect(self.tabIndex == .profile ? self.largerScale : 1.0)
.foregroundColor(self.tabIndex == .profile ? self.changIconColor(tabIndex: self.tabIndex): Color.gray)
.frame(width: gemometry.size.width / 3, height: 50)
//Icone 위로 올리기
.offset(y: self.tabIndex == .profile ? -10 : 0)
}.background(Color.white)
} //HStack
Rectangle()
.foregroundColor(Color.white)
.frame(height: UIApplication.shared.windows.first?.safeAreaInsets.bottom == 0 ? 0: 10)
} //VStack
}
}.edgesIgnoringSafeArea(.all)
}
}
struct MyCustomTabView_Previews: PreviewProvider {
static var previews: some View {
MyCustomTabView(tabIndex: .home)
}
}
#2. MyView
import SwiftUI
struct MyView: View {
var title: String
var bgColor: Color
var body: some View {
ZStack{
bgColor
// .edgesIgnoringSafeArea(.all)
Text(title)
.font(.largeTitle)
.fontWeight(.black)
.foregroundColor(Color.white)
}.animation(.none) //애니메이션 효과 없애기
}
}
struct MyView_Previews: PreviewProvider {
static var previews: some View {
MyView(title: "MyView", bgColor: Color.orange)
}
}
출처: https://youtu.be/KmdcL88fy9Y
'SwiftUI 앱만들기' 카테고리의 다른 글
#16. 버튼 스타일(Button Style) (0) 2022.07.11 #15. 로또앱 만들기(QR Code) (0) 2022.07.08 #13. 탭뷰(TabView) (0) 2022.07.07 #12-1. 지오메트리 프록시 위치 잡는 3가지 방법 (0) 2022.07.07 #12. 지오메트리리더(GeometryReader) (0) 2022.07.07