タブバーのアイコンの数を増やしたい

現在サンプルコードからコードを貼り付けてタブバーができたのですが、アイコンが三つしかありません。
５個に増やしたいのですがどうすれば良いでしょうか....?

swiftUI
1import SwiftUI
2import MapKit
3
4struct TopFrameView: Shape {
5    func path(in rect: CGRect) -> Path {
6        let bezierPath = UIBezierPath()
7        bezierPath.move(to: CGPoint(x: 53.22, y: 4.36))
8        for (to, controlPoint1, controlPoint2) in [(CGPoint(x: 60.83, y: 13.06), CGPoint(x: 57.76, y: 7.77), CGPoint(x: 60.14, y: 11.68)), (CGPoint(x: 68.43, y: 22.84), CGPoint(x: 63, y: 17.4), CGPoint(x: 65.05, y:20.96)), (CGPoint(x: 75.16, y: 23.98), CGPoint(x: 70.49, y: 23.98), CGPoint(x: 75.16, y: 23.98))] {
9            bezierPath.addCurve(to: to, controlPoint1: controlPoint1, controlPoint2: controlPoint2)
10        }
11        bezierPath.addLine(to: CGPoint(x: 0.84, y: 23.98))
12        for (to, controlPoint1, controlPoint2) in [(CGPoint(x: 7.57, y: 22.84), CGPoint(x: 0.84, y: 23.98), CGPoint(x: 5.51, y: 23.98)), (CGPoint(x: 15.17, y: 13.06), CGPoint(x: 10.95, y: 20.96), CGPoint(x: 13, y: 17.4)), (CGPoint(x: 22.78, y: 4.36), CGPoint(x: 15.86, y: 11.68), CGPoint(x: 18.24, y: 7.77)), (CGPoint(x: 36.38, y: -0), CGPoint(x: 27.58, y: 0.77), CGPoint(x: 33.55, y: 0.1)), (CGPoint(x: 38, y: 0), CGPoint(x: 37.39, y: -0.04), CGPoint(x: 38, y: 0)), (CGPoint(x: 53.22, y: 4.36), CGPoint(x: 38, y: 0), CGPoint(x: 46.7, y: -0.53))] {
13            bezierPath.addCurve(to: to, controlPoint1: controlPoint1, controlPoint2: controlPoint2)
14        }
15        bezierPath.close()
16        return Path(bezierPath.cgPath)
17    }
18}
19struct TabItemDescription {
20    var imageName: String
21    var title: String
22    func iconView(_ foregroundColor: Color) -> some View { Image(systemName: imageName).font(.system(size: 24)).foregroundColor(foregroundColor) }
23    func labelView(_ foregroundColor: Color) -> some View { Text(title).font(.system(size: 9, weight: .bold)).foregroundColor(foregroundColor) }
24}
25enum Defs {
26    static let tabItems: [TabItemDescription] = [.init(imageName: "house.fill", title: "HOME"), .init(imageName: "magnifyingglass", title: "SEARCH"), .init(imageName: "person.fill", title: "PROFILE")]
27    static let accentColor = Color(UIColor(red: 0, green: 0.251, blue: 0.6588, alpha: 1)); static let backgroundColor = Color(UIColor(red: 0.945, green: 0.969, blue: 0.984, alpha: 1.000))
28    static let topFrameSize = CGSize(width: 75, height: 24)
29    static let tabbarHeight = CGFloat(49)
30    static let bottomSafeArea = CGFloat(40)
31    static let iconCircleEdge = CGFloat(40)
32    static let labelOffset = CGSize(width: 0, height: 32)
33    static let bottomSafeAreaOffset = CGSize(width: 0, height: Defs.bottomSafeArea * 0.5)
34}
35
36struct ContentView: View {
37    @State var selectedIndex = 0
38    var body: some View {
39            ZStack {
40                Text("Welcome").font(.largeTitle) // main contents example
41                GeometryReader { proxy in
42                    VStack {
43                        Spacer()
44                        HStack(alignment: .bottom, spacing: 0){
45                            ForEach(0..<3) { (index) in
46                                VStack(spacing: 0) {
47                                    Spacer()
48                                    Rectangle()
49                                        .foregroundColor( .clear )
50                                        .frame(width: Defs.iconCircleEdge, height: Defs.iconCircleEdge)
51                                        .overlay(
52                                            ZStack {
53                                                Defs.tabItems[index].iconView(.white).opacity(self.selectedIndex == index ? 1.0 : 0.0)
54                                                Defs.tabItems[index].iconView(Defs.accentColor).opacity(self.selectedIndex != index ? 1.0 : 0.0)
55                                            }
56                                        )
57                                        .background(
58                                            ZStack {
59                                                Defs.tabItems[index].labelView(.black).opacity(self.selectedIndex == index ? 1.0 : 0.0)
60                                                Defs.tabItems[index].labelView(.clear).opacity(self.selectedIndex != index ? 1.0 : 0.0)
61                                            }.offset(Defs.labelOffset)
62                                        )
63                                    Rectangle()
64                                        .foregroundColor(.clear)
65                                        .frame(height: self.selectedIndex == index ? 26 : 5)
66                                }
67                                .frame(width: proxy.size.width * 0.333)
68                                                            .contentShape( Rectangle() )
69                                                            .onTapGesture {
70                                                                withAnimation(.interactiveSpring(response: 0.4, dampingFraction: 0.7) ) { self.selectedIndex = index }
71                                                            }
72                                                        }
73                                                    }
74                                                    .background(
75                                                        Rectangle()
76                                                            .frame(height: Defs.topFrameSize.height + Defs.tabbarHeight + Defs.bottomSafeArea)
77                                                            .overlay(
78                                                                Circle()
79                                                                    .foregroundColor(Defs.accentColor)
80                                                                    .frame(width: Defs.iconCircleEdge, height: Defs.iconCircleEdge)
81                                                                    .offset(CGSize(width: CGFloat(self.selectedIndex - 1) * (proxy.size.width * 0.333), height: -29))
82                                                            )
83                                                            .foregroundColor(.white)
84                                                            .offset(Defs.bottomSafeAreaOffset)
85                                                            .mask(
86                                                                VStack(spacing: 0) {
87                                                                    TopFrameView()
88                                                                                                           .frame(width: Defs.topFrameSize.width, height: Defs.topFrameSize.height)
89                                                                                                           .offset(CGSize(width: CGFloat(self.selectedIndex - 1) * (proxy.size.width * 0.333), height: 0))
90                                                                                                       Rectangle()
91                                                                                                           .frame(height: Defs.tabbarHeight + Defs.bottomSafeArea)
92                                                                                                   }.offset(Defs.bottomSafeAreaOffset)
93                                                                                               )
94                                                                                               .shadow(color: Color.black.opacity(0.3) , radius: 15, x: 0, y: 0)
95                                                                                       )
96                                                                                       .frame(height: Defs.topFrameSize.height + Defs.tabbarHeight)
97                                                                                   }
98                                                                               }.ignoresSafeArea(edges: [.trailing, .leading])
99                                                                           }.background(Defs.backgroundColor)
100                                                                       }
101                                                                   }
102
103struct TopFrameView_Previews: PreviewProvider {
104    static var previews: some View {
105        ContentView()
106    }![イメージ説明](d160ba3bf17fd1b931e0d17cfd9f7304.png)
107}
108
109
110
111

行動規範の内容に同意します

回答1件

ベストアンサー

tabItemsの要素を追加して

    static let tabItems: [TabItemDescription] = [.init(imageName: "house.fill", title: "HOME"),
                                                 .init(imageName: "magnifyingglass", title: "SEARCH"),
                                                 .init(imageName: "person.fill", title: "PROFILE"),
                                                 // 以下コピペで増やしました。自分で書き直してください
                                                 .init(imageName: "magnifyingglass", title: "SEARCH"),
                                                 .init(imageName: "person.fill", title: "PROFILE")]

Swift
1ForEach(0..<3) { (index) in

タブを生成しているこの場所の3の部分をDefs.tabItems.countに書き換えれば増やせると思います。

追記
レイアウトを直した全体コード

Swift
1import SwiftUI
2import MapKit
3
4struct TopFrameView: Shape {
5    func path(in rect: CGRect) -> Path {
6        let bezierPath = UIBezierPath()
7        bezierPath.move(to: CGPoint(x: 53.22, y: 4.36))
8        for (to, controlPoint1, controlPoint2) in [(CGPoint(x: 60.83, y: 13.06), CGPoint(x: 57.76, y: 7.77), CGPoint(x: 60.14, y: 11.68)), (CGPoint(x: 68.43, y: 22.84), CGPoint(x: 63, y: 17.4), CGPoint(x: 65.05, y:20.96)), (CGPoint(x: 75.16, y: 23.98), CGPoint(x: 70.49, y: 23.98), CGPoint(x: 75.16, y: 23.98))] {
9            bezierPath.addCurve(to: to, controlPoint1: controlPoint1, controlPoint2: controlPoint2)
10        }
11        bezierPath.addLine(to: CGPoint(x: 0.84, y: 23.98))
12        for (to, controlPoint1, controlPoint2) in [(CGPoint(x: 7.57, y: 22.84), CGPoint(x: 0.84, y: 23.98), CGPoint(x: 5.51, y: 23.98)), (CGPoint(x: 15.17, y: 13.06), CGPoint(x: 10.95, y: 20.96), CGPoint(x: 13, y: 17.4)), (CGPoint(x: 22.78, y: 4.36), CGPoint(x: 15.86, y: 11.68), CGPoint(x: 18.24, y: 7.77)), (CGPoint(x: 36.38, y: -0), CGPoint(x: 27.58, y: 0.77), CGPoint(x: 33.55, y: 0.1)), (CGPoint(x: 38, y: 0), CGPoint(x: 37.39, y: -0.04), CGPoint(x: 38, y: 0)), (CGPoint(x: 53.22, y: 4.36), CGPoint(x: 38, y: 0), CGPoint(x: 46.7, y: -0.53))] {
13            bezierPath.addCurve(to: to, controlPoint1: controlPoint1, controlPoint2: controlPoint2)
14        }
15        bezierPath.close()
16        return Path(bezierPath.cgPath)
17    }
18}
19struct TabItemDescription {
20    var imageName: String
21    var title: String
22    func iconView(_ foregroundColor: Color) -> some View { Image(systemName: imageName).font(.system(size: 24)).foregroundColor(foregroundColor) }
23    func labelView(_ foregroundColor: Color) -> some View { Text(title).font(.system(size: 9, weight: .bold)).foregroundColor(foregroundColor) }
24}
25enum Defs {
26    static let tabItems: [TabItemDescription] = [.init(imageName: "house.fill", title: "HOME"),
27                                                 .init(imageName: "magnifyingglass", title: "SEARCH"),
28                                                 .init(imageName: "person.fill", title: "PROFILE"),
29                                                 .init(imageName: "magnifyingglass", title: "SEARCH"),
30                                                 .init(imageName: "person.fill", title: "PROFILE")]
31    static let accentColor = Color(UIColor(red: 0, green: 0.251, blue: 0.6588, alpha: 1)); static let backgroundColor = Color(UIColor(red: 0.945, green: 0.969, blue: 0.984, alpha: 1.000))
32    static let topFrameSize = CGSize(width: 75, height: 24)
33    static let tabbarHeight = CGFloat(49)
34    static let bottomSafeArea = CGFloat(40)
35    static let iconCircleEdge = CGFloat(40)
36    static let labelOffset = CGSize(width: 0, height: 32)
37    static let bottomSafeAreaOffset = CGSize(width: 0, height: Defs.bottomSafeArea * 0.5)
38}
39
40struct ContentView: View {
41    @State var selectedIndex = 0
42    var body: some View {
43        ZStack {
44            Text("Welcome").font(.largeTitle) // main contents example
45            GeometryReader { proxy in
46                VStack {
47                    Spacer()
48                    HStack(alignment: .bottom, spacing: 0){
49                        ForEach(0..<Defs.tabItems.count) { (index) in
50                            VStack(spacing: 0) {
51                                Spacer()
52                                Rectangle()
53                                    .foregroundColor( .clear )
54                                    .frame(width: Defs.iconCircleEdge, height: Defs.iconCircleEdge)
55                                    .overlay(
56                                        ZStack {
57                                            Defs.tabItems[index].iconView(.white).opacity(self.selectedIndex == index ? 1.0 : 0.0)
58                                            Defs.tabItems[index].iconView(Defs.accentColor).opacity(self.selectedIndex != index ? 1.0 : 0.0)
59                                        }
60                                    )
61                                    .background(
62                                        ZStack {
63                                            Defs.tabItems[index].labelView(.black).opacity(self.selectedIndex == index ? 1.0 : 0.0)
64                                            Defs.tabItems[index].labelView(.clear).opacity(self.selectedIndex != index ? 1.0 : 0.0)
65                                        }.offset(Defs.labelOffset)
66                                    )
67                                Rectangle()
68                                    .foregroundColor(.clear)
69                                    .frame(height: self.selectedIndex == index ? 26 : 5)
70                            }
71                            .frame(width: proxy.size.width * 0.2)
72                            .contentShape( Rectangle() )
73                            .onTapGesture {
74                                withAnimation(.interactiveSpring(response: 0.4, dampingFraction: 0.7) ) { self.selectedIndex = index }
75                            }
76                        }
77                    }
78                    .background(
79                        Rectangle()
80                            .frame(height: Defs.topFrameSize.height + Defs.tabbarHeight + Defs.bottomSafeArea)
81                            .overlay(
82                                Circle()
83                                    .foregroundColor(Defs.accentColor)
84                                    .frame(width: Defs.iconCircleEdge, height: Defs.iconCircleEdge)
85                                    .offset(CGSize(width: CGFloat(self.selectedIndex - 2) * (proxy.size.width * 0.2), height: -29))
86                            )
87                            .foregroundColor(.white)
88                            .offset(Defs.bottomSafeAreaOffset)
89                            .mask(
90                                VStack(spacing: 0) {
91                                    TopFrameView()
92                                        .frame(width: Defs.topFrameSize.width, height: Defs.topFrameSize.height)
93                                        .offset(CGSize(width: CGFloat(self.selectedIndex - 2) * (proxy.size.width * 0.2), height: 0))
94                                    Rectangle()
95                                        .frame(height: Defs.tabbarHeight + Defs.bottomSafeArea)
96                                }.offset(Defs.bottomSafeAreaOffset)
97                            )
98                            .shadow(color: Color.black.opacity(0.3) , radius: 15, x: 0, y: 0)
99                    )
100                    .frame(height: Defs.topFrameSize.height + Defs.tabbarHeight)
101                }
102            }
103            .ignoresSafeArea(edges: [.trailing, .leading])
104        }
105        .background(Defs.backgroundColor)
106    }
107}
108
109struct TopFrameView_Previews: PreviewProvider {
110    static var previews: some View {
111        ContentView()
112    }
113}
114