Help us understand the problem. What is going on with this article?

[Swift] SwiftUI + QGrid でサクッとリストを作る

はじめに

この記事は、SwiftUIを触りたての人がQGridというライブラリを用いてお手軽にリストセクションを作るまでを残した記事です。

SwiftUIとは?

SwiftUIは、2019年のWWDCで発表された、従来のUIKitに変わる新しいフレームワークです。

SwiftUIを用いることで、従来より少ないコードでアプリのViewを書くことが出来るということで今回初めて導入をしてみたわけですが、なんせUIKitに慣れている人にとってはなかなか導入のハードルが高いです…

実際、SwiftUI自体にはまだコンポーネントが少なく、ちょろっと触ってみただけだと「なんだやっぱりUIKitがいいや」ってなると思われますが、SwiftUIに向けた素敵なライブラリが数多く存在しています。

[参考] SwiftUIおすすめライブラリ!!

作ったもの

今回はSwiftUIをサクッと試すために、以下のようなものを作りました。

路線名をただリストとして表示しているだけです。

スクリーンショット 2020-04-07 23.50.04.png

これを作るに当たって、QGridというライブラリを導入してみました。

QGridを使うことによって、複数のCellから成るリストを簡単に作成することが出来るようになります。

実装してみた

①セルとセルの中の要素の作成

まずは素のSwiftUIを用いて表示するセルを用意します。今回セルの中身には 鉄道会社名路線名を持つようにしたいので、これら2つのフィールドとあとは付随させるIDを持つ構造体を作成します。

// Struct which has info about each train route
struct TrainRoute: Identifiable {
    var id = UUID()
    let companyName: String
    let routeName: String
}

その構造体から実際に画面に描画するためのいくつかのパラメータを持つCellを定義します。

// The cell which has train route info
struct TrainRouteCell: View {
    var delayList: TrainRoute
    var body: some View {
        VStack(alignment: .leading) {
            Text(delayList.companyName)
                .foregroundColor(.white)
                .fontWeight(.bold)
            Text(delayList.routeName)
                .foregroundColor(.white)
                .fontWeight(.heavy)
                .font(.title)
        }
        .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
        .background(Color.green)
        .cornerRadius(10)
    }
}

私がこのコードを書いたとき、VStackが何者なのか全く分からずに躓いてしまったのですが、これは水平に配置するViewのコンテナです。対して垂直に配置するコンテナがHStackだそうです。

[参考] 【Swift】SwiftUIのAlignment Guide まとめ

②QGridを使ってセルを並べて表示

実際に画面にセルを並べて表示させます。ここでQGridの力が発揮されます((꜆꜄ ˙꒳˙)꜆꜄꜆パンチパンチ

// View which show all train route which is delaying
struct DelayListView: View {
    let trains = [
        TrainRoute(companyName: "JR東日本", routeName: "常磐線"),
        TrainRoute(companyName: "JR東日本", routeName: "水郡線"),
        TrainRoute(companyName: "JR東日本", routeName: "八高線"),
        TrainRoute(companyName: "JR西日本", routeName: "奈良線"),
    ]
    var body: some View {
        QGrid(trains,
              columns: 1,
              vSpacing: 20,
              hSpacing: 20,
              vPadding: 20,
              hPadding: 0
        ) { trainRoute in
            TrainRouteCell(delayList: trainRoute)
        }
    }
}

やっていることとしては、さきほど作成したTrainRouteという構造体からセルに書き出す情報を取得して配列に格納します。

生成した配列をQGrid()に渡してあげることで、配列の要素分だけ情報を元にセルを生成しています。

QGridにも同様のSampleCodeがREADMEに記載されていますので、そちらも併せてご覧ください。

[参考] QGrid

また、この記事はポケモンを画像付きで配置していてとても面白いなと思ったのでぜひ参考にしてみてください。

[参考] SwiftUIでUICollectionViewのようにViewを並べる

おわりに

SwiftUI最高だと思います((꜆꜄ ˙꒳˙)꜆꜄꜆パンチパンチ

参考

QGrid

SwiftUIおすすめライブラリ!!

【Swift】SwiftUIのAlignment Guide まとめ

27ma4_ryusei
社会人3年目のWebエンジニアです(`・ω・´)ゞビシッ!!
https://27ma4-mokumoku.netlify.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away