「SwiftUI」の版間の差分
ナビゲーションに移動
検索に移動
(→Tips) |
|||
| 22行目: | 22行目: | ||
====[https://www.typea.info/blog/index.php/2020/12/06/xcode_macos_proguramming/ Xcodeを使ってmacOS プログラミングとplaygroundの作成]==== | ====[https://www.typea.info/blog/index.php/2020/12/06/xcode_macos_proguramming/ Xcodeを使ってmacOS プログラミングとplaygroundの作成]==== | ||
====[https://www.typea.info/blog/index.php/2021/01/23/swiftui_tutorial_list_navigation/ Listとナビゲーションとプレビュー]==== | ====[https://www.typea.info/blog/index.php/2021/01/23/swiftui_tutorial_list_navigation/ Listとナビゲーションとプレビュー]==== | ||
| + | ===Sample=== | ||
| + | ====画像==== | ||
| + | <pre> | ||
| + | import SwiftUI | ||
| + | |||
| + | struct ContentView: View { | ||
| + | var body: some View { | ||
| + | VStack { | ||
| + | Image("add_component_swiftui").resizable() | ||
| + | .aspectRatio(contentMode:.fill) | ||
| + | .frame(width: 400, height: 400) | ||
| + | .scaleEffect(1.2) | ||
| + | .offset(x: -60, y: 0) | ||
| + | .clipped() | ||
| + | .overlay( | ||
| + | VStack { | ||
| + | VStack { | ||
| + | Text("SwiftUI Sample") | ||
| + | .font(.title) | ||
| + | .foregroundColor(.red) | ||
| + | .shadow(color: .red, radius: /*@START_MENU_TOKEN@*/10/*@END_MENU_TOKEN@*/, x: /*@START_MENU_TOKEN@*/0.0/*@END_MENU_TOKEN@*/, y: /*@START_MENU_TOKEN@*/0.0/*@END_MENU_TOKEN@*/) | ||
| + | } | ||
| + | } | ||
| + | ) | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | |||
| + | struct ContentView_Previews: PreviewProvider { | ||
| + | static var previews: some View { | ||
| + | ContentView() | ||
| + | } | ||
| + | } | ||
| + | </pre> | ||
| + | |||
===Tips=== | ===Tips=== | ||
====[https://www.typea.info/blog/index.php/2021/01/23/swiftui_tips_view_component_locate/ 画面部品の追加方法]==== | ====[https://www.typea.info/blog/index.php/2021/01/23/swiftui_tips_view_component_locate/ 画面部品の追加方法]==== | ||
2021年1月23日 (土) 12:44時点における版
目次
SwiftUI
- https://developer.apple.com/jp/xcode/swiftui/
- 1セットのツールとAPIを使用するだけで、あらゆるAppleデバイス向けのユーザーインターフェイスを構築
- 宣言型シンタックスを使
- 宣言型のスタイルは、アニメーションなどの複雑な概念にも適用
デザインツール
- Xcodeには、SwiftUIでのインターフェイス構築をドラッグ&ドロップのように簡単に行える直感的な新しいデザインツールが含まれています
- デザインキャンバスでの編集内容と、隣接するエディタ内のコードはすべて完全に同期されます
ドラッグ&ドロップ
- ユーザーインターフェイス内のコンポーネントの位置は、キャンバス上でコントロールをドラッグするだけで調整できます
ダイナミックリプレースメント
- wiftのコンパイラとランタイムはXcode全体に完全に埋め込まれているため、Appは常にビルドされ実行されます
- 表示されるデザインキャンバスは、単にユーザーインターフェイスに似せたものではなく、実際のAppそのもの
- Xcodeは編集したコードを実際のAppに直接組み入れることができます
プレビュー
- プレビューを1つまたは複数作成して、サンプルデータを取得できる
Swift UI チュートリアルをやってみる
プロジェクト作成〜TextViewのカスタマイズ
Custom Image Viewの作成
Xcodeを使ってmacOS プログラミングとplaygroundの作成
Listとナビゲーションとプレビュー
Sample
画像
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
Image("add_component_swiftui").resizable()
.aspectRatio(contentMode:.fill)
.frame(width: 400, height: 400)
.scaleEffect(1.2)
.offset(x: -60, y: 0)
.clipped()
.overlay(
VStack {
VStack {
Text("SwiftUI Sample")
.font(.title)
.foregroundColor(.red)
.shadow(color: .red, radius: /*@START_MENU_TOKEN@*/10/*@END_MENU_TOKEN@*/, x: /*@START_MENU_TOKEN@*/0.0/*@END_MENU_TOKEN@*/, y: /*@START_MENU_TOKEN@*/0.0/*@END_MENU_TOKEN@*/)
}
}
)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Tips
画面部品の追加方法
© 2006 矢木浩人