[SwiftUI]Tinder風アプリのデザイン作ってみる: カードView編

こんにちわ。中川(Twitter)です。
Tinder風デザイン制作が進んだので記事を書いていきます。
今回は写真が表示されるカード部分です。

参考動画: yusukeさん

非常に丁寧に解説してくださっています。

[カードViewを作ってみた]

---

現在、デザインはこのようになっています。
写真に写っている猫ちゃんは実家で飼っている「大吉」です。
バカみたいに可愛いでしょ。

:実装コード

では、カード部分のコードを見ていきます。

// 人物カードのデザインView
struct CardView: View {

    var body: some View {

        GeometryReader(content: { geometry in  // ①

            // 画像にテキストをうまく重ねるため、ZStackを重ねる必要がある
            ZStack {
                ZStack {

                    Image("neko1")　　　// 猫の写真
                        .resizable()
                        .scaledToFill()

                    LinearGradient(gradient: Gradient(colors: [.clear, .black]), startPoint: .top, endPoint: .bottom)

                }
                // Imageとグラディエントをまとめてモディファイアでフレーム調整
                .frame(width: geometry.size.width - 20, height: geometry.size.height)
                .cornerRadius(10)
                .padding(.all, 10)
                .shadow(radius: 10)

                HStack {
                    //(alignment: .leading)でテキストが左寄りに並ぶ
                    VStack(alignment: .leading) {
                        Text("Daikiti")
                            .foregroundColor(Color.white)
                        // system fontを使うことで数値でフォントデザインを指定可能
                            .font(.system(size: 40, weight: .heavy))

                        Text("大阪")
                            .foregroundColor(Color.white)
                            .font(.system(size: 20, weight: .medium))

                        Text("カツオ")
                            .foregroundColor(Color.white)
                            .font(.system(size: 25, weight: .medium))

                        Text("カツオが大好きです")
                            .foregroundColor(Color.white)
                            .font(.system(size: 25, weight: .medium))
                    }
                    // テキストの位置を変えたければpaddingを指定
                    .padding(.leading, 20)

                    // テキストとボタンの間を空ける
                    Spacer()

                    Button(action: {}, label: {
                        Image(systemName: "info.circle.fill")
                            .resizable()
                            .foregroundColor(.white)
                            .frame(width: 40, height: 40)
                    })
                    .padding(.trailing, 50)

                }
            }
        }) // GeometryReader
    }
}

基本的にはZStack,VStack,HStackで各部品の配置をまとめていき、
paddingやSpacerで微調整していってる感じですね。
モディファイアの部分はカスタムモディファイアで併用すればもっとスッキリするかもしれません。

対象としているViewコンテナの親Viewの座標や位置を割り出すことができるGeometryReaderなど、もっと掘り下げて理解したいものも色々と出てきました。この辺についても理解が深まり次第記事に上げたいと思います。

とりあえずカードView作成後の現状でした。
ではでは。

以上