iOSアプリ開発者必見！SwiftUIのTabViewとScrollViewを用いた画面テンプレート大公開

はじめに

こんにちは。
日頃からiOSアプリ開発を行なっているAtsuです。

この記事では、SwiftUIのTabViewやScrollViewを用いて、様々なアプリに導入されているビューレイアウトの実装方法を紹介します。

TabViewとScrollViewを使いこなせると、アプリ画面デザインの可能性が一気に広がります。

ぜひ、これらのテンプレートを活用して、あなたのアプリをさらに魅力的なものに仕上げましょう!!

特典：SwiftUIのViewテンプレート

最終的に以下のような画面表示を目指します。画面上部のスクロールバーや画面下部のタブバーはよくアプリで見るデザインだと思います。

画面を横にスクロール、または、画面下部のアイコンをタップすることでタブを切り替えることができます。

完成イメージ

TabViewの実装

そもそもTabViewとは？

TabViewとは、画面下部にタブを表示させて複数のView(画面)を切り替え表示する機能です。以下の実装例では、一般的によくあるホームタブや検索タブ、通知タブ、アカウントタブなどを用意しています。

公式のApple Developer Documentationでの説明はこちら。

では早速、以下のサンプルコードをコピーして実装してみましょう🚀🚀