SwiftUIとGraphQLを使ったInstagramクローンアプリ – HomeView

今日は、GraphQLを使ったInstagramクローンアプリのパート4で、SwiftUIの学習を続け、ホームビューを作成します。

以前の記事では、ユーザーをサインアップする方法と ログインする方法を学び、InstagramクローンアプリのそれぞれのUIでProfileビューを作成しました。今日はそのコードの一部を再利用し、多くのコンテンツを持つUIScrollViewに似たものを作成します。

シートベルトを締めて、さあ始めましょう！

より良い学習のために、ソースコード付きのiOSインスタグラム・クローン・プロジェクトをダウンロードしてください。

すぐに始めたいですか？

私たちのハブからこのアプリをクローンして、何の苦労もなく使い始めましょう！

具体的に何を作るか

私たちは以下のビューを構築します：

先ほど見たように、SwiftUIは多くのコンポーネントをとても簡単に再利用できるので、このような複雑なインターフェイスを構築するのがとても簡単です。ここでの言葉は「再利用」です。

下のバーをすでにコーディングしたことを覚えていますか？これを再利用します。それ以外はすべて新しいものだ。

VStacksとHStacksについてはもう説明しない。

UIコンポーネント

この画面は基本的に4つのコンポーネントで構成される：

• トップバー（カメラ、Back4Gramの文字列、家のアイコン、紙飛行機のアイコンがある）
• 履歴バー（履歴のアイコンがあります）
• タイムラインの詳細表示（実際の投稿が表示されます）
• 一番下のバー（再利用します）

それでは、これらを作り始めましょう！

トップバー

トップバーは5つのコンポーネントで構成されています：

• カメラボタン
• Back4Gram文字列
• スペーサー
• 家ボタン
• 紙飛行機ボタン

すでに学んだようにボタンのアイコンを追加して、コーディングを始めよう。

HomeView.swiftを作成し、GeometryReaderを追加します：

前のチュートリアルと同じように、VStackを追加しましょう：

トップバーは水平に並んだコンポーネントの組み合わせになるので、HStackを追加して作成しましょう：

最後に、使用するコントロールを追加する：

どうですか？

どうですか？

それでは

ヒストリーバー

ヒストリーバーは複雑なコンポーネントです。昔のUIKitにあったUIScrollViewのようなものですが、その中に画像とその下のテキストで構成されるコントロール（別名VStack）があります。その構造を作ってみよう：

これをメインのVStackに入れるのは、ScrollViewを追加するのと同じくらい簡単です。そして、よりきれいにするために、水平方向にのみスクロールするようにし、スクロールインジケーターを非表示にしましょう：

そして、最後にこれをメインのVStackに追加します：

見た目のチェック

では、さっそく最初に…

ボトム・バー

それでは、再利用性を楽しんでみよう。BottomBar.swiftファイルからコードに追加するだけです：

そして、私たちの完全なコード：

簡単だったでしょう？どうですか？

スイフト！

複雑さを加える

このViewで最も複雑な部分はTimeline Detailed viewになります。

TimelineViewで行ったことと一貫性を保つために、TimlineDetailView.swiftという名前の新しいファイルを作成し、その中にTimelineViewと同じようにデータを保持する新しい構造体を作成しましょう。

既にTimelineViewでPreview構造体が宣言されているので、それを再利用しましょう。

StructはPreviewを受け取るので、後でimageUrlを取得することができます：

そして、ビューを追加しましょう：

メインコンテンツもVStackに入れます：

VStackには4つのコンポーネントがあります：

• ロゴ、テキスト、3つの点ボタンを含むHStack
• 投稿画像
• ハートボタン、コメントボタン、紙飛行機ボタン、国旗ボタンがあるHStack
• テキスト “Liked by… “と “すべてのコメントを見る “を含むVStack”

それでは、最初のHStackを追加することから始めましょう：

そして、その中にコントロールを追加する：

次に画像を追加します：

すべてのボタンを持つ2番目のHStack：

そして、そのコントロール：

そして最後に、私たちのテキストVStackです：

さて、TimelineDetailViewの中に、いくつかのプレビューをハードコーディングしてみましょう：

そして最後に、ScrollViewにPreviewDetailViewを追加してループさせます：

最後に、それをHomeViewに追加しましょう：

最後に、結果を見てみましょう：

なんてクールなんでしょう！

結論

SwiftUIでは再利用性が重要です。

今日は、以前の記事からBottomViewとPreview構造体を再利用する方法を学びました。

そろそろ機能的なものが出てくるので、それを待つのがやっとです。

期待していてください！

参考

• このシリーズのパート1はInstagram Clone Appです。
• 第2回はSwiftのInstagramクローンです。
• パート3は、Instagramのプロフィールです。
• パート4はInstagram Homeviewです。
• iOSのInstagramクローンプロジェクトをソースコード付きでダウンロードして、Back4Appを使い始めましょう。

今すぐBack4Appにサインアップして、 Instagramクローンアプリの開発を始めましょう。