SwiftUI触ってみる_[creating and combining views]

SwiftUI とりあえす触ってみよう！

betaダウンロードしました！！macの残り容量が少ない！！！w

頑張ってダウンロードできたのでとりあえずチュートリアルをやってみることに
https://developer.apple.com/tutorials/swiftui/creating-and-combining-views

プレビューが表示されない件

コードで書いたらリアルタイムでプレビューが表示され、プレビューからコードが作れるはずなのに・・・

なぜか表示されない。

と調べていたら、mac osもbetaのcatalinaを入れないといけないんだとか！！！

osのbetaは嫌なので諦める・・・(T^T)

そしてここからはチュートリアルをやりながら書いたソースと結果を適当に貼っておきます。

Textでいろいろいじってみる

最初にプロジェクトを生成するとTextでhello worldを配置しています。

ちょっと文字を大きくしたり、文章を長くしてみました。

var body: some View {
    Text("ラージタイトルだぁぁぁぁぁぁあ！！！")
    .font(.largeTitle)
    .color(.red)
}

結果はこれ・・・ふむ。なるほど。

文字列に改行を入れてみると、１行目のみ表示された。

Text("ラージタイトルだ\nぁぁぁぁぁぁあ！！！")
    .font(.largeTitle)
    .color(.red)
    .lineLimit(0)

lineLimitというのがあって、0行にしてみると

ちゃんと表示されました

さらにスタックビュー要素を入れてみる

var body: some View {
    HStack(alignment: .top) {
        Text("ラージタイトルだぁぁぁぁぁぁあ！！！")
            .font(.largeTitle)
            .color(.red)
            .allowsTightening(true)
            .lineLimit(3)
        VStack(alignment: .leading) {
            Text("良かったねー")
                .font(.title)
                .color(.green)
            Text("どうやってやるの")
                .font(.body)
                .color(.gray)
                .lineLimit(3)
        }
    }
}

ふむふむ。簡単ですね。
ただ、やはりpreviewからゴニョゴニョいじれないので、難しいところもあります。
なかなか細かいところはどのように調整すればいいかはわからないですね。

画像の表示とmask

チュートリアルをもとに丸く切り取った画像も入れてみました。
テキストも変更して、プロフィールっぽく

struct CircleImage: View {
    var body: some View {
        Image("icon_kirin")
            .clipShape(Circle())
            .overlay(
                Circle().stroke(Color.white, lineWidth: 4))
            .shadow(radius: 4)
    }
}

struct ContentView : View {
    var body: some View {
        HStack(alignment: .top) {
            CircleImage()
                .padding(.trailing, 10)
            VStack(alignment: .leading) {
                HStack() {
                    Text("きりんさん")
                        .font(.title)
                        .color(.green)
                    Text("性別:♀")
                        .font(.title)
                        .color(.green)
                }
                Text("私は遠い国から来ました。\n首のながいきりんといいます。この首はとても長いけどなんと骨の数はあなたと")
                    .font(.body)
                    .color(.gray)
                    .lineLimit(3)
            }
        }
        .padding(16)
    }
}

こんな感じ。

地図も表示してみる

そして、なんとなくチュートリアル通りにMapを入れてみたりしました。

struct MapView : UIViewRepresentable {
    func makeUIView(context: Context) -> MKMapView {
        MKMapView(frame: .zero)
    }
    func updateUIView(_ view: MKMapView, context: Context) {
        let coordinate = CLLocationCoordinate2D(
            latitude: 34.011286, longitude: -116.166868)
        let span = MKCoordinateSpan(latitudeDelta: 2.0, longitudeDelta: 2.0)
        let region = MKCoordinateRegion(center: coordinate, span: span)
        view.setRegion(region, animated: true)
    }
}

VStack {
    MapView()
        .frame(height: 300)
        .padding([.leading, .trailing], 10)
        .cornerRadius(500)
    HStack(alignment: .top) {
        CircleImage()
            .padding(.trailing, 10)
        VStack(alignment: .leading) {
            HStack() {
                Text("きりんさん")
                    .font(.title)
                    .color(.green)
                Text("性別:♀")
                    .font(.title)
                    .color(.green)
            }
            Text("私は遠い国から来ました。\n首のながいきりんといいます。この首はとても長いけどなんと骨の数はあなたと")
                .font(.body)
                .color(.gray)
                .lineLimit(3)
        }
    }
    .padding(16)
}

変わった形にしてみました。

何がしたいのかわからない画面が出来上がりましたw

まあとりあえず一通りなにかのviewパーツを生成して、配置したり、
ちょこっと詳細を変更したりする方法はわかりました。

最後に問題が！！！

最後までチュートリアルを読み終えると、ちゃんと理解したのか確認するための問題がありました！
面白い！！
そして、全問正解したので、次のチュートリアルもやってみたいと思います。