| ページ一覧 | ブログ | twitter |  書式 | 書式(表) |

MyMemoWiki

「SwiftUI」の版間の差分

提供: MyMemoWiki
ナビゲーションに移動 検索に移動
23行目: 23行目:
 
====[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===
+
==Sample==
====画像====
+
===画像===
 
[[File:Swiftui image sample.png|600px]]
 
[[File:Swiftui image sample.png|600px]]
 
<pre>
 
<pre>
52行目: 52行目:
 
     }
 
     }
 
}
 
}
 +
</pre>
 +
===図形===
 +
<pre>
 +
import SwiftUI
  
 +
struct Figure: View {
 +
    var body: some View {
 +
        VStack {
 +
            VStack {
 +
                Circle()
 +
                    .foregroundColor(/*@START_MENU_TOKEN@*/.blue/*@END_MENU_TOKEN@*/)
 +
                    .frame(width: /*@START_MENU_TOKEN@*/100.0/*@END_MENU_TOKEN@*/, height: /*@START_MENU_TOKEN@*/100.0/*@END_MENU_TOKEN@*/)
 +
                Ellipse()
 +
                    .foregroundColor(.green)
 +
                    .frame(width: 200, height: /*@START_MENU_TOKEN@*/100.0/*@END_MENU_TOKEN@*/)
 +
                Rectangle()
 +
                    .foregroundColor(/*@START_MENU_TOKEN@*/.orange/*@END_MENU_TOKEN@*/)
 +
                    .frame(width: /*@START_MENU_TOKEN@*/100.0/*@END_MENU_TOKEN@*/, height: /*@START_MENU_TOKEN@*/100.0/*@END_MENU_TOKEN@*/)
 +
                    .rotationEffect(.degrees(45))
 +
            }
 +
        }
 +
    }
 +
}
 +
 +
struct Figure_Previews: PreviewProvider {
 +
    static var previews: some View {
 +
        Figure()
 +
    }
 +
}
 
</pre>
 
</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月25日 (月) 13:55時点における版

| Swift | Mac |

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

画像

Swiftui image sample.png

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)
                )
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

図形

import SwiftUI

struct Figure: View {
    var body: some View {
        VStack {
            VStack {
                Circle()
                    .foregroundColor(/*@START_MENU_TOKEN@*/.blue/*@END_MENU_TOKEN@*/)
                    .frame(width: /*@START_MENU_TOKEN@*/100.0/*@END_MENU_TOKEN@*/, height: /*@START_MENU_TOKEN@*/100.0/*@END_MENU_TOKEN@*/)
                Ellipse()
                    .foregroundColor(.green)
                    .frame(width: 200, height: /*@START_MENU_TOKEN@*/100.0/*@END_MENU_TOKEN@*/)
                Rectangle()
                    .foregroundColor(/*@START_MENU_TOKEN@*/.orange/*@END_MENU_TOKEN@*/)
                    .frame(width: /*@START_MENU_TOKEN@*/100.0/*@END_MENU_TOKEN@*/, height: /*@START_MENU_TOKEN@*/100.0/*@END_MENU_TOKEN@*/)
                    .rotationEffect(.degrees(45))
            }
        }
    }
}

struct Figure_Previews: PreviewProvider {
    static var previews: some View {
        Figure()
    }
}

Tips

画面部品の追加方法