「SwiftUI」の版間の差分
ナビゲーションに移動
検索に移動
(→画像) |
(→Sample) |
||
25行目: | 25行目: | ||
====[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とナビゲーションとプレビュー]==== | ||
− | == | + | ==コードサンプル== |
+ | ===Button=== | ||
+ | ---- | ||
+ | <pre> | ||
+ | import Foundation | ||
+ | import SwiftUI | ||
+ | |||
+ | struct ButtonView: View { | ||
+ | |||
+ | @State var cnt:Int = 0; | ||
+ | var body: some View { | ||
+ | VStack { | ||
+ | Button(action: { | ||
+ | self.cnt += 1; | ||
+ | print("print \(self.cnt)") | ||
+ | }) | ||
+ | { | ||
+ | Text("Button+1 (\(self.cnt))") | ||
+ | } | ||
+ | .padding(.horizontal, 25.0) | ||
+ | .font(.largeTitle) | ||
+ | .foregroundColor(Color.white) | ||
+ | .background(Color.green) | ||
+ | .cornerRadius(15, antialiased: /*@START_MENU_TOKEN@*/true/*@END_MENU_TOKEN@*/) | ||
+ | Divider() | ||
+ | Button("Button+2 (\(self.cnt))") { | ||
+ | self.cnt += 2; | ||
+ | } | ||
+ | .font(.largeTitle) | ||
+ | .foregroundColor(.white) | ||
+ | .background( | ||
+ | Capsule() | ||
+ | .foregroundColor(Color.blue) | ||
+ | .frame(width: 200, height: 60, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/) | ||
+ | ) | ||
+ | } | ||
+ | |||
+ | |||
+ | } | ||
+ | } | ||
+ | </pre> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
===画像=== | ===画像=== | ||
[[File:Swiftui image sample.png|600px]] | [[File:Swiftui image sample.png|600px]] |
2021年3月16日 (火) 14:43時点における版
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とナビゲーションとプレビュー
コードサンプル
Button
import Foundation import SwiftUI struct ButtonView: View { @State var cnt:Int = 0; var body: some View { VStack { Button(action: { self.cnt += 1; print("print \(self.cnt)") }) { Text("Button+1 (\(self.cnt))") } .padding(.horizontal, 25.0) .font(.largeTitle) .foregroundColor(Color.white) .background(Color.green) .cornerRadius(15, antialiased: /*@START_MENU_TOKEN@*/true/*@END_MENU_TOKEN@*/) Divider() Button("Button+2 (\(self.cnt))") { self.cnt += 2; } .font(.largeTitle) .foregroundColor(.white) .background( Capsule() .foregroundColor(Color.blue) .frame(width: 200, height: 60, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/) ) } } }
画像
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( Text("SwiftUI Sample") .font(.title) .foregroundColor(.red) ) .clipShape(Circle()/) .shadow(radius: 10) } } } struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } }
図形
import SwiftUI struct Figure: View { var body: some View { VStack { Circle() .foregroundColor(.blue) .frame(width: 100.0, height:100.0) Ellipse() .foregroundColor(.green) .frame(width: 200, height: 100.0) Rectangle() .foregroundColor(.orange) .frame(width: 100.0, height: 100.0) .rotationEffect(.degrees(45)) } } } struct Figure_Previews: PreviewProvider { static var previews: some View { Figure() } }
List
import SwiftUI struct ListView: View { var body: some View { NavigationView { List { Text("List Item") Text("List Item") HStack { Image("add_component_swiftui") .frame(width: 100, height: 100) .scaleEffect(0.2) .aspectRatio(contentMode:.fit) .clipped() .clipShape(/*@START_MENU_TOKEN@*/Circle()/*@END_MENU_TOKEN@*/) } Text("List Item") Text("List Item") }.navigationBarTitle("List Title") } } } struct ListView_Previews: PreviewProvider { static var previews: some View { ListView() } }
List(繰り返し、Section)
import SwiftUI let items = ["item1","item2","item3","item4","item5"]; struct EmbededList: View { var body: some View { VStack { List(0..<items.count) { idx in Text(items[idx]) } .frame(height: 300.0) List { Section(header: Text("Section1")) { ForEach(0 ..< items.count) { idx in Text(items[idx]) } } Section(header: Text("Section2")) { ForEach(0 ..< items.count) { idx in Text(items[idx]) } } } } } } struct EmbededList_Previews: PreviewProvider { static var previews: some View { EmbededList() } }
Tips
画面部品の追加方法
© 2006 矢木浩人