一緒に創造し、成長するために一緒に働きましょう！「ナゲッツデイリー新企画・8月アップデートチャレンジ」参加26日目、クリックでイベント詳細が表示されます。
プロジェクトの背景
とある駅を訪れた際HTMLl+CSS、伸縮式のナビゲーションバーを設置している事例を目にし、非常に興味深かった。
クライアント側の開発では、ナビゲーション バーは不可欠な設計要素の 1 つです。しかし、多くの国内アプリを見ると、基本的には最も基本的なナビゲーション バーであり、新しいアイデアが欠けています。
この章ではSwiftUI、演習として格納式ナビゲーション バーを作成してみます。
それでは、始めましょう。
プロジェクトの建設
まず、という名前の新しいSwiftUIプロジェクトを作成しますSwiftUITabView。
ビューを折りたたむ
スタイルの設計に関しては、伸縮自在のナビゲーション バーを作成する必要があるため、ストレッチと縮小の 2 つのスタイルに分解する必要があります。
まず、状態を格納する変数を宣言する必要があります。例:
@State var isFold: Bool = false
复制代码次に、縮小時にスタイルを構築しましょう。例:
// 收起效果
func foldView() -> some View {
Image(systemName: "list.bullet")
.font(.system(size: 24))
.frame(minWidth: 0, maxWidth: 60, minHeight: 0, maxHeight: 60)
.foregroundColor(.black)
.background(.white)
.cornerRadius(30)
.onTapGesture {
withAnimation(.spring()) {
self.isFold.toggle()
}
}
}
复制代码上記のコードでは、縮小時にスタイル付きビューを構築しますfoldView。基本的なビュー スタイルに加えて、isFoldクリックしたときにボタン ビューの状態を切り替えます。
ビューを展開
关闭次に、ビューを展開すると、展開されたビュー部分は「 」ボタンとの 2 つの部分で構成されます标准的导航栏。スタイルを構築しましょう。
まず、ナビゲーション バーのコンテンツを示す配列を宣言する必要があります。例:
let menuItems = ["首页", "沸点", "课程", "我的"]
复制代码次に、現在選択されているナビゲーション バーの列を表す変数を宣言します。次に例を示します。
@State var selectedItem = 0
复制代码最後に、新しいビューを作成して、展開されたビューのスタイリング部分を完成させます。例:
// 展开效果
func unfoldView() -> some View {
HStack {
Image(systemName: "xmark")
.font(.system(size: 24))
.foregroundColor(.pink)
.onTapGesture {
withAnimation(.spring()) {
self.isFold.toggle()
}
}
ForEach(menuItems.indices, id: \.self) { index in
if index == selectedItem {
Text(menuItems[index])
.font(.system(size: 17))
.padding(.horizontal, 15)
.foregroundColor(.pink)
} else {
Text(menuItems[index])
.font(.system(size: 17))
.padding(.horizontal, 15)
.foregroundColor(.black)
.onTapGesture {
selectedItem = index
}
}
}
}
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 60)
.background(.white)
.cornerRadius(30)
.padding(.horizontal)
}
复制代码上記のコードでは、展開されたビューを作成しますunfoldView。
次に、HStack横方向のビュー レイアウトを使用して、ボタンとナビゲーション バーのテキスト コンテンツを並べて表示します。「关闭」ボタンをクリックすると、切り替え状態になり、現在クリックされている位置に従って選択された列isFoldもindex更新されます。 selectedItem、選択した列を区別するためにピンクのテキスト色を設定します。
ホームビュー
2 つのビューを完了した後、ビューに戻り、例に従ってビューContentViewを設定します。isFold
var body: some View {
ZStack {
Color(.systemGray6)
if isFold {
unfoldView()
} else {
foldView()
}
}.edgesIgnoringSafeArea(.all)
}
复制代码効果は悪くありませんが、トランジション アニメーションがなく、インタラクション全体が少し鈍く見えます。
遷移アニメーション
まず、スワップ位置の状態を格納する変数を宣言します。例:
@Namespace private var Transition
复制代码次にmatchedGeometryEffect、位置遷移の切り替えに修飾子を使用します。matchedGeometryEffect修飾子は、次のように 2 つのボタンを変更する必要があります。
//收起时按钮
Image(systemName: "list.bullet”)
.matchedGeometryEffect(id: "fold", in: Transition)
//展开时按钮
Image(systemName: "xmark”)
.matchedGeometryEffect(id: "fold", in: Transition)
复制代码ここで、最終的な効果を確認したい場合は、シミュレーターを実行して、実際のマシン環境で最終的なインタラクティブな効果を確認する必要があります。
プロジェクトのプレビュー
おめでとうございます。この章の内容をすべて完了しました。
是非、試してみてください。
このコラムが役に立ったら、いいね、コメント、フォローをお願いします〜