講座のゴール
MUST: デザイナー視点で、swifyUIでどんなことができるのか？がわかる💡
WANT: 以下に書いてあることを実践して、ビルドに成功する👏👏👏
協力して欲しいこと
皆さんがそれぞれゴールにたどり着くために、わからない部分は遠慮せず言って欲しいです！
その場で質問する
notionのテキストにコメントしておく
あとの質問タイムに拾ったり、
講座終了後に、個人的に教えたりします！
講座のアウトライン
教えられそうだなーってことを列挙してます。
時間みて、2時間の中では優先順位決めて抜粋してやります。
1.
ファイルを作ってHello World!
1
2.
カードを作る
3.
インタラクション
4.
独自のカスタマイズ
5.
質問対応
進め方
18人の方がそれぞれ持ち帰りつつ、基本的なことをできるようになってもらうために以下の進め方をします！
1.
まず、りゅーが画面共有で解説しながら作っていく
2.
そのあと、質問タイムをとる
3.
その方に画面共有してもらい、解決する
4.
時間になったら次に進む
日程
5/3 15:00~17:00(18:00までバッファ+質問受付)
事前準備
必要な環境
macOS 10.15以上
Xcode 11以上
Xcodeが入ってない人は、以下からインストール（重いので、必ず事前にお願いします）
以下のようにしい「Create a New Xcode Project」→「Single View App」→「swiftUI」が選択できれば準備OKです！
準備
新規ファイルを作成
1.
「「Create a New Xcode Project」
2.
「Single View App」
3.
「swiftUI」になっていることを確認し、「Next」
4.
保存先フォルダを選択し、「Create」
5.
左上のデバイス名が「iPhone 11」になっているか確認
Step1 Hello! World!
新しいファイルを開くと、以下のコードが書かれています。
struct yuruSwift: View {
var body: some View {
Text("Hello, World!")
}
}
Swift
中身を変える
Text("ゆるゆるSwiftUI")
Swift
確認方法
プレビューが止まったとき
1.
「Resume」をおす
Step 2 カードを作る
こんなカードを作っていきましょう〜！
カード作りに必要な要素を並べていきます。
縦並べ/横並べ
1.
command + クリックでメニュー出す
2.
「Embed in VStack」
// 縦並べ
VStack {
Text("Hello, World!")
Text("Hello, World!")
}
Swift
// 横並べ
HStack {
Text("Hello, World!")
Text("Hello, World!")
Swift
フォントスタイルをつける
右側のパネルでフォントサイズを変更
Text("Hello, World!")
.font(.title)
Swift
画像を入れる
1.
「Assets.xcassets」を開く
2.
使いたい画像をドラッグ&ドロップ
3.
以下のコードを書く
Image("画像の名前")
Swift
※シングルクォーテーション'ではなく
ダブルクォーテーション" を使います。
その他のスタイルをつける
要素のサイズ、余白
右のパネルで指定すると、自動でコードが書かれます
.frame(width: 200.0 ,alignment: .leading) //幅を200pxに
.padding(.all, 16.0) //上下左右に16pxの余白
Swift
シャドウ
1.
右側の「Add Modifier」を押す
2.
Shadowを選ぶ
.shadow(radius: 10) //blurが10pxのシャドウ
//もしくは、以下を自分で書く。色、blur、x、yが指定できる
.shadow(color: Color.gray, radius: 8, x: 0, y: 4)
Swift
3.
右のパネルからBackgroundを追加し、Whiteに変更
.background(Color.white) //shadowの前につける
.shadow(radius: 10)
Swift
4.
.clipped()を追加
.frame(width: 200.0)
.padding(.all, 16.0)
.background(Color.white)
.clipped() //必ずこの順番に
.shadow(radius: 10)
Swift
全ての要素についてしまう
まだ中身にかかってしまう
思った通りにつく
角丸
.frame(width: 200.0)
.padding(.all, 16.0)
.background(Color.white)
.clipped()
.cornerRadius(8.0)//shadowより前に。そうしないと、shadowが消えます
.shadow(radius: 10)
Swift
コンポーネント化
1.
作ったカードのコードを、全てコピー
2.
すぐ下に貼り付け
3.
名前をUserCardなどに変える
4.
ContentViewに、VStackなどで囲んだUserCard()を書く
struct yuruSwift: View {
var body: some View {
VStack{
UserCard()
UserCard() //複数書くと、コンポーネントを複数置けます
}
}
}
Swift
Step 3 インタラクション
画面遷移
さっき作ったカードでプッシュ遷移してきましょう〜！
1.
ContentView直下の要素を、NavigatoinView{}で囲む
NavigationView {
VStack{
UserCard()
UserCard()
}.navigationBarTitle("Title", displayMode: .inline)
}
Swift
2.
VStackに、.navigationBarTitleをつける
NavigationView {
VStack{
UserCard()
UserCard()
}.navigationBarTitle("Title")
}
// displayMode: .inline をつけると、ナビゲーションバー内に置くこともできる
.navigationBarTitle("Title", displayMode: .inline)
Swift
3.
リンクにしたい要素を、NavigationLink{}で囲む
1.
まず、リンク先のファイルを作る
1.
command + N
2.
SwiftUIViewを選ぶ
3.
DetailViewなどの名前をつけて保存
2.
右上の「+」を押して、NavigationLinkを選択
3.
Destinationにリンク先、Label Contentにリンクにしたい要素を入れる
NavigationView {
VStack{
NavigationLink(destination: UserCard()) {
UserCard()
}
UserCard()
}.navigationBarTitle("Title", displayMode: .inline)
}
Swift
フォローボタン
Stateを作る
Stateとは、UIの状態を保存しておけるもの。
1.
struct ContentView: View { のすぐ下に、以下のコードを書く
struct ContentView: View {
@State var isFollow = false //フォローしてるかどうか = オフ
Swift
ボタンを置く
1.
右上の+を押す
2.
「Button」で検索し、「Button」を選択
3.
以下のコードが出てくる
4.
テキストを「フォロー」にしておきます
Button(action: {}) {
Text("フォロー")
}
Swift
ボタンの挙動を追加する
1.
{}の中で改行
2.
以下のコードを書く
Button(action: {
self.isFollow.toggle()
}) {
Text("フォロー")
}
Swift
ボタンのStateに合わせて、スタイルを変える
Stateの状態によって、以下のように切替をします。
オンの時：テキストはフォロー中、ボタンの色はgray
オンの時：テキストはフォロー、ボタンの色はblue
1.
テキストにgrayスタイルを追加
Button(action: {
self.isFollow.toggle()
}) {
Text("フォロー")
.foregroundColor(Color.gray)
}
Swift
2.
foregroundColor()の中を、以下のコードに変える
.foregroundColor(isFollow ? Color.blue : Color.gray)
Swift
このコードは何を意味してる？
画面のレイアウト、画面遷移
ページ内スクロール
1.
+α 独自のカスタマイズ
独自のカラーセットを追加する
1.
「Assets.xcassets」を開く
2.
右クリックして「New Color Set」
3.
ボックスをクリックし、右側パネルでInput Methodを「8-bit Hexadicimal」に
4.
好きなカラーコードを入力
5.
カラーセット名をダブルクリックすると、編集できる
Final Step 皆さんの興味のあることを紹介
レイヤー構造（ボタンを浮かせるなど）
インタラクション
画面遷移
モーダル遷移
ポップアップ遷移
アラート
アクションシート
ジェスチャー
1回タップした時
2回タップした時
長押ししたとき
実際に1画面作ってみる
ナビゲーションバーにボタン
ハーフモーダル
3D表現
そのほか、ここにないことでも一緒に調べつつ作れるかもです