-
Notifications
You must be signed in to change notification settings - Fork 0
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.
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
✨ Bottom bar 実装 #3
Comments
🔧 要件追加
|
🗒 メモ : flutterのように個別のWidgetとしてBottom bar を切り出したいSwiftUIでボトムバーを再利用するには、以下のように自分自身を表示するViewを構造体で作成して、他の画面で使用する。 struct BottomBar: View {
var body: some View {
// Bottom Bar Content Here
}
} 別の画面では、次のようにBottomBarを使用することができる。 struct SomeView: View {
var body: some View {
VStack {
// Some View Content Here
BottomBar()
}
}
} |
- 構造体プロパティの関数として実装し、View実装時に都度引数 color を指定できる実装にした。後々の「プログレスサークルの色を動的に変更させる」で効果を発揮しそう!
🗒 メモ :
|
🗒
|
🗒 タブバーの色を変更する方法
struct BottomBar: View {
// ボトムバーの色を定義
init() {
UITabBar.appearance().backgroundColor = .darkGray
UITabBar.appearance().unselectedItemTintColor = .gray
}
参考文献 ▼
|
👀 備考残件ありにつき、本課題はまだ進行中とする |
👀 残件
|
🗒 カスタムタブバーの実装方法
▼ モデル struct BottomBarItem {
let image: String
let view: AnyView
} ▼ 中身 let bottomBarItems = [
BottomBarItem(image: "graduationcap.fill", view: AnyView(ActView())),
BottomBarItem(image: "square.fill", view: AnyView(PlanDoView())),
BottomBarItem(image: "checkmark.circle.fill", view: AnyView(CheckView()))
] タブバーの実装//MARK: ボトムバーの実装
struct BottomBar: View {
// タブの選択値と初期値.
@State private var selected = 0
var body: some View {
ZStack {
// 背景色.
Color.backGroundColorGray.ignoresSafeArea()
// メイン画面部分はTabViewで定義.
TabView(selection: $selected) {
ForEach(0 ..< 3) { index in
bottomBarItems[index].view
.tag(index)
}
}
// PageTabスタイルを利用する(インジケータは非表示).
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
VStack {
Spacer(minLength: 0)
// タブビュー部分.
HStack {
ForEach(0 ..< 3) { index in
Image(systemName: bottomBarItems[index].image)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 20, height: 20)
.onTapGesture {
self.selected = index
}
.foregroundColor(self.selected == index ? Color.black : Color.gray)
}
}
.padding(.vertical, 10.0)
.padding(.horizontal, 20.0)
.background(Color.white.clipShape(Capsule()))
.shadow(color: Color.black.opacity(0.3), radius: 5, x: -5, y: 5)
}
}
}
} ▼ 参考記事 |
👀 残件
|
🎫 関連課題
✨ 実現したいこと
先週の振り返りアイコン
今週のやることページ(week)アイコン
カレンダーアイコン
色
00DBB5
96A7AF
🚩 やらないこと
🔀 達成条件
👀 備考
The text was updated successfully, but these errors were encountered: