掲示板の表示をつくる

掲示板のような簡単なアプリの表示をつくってみたい。

セルの作成

まず、セルにあたる部分をつくる。

MessageingView.swift

import SwiftUI

struct MessageView: View {
    @State var name:String = "佐藤一郎"
    @State var message:String = "いろいろ考えたけど、そういうことじゃないんじゃないかなとおもうんだよね。"
    @State var nameBGColor:Color = Color.green
    var body: some View {
        VStack(alignment: .leading, spacing: 2) {
//            Divider().padding(EdgeInsets(top: 0, leading: 0, bottom: 10, trailing: 0))
            HStack{
                ZStack {
                    nameBGColor
                    Text("名前").foregroundColor(Color.black)
                }.fixedSize(horizontal: true, vertical: true)
                Spacer()
                    .frame(width: 10.0)
                Text(name)
                Spacer()
            }.padding(EdgeInsets(top: 0, leading: 0, bottom: 10, trailing: 0))
            HStack {
                Text(message)
            }
            Divider().padding(EdgeInsets(top: 10, leading: 0, bottom: 0, trailing: 0))
        }.padding(EdgeInsets(top: 0,leading: 30,bottom: 0,trailing: 30))

    }
}

リストの作成

次に、これをリスト表示するビューをつくる。ひとまず、ランダムに生成される発言をForEachで並べている。
実際に作るときはListを使うだろう。

MessageListView.swift

import SwiftUI

struct MessageListView: View {
    @State var name:String = RandomText.getName()
    var body: some View {        
        VStack {
            ForEach(1..<6) { _ in
                MessageView(name: RandomText.getName(), message: RandomText.getMessage(), nameBGColor: Color.random())
            }
        }
    }
}

RandomTextは単に文字列をランダムに取得しているだけである。
Color.randomも色をランダムに取得しているextensionを作った。

RandomText.swift

struct RandomText {
    static let sei = ["佐藤", "織田", "木村", "藤井", "鈴木", "田中","細木", "田村", "清水", "木村", "土井", "土田"]
    static let mei = ["一郎", "二郎", "三郎", "花子", "佳奈子", "四郎", "五郎", "六郎", "七郎"]
    static let message = [
        "いろいろ考えたけど、そういうことじゃないんじゃないかなとおもうんだよね。",
        "ちょっとわからないです。",
        "なるほどね、わかった気がしないでもない。",
        "そう思うことは悪いことじゃないよ、だけど少しだけ気にしたほうが良い。",
        "賛成",
        "うーん",
        "こんなことを思いついたんだけど、忘れちゃった。",
        "そろそろ時間がきました"
    ]
    static func getName() -> String {
        return RandomText.sei.randomElement()! + RandomText.mei.randomElement()!
    }
    static func getMessage() -> String {
        return RandomText.message.randomElement()!
    }
    
}

RandomColor.swift

extension Color {
    static func random()->Color {
        let colors:[Color] = [.blue, .green, .pink, .yellow]
        return colors.randomElement()!
    }
}

部品の組み合わせ

あとは、投稿ボタンなどを部品を組み合わせる。

ContentView.swift

struct ContentView: View {
    @State var isPresentPostSheet: Bool = false
    var body: some View {
        NavigationView {
            VStack {
                HStack {
                    Text("テーマ:")
                    Text("なぜ明日はくるのか")
                }
                Spacer(minLength: 50)
                VStack {
                    MessageListView()
                    Spacer().frame(width: 0, height: 30, alignment: .center)
                    HStack {
                        Button(action: {
                            self.isPresentPostSheet = true
                        }) {
                            Text("投稿する")
                        }
                    }
                    Spacer()
                }
            }
            .navigationBarTitle(
                Text(""))
        }.sheet(isPresented: $isPresentPostSheet, content: {PostView()})
    }
    
}

投稿ボタンを押すとシートにUITextViewをラップしたPostViewが表示される等の処置を入れている。

おわりに

ここまでで５時間程度かかった。StoryBoardのように直感的に部品をおいて作ることができないのは不便だが、リストなどを手軽に表示しながら見れる部分は軽快である。細かい制御を行うことは難しいようなので、デザインが決まっている場合、それを実現させるのは大変かもしれない。一方で、iOSエンジニアがデザインまでできるのであれば非常に強いのではないかと思うところがある。