feat(component): 재사용 타이틀 탭 바를 추가한다
This commit is contained in:
21
SodaLive/Resources/Assets.xcassets/v2/ic_bar_bell.imageset/Contents.json
vendored
Normal file
21
SodaLive/Resources/Assets.xcassets/v2/ic_bar_bell.imageset/Contents.json
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"images" : [
|
||||
{
|
||||
"filename" : "ic_bar_bell.png",
|
||||
"idiom" : "universal",
|
||||
"scale" : "1x"
|
||||
},
|
||||
{
|
||||
"idiom" : "universal",
|
||||
"scale" : "2x"
|
||||
},
|
||||
{
|
||||
"idiom" : "universal",
|
||||
"scale" : "3x"
|
||||
}
|
||||
],
|
||||
"info" : {
|
||||
"author" : "xcode",
|
||||
"version" : 1
|
||||
}
|
||||
}
|
||||
BIN
SodaLive/Resources/Assets.xcassets/v2/ic_bar_bell.imageset/ic_bar_bell.png
vendored
Normal file
BIN
SodaLive/Resources/Assets.xcassets/v2/ic_bar_bell.imageset/ic_bar_bell.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 401 B |
21
SodaLive/Resources/Assets.xcassets/v2/ic_bar_cash.imageset/Contents.json
vendored
Normal file
21
SodaLive/Resources/Assets.xcassets/v2/ic_bar_cash.imageset/Contents.json
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"images" : [
|
||||
{
|
||||
"filename" : "ic_bar_cash.png",
|
||||
"idiom" : "universal",
|
||||
"scale" : "1x"
|
||||
},
|
||||
{
|
||||
"idiom" : "universal",
|
||||
"scale" : "2x"
|
||||
},
|
||||
{
|
||||
"idiom" : "universal",
|
||||
"scale" : "3x"
|
||||
}
|
||||
],
|
||||
"info" : {
|
||||
"author" : "xcode",
|
||||
"version" : 1
|
||||
}
|
||||
}
|
||||
BIN
SodaLive/Resources/Assets.xcassets/v2/ic_bar_cash.imageset/ic_bar_cash.png
vendored
Normal file
BIN
SodaLive/Resources/Assets.xcassets/v2/ic_bar_cash.imageset/ic_bar_cash.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 693 B |
21
SodaLive/Resources/Assets.xcassets/v2/ic_bar_search.imageset/Contents.json
vendored
Normal file
21
SodaLive/Resources/Assets.xcassets/v2/ic_bar_search.imageset/Contents.json
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"images" : [
|
||||
{
|
||||
"filename" : "ic_bar_search.png",
|
||||
"idiom" : "universal",
|
||||
"scale" : "1x"
|
||||
},
|
||||
{
|
||||
"idiom" : "universal",
|
||||
"scale" : "2x"
|
||||
},
|
||||
{
|
||||
"idiom" : "universal",
|
||||
"scale" : "3x"
|
||||
}
|
||||
],
|
||||
"info" : {
|
||||
"author" : "xcode",
|
||||
"version" : 1
|
||||
}
|
||||
}
|
||||
BIN
SodaLive/Resources/Assets.xcassets/v2/ic_bar_search.imageset/ic_bar_search.png
vendored
Normal file
BIN
SodaLive/Resources/Assets.xcassets/v2/ic_bar_search.imageset/ic_bar_search.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 369 B |
21
SodaLive/Resources/Assets.xcassets/v2/img_text_logo_v2.imageset/Contents.json
vendored
Normal file
21
SodaLive/Resources/Assets.xcassets/v2/img_text_logo_v2.imageset/Contents.json
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"images" : [
|
||||
{
|
||||
"filename" : "img_text_logo_v2.png",
|
||||
"idiom" : "universal",
|
||||
"scale" : "1x"
|
||||
},
|
||||
{
|
||||
"idiom" : "universal",
|
||||
"scale" : "2x"
|
||||
},
|
||||
{
|
||||
"idiom" : "universal",
|
||||
"scale" : "3x"
|
||||
}
|
||||
],
|
||||
"info" : {
|
||||
"author" : "xcode",
|
||||
"version" : 1
|
||||
}
|
||||
}
|
||||
BIN
SodaLive/Resources/Assets.xcassets/v2/img_text_logo_v2.imageset/img_text_logo_v2.png
vendored
Normal file
BIN
SodaLive/Resources/Assets.xcassets/v2/img_text_logo_v2.imageset/img_text_logo_v2.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
78
SodaLive/Sources/V2/Component/CapsuleTabBar.swift
Normal file
78
SodaLive/Sources/V2/Component/CapsuleTabBar.swift
Normal file
@@ -0,0 +1,78 @@
|
||||
//
|
||||
// CapsuleTabBar.swift
|
||||
// SodaLive
|
||||
//
|
||||
|
||||
import SwiftUI
|
||||
|
||||
struct CapsuleTabBar<Item: Hashable>: View {
|
||||
let items: [Item]
|
||||
@Binding var selectedItem: Item
|
||||
let title: (Item) -> String
|
||||
|
||||
var body: some View {
|
||||
ScrollView(.horizontal, showsIndicators: false) {
|
||||
LazyHStack(alignment: .center, spacing: SodaSpacing.s8) {
|
||||
ForEach(items, id: \.self) { item in
|
||||
CapsuleTabBarItem(
|
||||
title: title(item),
|
||||
isSelected: selectedItem == item,
|
||||
action: {
|
||||
selectedItem = item
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
.padding(.horizontal, SodaSpacing.s20)
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
.frame(height: 52, alignment: .center)
|
||||
.background(Color.black)
|
||||
}
|
||||
}
|
||||
|
||||
private struct CapsuleTabBarItem: View {
|
||||
let title: String
|
||||
let isSelected: Bool
|
||||
let action: () -> Void
|
||||
|
||||
var body: some View {
|
||||
Button {
|
||||
action()
|
||||
} label: {
|
||||
Text(title)
|
||||
.appFont(.body5)
|
||||
.foregroundColor(Color.white)
|
||||
.lineLimit(1)
|
||||
.padding(.horizontal, SodaSpacing.s12)
|
||||
.padding(.vertical, SodaSpacing.s8)
|
||||
.frame(height: 34)
|
||||
.background(isSelected ? Color.soda400 : Color.black)
|
||||
.clipShape(Capsule())
|
||||
.overlay(
|
||||
Capsule()
|
||||
.stroke(isSelected ? Color.soda400 : Color.gray700, lineWidth: 1)
|
||||
)
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
}
|
||||
}
|
||||
|
||||
struct CapsuleTabBar_Previews: PreviewProvider {
|
||||
private enum PreviewTab: String, CaseIterable {
|
||||
case recommended = "추천"
|
||||
case ranking = "랭킹"
|
||||
case following = "팔로잉"
|
||||
case live = "라이브"
|
||||
case content = "콘텐츠"
|
||||
case audition = "오디션"
|
||||
}
|
||||
|
||||
static var previews: some View {
|
||||
CapsuleTabBar(
|
||||
items: PreviewTab.allCases,
|
||||
selectedItem: .constant(.recommended),
|
||||
title: { $0.rawValue }
|
||||
)
|
||||
}
|
||||
}
|
||||
39
SodaLive/Sources/V2/Component/DefaultTitleBar.swift
Normal file
39
SodaLive/Sources/V2/Component/DefaultTitleBar.swift
Normal file
@@ -0,0 +1,39 @@
|
||||
//
|
||||
// DefaultTitleBar.swift
|
||||
// SodaLive
|
||||
//
|
||||
|
||||
import SwiftUI
|
||||
|
||||
struct DefaultTitleBar<Menu: View>: View {
|
||||
let title: String
|
||||
private let menu: Menu
|
||||
|
||||
init(
|
||||
title: String,
|
||||
@ViewBuilder menu: () -> Menu
|
||||
) {
|
||||
self.title = title
|
||||
self.menu = menu()
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
TitleBar {
|
||||
Text(title)
|
||||
.appFont(.heading2)
|
||||
.foregroundColor(.white)
|
||||
.lineLimit(1)
|
||||
.truncationMode(.tail)
|
||||
} trailing: {
|
||||
menu
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct DefaultTitleBar_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
DefaultTitleBar(title: "화면명") {
|
||||
Image("ic_bar_search")
|
||||
}
|
||||
}
|
||||
}
|
||||
32
SodaLive/Sources/V2/Component/HomeTitleBar.swift
Normal file
32
SodaLive/Sources/V2/Component/HomeTitleBar.swift
Normal file
@@ -0,0 +1,32 @@
|
||||
//
|
||||
// HomeTitleBar.swift
|
||||
// SodaLive
|
||||
//
|
||||
|
||||
import SwiftUI
|
||||
|
||||
struct HomeTitleBar<Menu: View>: View {
|
||||
private let menu: Menu
|
||||
|
||||
init(@ViewBuilder menu: () -> Menu) {
|
||||
self.menu = menu()
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
TitleBar {
|
||||
Image("img_text_logo_v2")
|
||||
.resizable()
|
||||
.scaledToFit()
|
||||
} trailing: {
|
||||
menu
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct HomeTitleBar_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
HomeTitleBar {
|
||||
Image("ic_bar_bell")
|
||||
}
|
||||
}
|
||||
}
|
||||
51
SodaLive/Sources/V2/Component/TextTabBar.swift
Normal file
51
SodaLive/Sources/V2/Component/TextTabBar.swift
Normal file
@@ -0,0 +1,51 @@
|
||||
//
|
||||
// TextTabBar.swift
|
||||
// SodaLive
|
||||
//
|
||||
|
||||
import SwiftUI
|
||||
|
||||
struct TextTabBar<Item: Hashable>: View {
|
||||
let items: [Item]
|
||||
@Binding var selectedItem: Item
|
||||
let title: (Item) -> String
|
||||
|
||||
var body: some View {
|
||||
HStack(alignment: .center, spacing: SodaSpacing.s20) {
|
||||
ForEach(items.prefix(3), id: \.self) { item in
|
||||
Button {
|
||||
selectedItem = item
|
||||
} label: {
|
||||
Text(title(item))
|
||||
.appFont(.heading3)
|
||||
.foregroundColor(selectedItem == item ? Color.white : Color.gray600)
|
||||
.frame(height: 52, alignment: .center)
|
||||
.contentShape(Rectangle())
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
}
|
||||
|
||||
Spacer()
|
||||
}
|
||||
.padding(.horizontal, SodaSpacing.s20)
|
||||
.frame(maxWidth: .infinity)
|
||||
.frame(height: 52, alignment: .leading)
|
||||
.background(Color.black)
|
||||
}
|
||||
}
|
||||
|
||||
struct TextTabBar_Previews: PreviewProvider {
|
||||
private enum PreviewTab: String, CaseIterable {
|
||||
case recommended = "추천"
|
||||
case ranking = "랭킹"
|
||||
case following = "팔로잉"
|
||||
}
|
||||
|
||||
static var previews: some View {
|
||||
TextTabBar(
|
||||
items: PreviewTab.allCases,
|
||||
selectedItem: .constant(.recommended),
|
||||
title: { $0.rawValue }
|
||||
)
|
||||
}
|
||||
}
|
||||
45
SodaLive/Sources/V2/Component/TitleBar.swift
Normal file
45
SodaLive/Sources/V2/Component/TitleBar.swift
Normal file
@@ -0,0 +1,45 @@
|
||||
//
|
||||
// TitleBar.swift
|
||||
// SodaLive
|
||||
//
|
||||
|
||||
import SwiftUI
|
||||
|
||||
struct TitleBar<Leading: View, Trailing: View>: View {
|
||||
private let leading: Leading
|
||||
private let trailing: Trailing
|
||||
|
||||
init(
|
||||
@ViewBuilder leading: () -> Leading,
|
||||
@ViewBuilder trailing: () -> Trailing
|
||||
) {
|
||||
self.leading = leading()
|
||||
self.trailing = trailing()
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
HStack(alignment: .center, spacing: 0) {
|
||||
leading
|
||||
|
||||
Spacer(minLength: 0)
|
||||
|
||||
trailing
|
||||
}
|
||||
.padding(.horizontal, SodaSpacing.s20)
|
||||
.frame(maxWidth: .infinity)
|
||||
.frame(height: 60, alignment: .center)
|
||||
.background(Color.black)
|
||||
}
|
||||
}
|
||||
|
||||
struct TitleBar_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
TitleBar {
|
||||
Text("Title")
|
||||
.appFont(.heading3)
|
||||
.foregroundColor(.white)
|
||||
} trailing: {
|
||||
Image("ic_bar_search")
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user