WWDC 2019 で SwiftUI が発表されましたね。
とりあえず使ってみたいですよね。
Xcode11
SwiftUIを使うにはXcode11 が必要みたいです。
ダウンロードはこちら。beta版をダウンロードできます。
https://developer.apple.com/download/
チュートリアルページはこちら。
実装
- Single View Application -> Next
- Use SwiftUIにチェック
import SwiftUI struct ContentView : View { var body: some View { Text("Hello World!!!!!") } }
- テキストの色、フォントを変える
import SwiftUI struct ContentView : View { var body: some View { Text("Hello World!!!!!") .font(.title) .color(.green) } }
横にプレビューが表示されるみたいですが、私のOSがまだMojave 10.14.5のままなので見てれないです
縦方向に並べる
import SwiftUI struct ContentView : View { var body: some View { VStack { Text("Hello World!!!!!") .font(.title) .color(.green) Text("Hello World!!!!!") .font(.subheadline) } } }
- VStackにalignmentつけつつ横方向に並べる
- Spacer()は空いてるスペース埋めちゃう感じ
import SwiftUI struct ContentView : View { var body: some View { VStack(alignment: .trailing) { Text("Hello World!!!!!") .font(.title) .color(.green) HStack { Text("Hello World!!!!!") .font(.subheadline) Spacer() Text("foooo") } } } }
- padding
import SwiftUI struct ContentView : View { var body: some View { VStack(alignment: .trailing) { Text("Hello World!!!!!") .font(.title) .color(.green) HStack { Text("Hello World!!!!!") .font(.subheadline) Spacer() Text("foooo") } } .padding(.leading) } }
.padding()
だけだと全方向にpaddingできるのかな。画像を丸くする
ページ上部のリンクからサンプルをDLするとチュートリアルで使用している画像を手に入れることができます。
- Assetsに画像をD&Dします
- 新しいSwiftUIファイルを作って「CircleImage」って名前をつけます
CircleImage.swift import SwiftUI struct CircleImage : View { var body: some View { Image("turtlerock") .clipShape(Circle()) .overlay(Circle().stroke(Color.white, lineWidth: 4)) .shadow(radius: 10) } }
.clipShape(Circle())
で画像を丸くできる.overlay()
で画像の周りにstrokeをつけることができる.shadow()
で画像の周りに影をつけられる- RootのViewで
CircleImage()
を呼ぶと丸く切り取られた画像のViewを呼び出すことができる
- 地図を使う
- MapView.swiftファイルを作る
MapView.swift import SwiftUI import MapKit 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) } }
- UIViewRepresentableを継承する
このクラスのことよく分からないのですが
makeUIView()
とupdateUIView()
をオーバーライドして地図の大きさやどこを指すかとか設定って感じこれまで学んだことを組み合わせするとこんなのができる
import SwiftUI struct ContentView : View { var body: some View { VStack { MapView() .frame(height: 300) CircleImage() .offset(y: -130) .padding(.bottom, -130) VStack(alignment: .leading) { Text("Turtle Rock") .font(.title) HStack(alignment: .top) { Text("Joshua Tree National Park") .font(.subheadline) Spacer() Text("California") .font(.subheadline) } } .padding() Spacer() } } }
真ん中に鎮座している画像の位置をoffsetで上のViewに乗せてるんですね。
チュートリアルを最後まで進めたら一番下に問題があるので答えてみます。
こんな感じでチュートリアルの「Creating and Combining Views」は終了です。
後日、続きをやっていきたいと思います。