いざ! SwiftUI -6 レイアウト
写真を表示する場合にキャプション、表題をつけるときに重ねる方法が示されています。
写真の上にテキストを重ねて表示します。MacのPlaygrounds(ipadのSwiftPlaygroundsのMac版)で実行します。XcodeのPlaygroundとは違うのでちょっとコードも変わります。(プレビュー表示するのにPreviewProviderを使わないのでXcode本体と同じコードで表示します)
My app
まず起動時読み込まれるページです。これにContentView()を適応して表示させるようにします。
import SwiftUI
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
メインの構造体ContentView()の指定がありますが、実際のコードは別ファイルCaptionedPhotoで規定します。
CaptionedPhoto
実際に表示する部分のコードです。
import SwiftUI
struct CaptionedPhoto: View {
let assetName: String
let captionText: String
var body: some View {
Image(assetName)
.resizable()
.scaledToFit()
.overlay(alignment: .bottom) {
Caption(text: captionText)
}
.clipShape(RoundedRectangle(cornerRadius: 10.0, style: .continuous))
.padding()
}
}
Image()で画像を表示して、.resizable()などのモディファイアで修飾します。
.overlayで文字を画像の上に表示します。詳細についてはCaption()で表示の方法をさらに定義しています。
struct Caption: View {
let text: String
var body: some View {
Text(text)
.padding()
.background(Color.blue)
.opacity(0.8)
.cornerRadius(20)
.padding()
}
}
作った構造体を利用して変数にデータ入れ込んで文字などを指定してして
という感じに引数を入れます。以下のコードになります。
ContentView
import SwiftUI
struct ContentView:View{
let landscapeName = "train"
let landscapeCaption = "This photo is wider than it is tall."
let portraitName = "train"
let portraitCaption = "This photo is taller than it is wide."
var body: some View {
CaptionedPhoto(assetName: portraitName,captionText:portraitCaption)
}
}
この記事が気に入ったらサポートをしてみませんか?