Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feat/#5] 탭바 UI 생성 #7

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[Feat/#5] 탭바 UI 생성 #7

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 95 additions & 0 deletions dorundorun/dorundorun/App/TabbarView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
//
// TabbarView.swift
// dorundorun
//
// Created by 박서현 on 1/20/25.
//

import SwiftUI

struct TabbarView: View {

init() {
let appearance = UITabBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = UIColor.white // 탭바 배경 설정

// 활성화된 아이템 색상
appearance.stackedLayoutAppearance.selected.iconColor = UIColor(#colorLiteral(red: 0.4748314023, green: 0.3105015755, blue: 0.9763918519, alpha: 1))
appearance.stackedLayoutAppearance.selected.titleTextAttributes = [.foregroundColor: UIColor(#colorLiteral(red: 0.4748314023, green: 0.3105015755, blue: 0.9763918519, alpha: 1))]

// 비활성화된 아이템 색상
appearance.stackedLayoutAppearance.normal.iconColor = UIColor(#colorLiteral(red: 0.7401758432, green: 0.6517201066, blue: 0.98768574, alpha: 1))
appearance.stackedLayoutAppearance.normal.titleTextAttributes = [.foregroundColor: UIColor(#colorLiteral(red: 0.7401758432, green: 0.6517201066, blue: 0.98768574, alpha: 1))]

// 탭 아이템 중앙 배치 설정
appearance.stackedItemPositioning = .centered // 중앙 배치
appearance.stackedItemSpacing = 4

UITabBar.appearance().standardAppearance = appearance
}

var body: some View {
TabView {
VStack {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

탭바 개수에 맞춰 중복되는 코드가 늘어나잖아요!
중복되는 코드 보면 텍스트 부분만 바뀌고 있으니까, 따로 뷰로 정의해서 사용하면 더 좋을 것 같습니다!!
조금 더 간결하게 보기도 좋고 유지보수성면에서도 효율적일 것 같아용 😋

++ 왕 저 바본가봐요.. 컨텐츠뷰는 따로 만드는건데 탭바 아이콘이랑 착각햇서요 ㅎ^ ㅎ 다른 작업하실 때 참고해주셔용

private func tabContent(title: String) -> some View {
    VStack {
        Text(title)
            .frame(maxWidth: .infinity, maxHeight: .infinity)

        Rectangle()
            .frame(height: 4)
            .foregroundStyle(Color.gray)
            .opacity(0.3)
    }
}

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오우 피드백 감사합니다!!

Text("홈 화면")
.frame(maxWidth: .infinity, maxHeight: .infinity)

Rectangle()
.frame(height: 4)
.foregroundStyle(Color.gray)
.opacity(0.3)
}
.tabItem {
Label("홈", systemImage: "house")
}

VStack {
Text("두들런 화면")
.frame(maxWidth: .infinity, maxHeight: .infinity)

Rectangle()
.frame(height: 4)
.foregroundStyle(Color.gray)
.opacity(0.3)
}
.tabItem {
Label("두들런", systemImage: "waveform.path.ecg")
}

VStack {
Text("마켓 화면")
.frame(maxWidth: .infinity, maxHeight: .infinity)

Rectangle()
.frame(height: 4)
.foregroundStyle(Color.gray)
.opacity(0.3)
}
.tabItem {
Label("마켓", systemImage: "cart")
}

VStack {
Text("마이페이지 화면")
.frame(maxWidth: .infinity, maxHeight: .infinity)

Rectangle()
.frame(height: 4)
.foregroundStyle(Color.gray)
.opacity(0.3)
}
.tabItem {
Label("마이페이지", systemImage: "person.crop.circle")
}
}
.tint(Color(#colorLiteral(red: 0.4748314023, green: 0.3105015755, blue: 0.9763918519, alpha: 1)))
.onAppear {
UITabBar.appearance().unselectedItemTintColor = UIColor(#colorLiteral(red: 0.7401758432, green: 0.6517201066, blue: 0.98768574, alpha: 1))
}
}
}

#Preview {
TabbarView()
}