[SwiftUI] 하단 메뉴(하단 탭) 만들기 및 그동안 한 거 응용

 

 

1. 들어가기 전에 상단에 있는 코드 (커스텀 색상 적용)

 

https://growingsaja.tistory.com/754

[SwiftUI] apple 지원 아이콘 불러오기, 색/크기 조정, 도형 만들고 모양 변형하기

import SwiftUI

// ColorExtentsion.swift
extension Color {
  init(hex: String) {
    let scanner = Scanner(string: hex)
    _ = scanner.scanString("#")
    
    var rgb: UInt64 = 0
    scanner.scanHexInt64(&rgb)
    
    let r = Double((rgb >> 16) & 0xFF) / 255.0
    let g = Double((rgb >>  8) & 0xFF) / 255.0
    let b = Double((rgb >>  0) & 0xFF) / 255.0
    self.init(red: r, green: g, blue: b)
  }
}

//원하는 컬러 생성
extension Color {
    static let peach = Color(hex: "#ff8882")
    static let ivory = Color(hex: "f8ede3")
    static let skyblue = Color(hex: "F2FAFF")
    static let skyred = Color(hex: "FFF5F5")
    static let brown = Color(hex: "897853")  // #을 제거하고 사용해도 됩니다.
}

 

 

 

 

 

2. 하단 메뉴 (하단 탭) 만들기 간단한 샘플 코드

 

struct ContentView: View {
    var body: some View {
        TabView {
            VStack {
                Text("Hello, Mojoglacon!")
                Text("Hi, Friend.")
                Text("Yo my heartbreaker")
                    .padding()
            }
        .tabItem {
            Image(systemName: "1.square.fill")
            Text("First")
        }
        Text("Hi~")
        .tabItem {
            Image(systemName: "2.square.fill")
            Text("Second")
        }
        .badge(2)
        VStack {
            ZStack {
                RoundedRectangle(cornerRadius: 20)
                    .foregroundColor(.skyred)
                    .frame(width: 345, height: 208)
                Text("This is Red")
                    .foregroundColor(.red)
            }
        }
        .tabItem {
            Image(systemName: "3.square.fill")
            Text("Third")
        }
        .badge(999999)
        ZStack {
            Button(action: {
                print("Last Tap")
            }) {
                Text("Last Page")
                    .foregroundColor(.green)
                    .padding()
            }
        }
        .tabItem {
            Image(systemName: "4.square.fill")
            Text("Fourth")
        }
        .badge(999999999999999)
      }
      .font(.headline)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

 

 

 

 

3. 살짝 더 응용 코드

 

struct ContentView: View {
    var body: some View {
        HStack {
            Text("김미래 님").font(.title).bold()
                .padding()
        }
        TabView {
            VStack {
                Text("Hello, Mojoglacon!")
                Text("Hi, Friend.")
                Text("Yo my heartbreaker")
                    .padding()
            }
            .tabItem {
                Image(systemName: "1.square.fill")
                Text("Home")
            }
        TabView {
            VStack {
                Button(action: {
                    print("Blue!")
                }) {
                    ZStack {
                        RoundedRectangle(cornerRadius: 20)
                            .foregroundColor(.skyblue)
                            .frame(width: 345, height: 208)
                        Text("This is Blue")
                    }
                }
                .padding()
            }
        }
        .tabItem {
            Image(systemName: "2.square.fill")
            Text("Work")
        }
        .badge(2)
        TabView {
            VStack {
                ZStack {
                    RoundedRectangle(cornerRadius: 20)
                        .foregroundColor(.skyred)
                        .frame(width: 345, height: 208)
                    Text("This is Red")
                        .foregroundColor(.red)
                }
            }
        }
        .tabItem {
            Image(systemName: "3.square.fill")
            Text("Country")
        }
        .badge(5)
        TabView {
            ZStack {
                Button(action: {
                    print("Last Tap")
                }) {
                    Text("Last Page")
                        .foregroundColor(.green)
                        .padding()
                }
            }
        }
        .tabItem {
            Image(systemName: "4.square.fill")
            Text("Invest")
        }
        .badge(99999)
      }
      .font(.headline)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

화면 기록 2023-02-08 오전 12.40.30.mov

1.10MB

화면 기록 2023-02-08 오전 12.39.03.mov

7.72MB