Swift Coding Hackathon

使用 Swift Playgrounds 用形狀創作有趣的圖案

Transcript

1. 彼得潘 Swift Coding Hackathon 使 用 Swift Playgrounds 用 形狀創作有趣的圖案
2. 小飛 俠彼得潘 連結
3. • 連結 比 方人 臉或動物 參考 Apple 的 Build with Stacks and Shapes 用 形狀創作有趣圖案
4. 打開 Playgrounds，建立 App
5. 建立 App
6. 左邊寫程式，右邊觀看和操作 App 介 面黑色 或 白色 和 iPad 是否打開深 色 模式有關
7. 練習: 建立 一 個 App
8. 移除 VStack { } 裡的程式 • 可以 用 iPad 的鍵盤，也可以外接鍵盤 • 點選選取成為 文 字
9. 拖曳選取 VStack { } 裡的程式，然後點擊選取範圍，選擇刪除 使 用 外接鍵盤的同學可以按住 shift 鍵，然後按 方 向鍵
 選取 VStack { } 裡的程式，然後按 delete 鍵
10. • 先點選畫 面 讓游標出現 • 上 一 步: 三指左滑 • 下 一 步: 三指右滑 上 一 步和下 一 步的 小 技巧
11. 練習: 移除 VStack { } 裡的程式
12. 顯 示 區資料庫有許多可以加到畫 面 的元件，比 方 文 字、圖片、形狀 點選 顯 示 顯 示 區資料庫 有哪些形狀 ?
13. • 查看顯 示 區資料庫有哪些元件 • 查看顯 示 區資料庫有哪些形狀 練習: 點選 ，顯 示 顯 示 區資料庫
14. 膠囊、圓形、橢圓形、路徑、矩形、圓 角 矩形 • 今天會 用 到膠囊、圓形、橢圓形、矩形、圓 角 矩形 • 路徑可以做出任何的形狀，不過比較複雜
15. 游標停在 VStack { } 裡空 白 的 一 行
16. 方 法 1: 從顯 示 區資料庫點選 加入圓形 Circle
17. 方 法 1: 從顯 示 區資料庫點選 在搜尋框輸入 Ci 快速找到圓形
18. 利 用 Circle( ) 產 生 圓形 • 深 色 模式的背景是 黑色 ，圓形是 白色 • 淺 色 模式的背景是 白色 ，圓形是 黑色
19. 方 法 2: 打程式，輸入 ci，選擇 Circle( ) 按 enter 加入圓形 Circle 已經習慣打程式的 小 朋友可以 用方 法 2，還不習慣的可以 用方 法 1 從選單選
20. 練習: 加入圓形
21. 圓形預設的 大 小 是佔滿畫 面 空間的 大 小 拖曳調整畫 面 的 大小 全螢幕顯 示
22. 全螢幕顯 示
23. 點選三 角 形執 行 App
24. 點選上 方 的三個 小 圓點，再點選關閉 停 止 App
25. 練習: 調整畫 面 的 大 小 和執 行 App
26. 如何調整圓形的 大 小 和顏 色
27. 游標停在 Circle( ) 的下 一行
28. 修飾符可以修改元件的樣式和功能，比 方大 小 、顏 色 點選 顯 示 修飾符資料庫
29. 框架可以控制元件的 大 小 點選修飾符資料庫的框架(frame) 在搜尋框輸入 Fr 可快速找到框架
30. 圓形變成寬度(width) 100， 高 度(height) 100 .frame(width:100.0, height:100.0) • .frame 接在 Circle( ) 後，所以會作 用 在圓形上 • 按 tab 鍵可跳到下 一 個輸入框
31. 將 width & height 調成 200
32. 輸入 .fra ，然後按向右鍵展開 手 動從鍵盤輸入
33. 選擇 frame(width:height:) 按 enter 手 動從鍵盤輸入
34. 練習: 利 用 frame 設定圓形的 大 小
35. 點選修飾符資料庫的前景樣式(foregroundStyle) • 游標先停在 .frame 的下 一行 • 在搜尋框輸入 For 可快速找到前景樣式 前景樣式可以控制元件的顏 色
36. 控制元件顏 色 的 foregroundStyle 在框框裡輸入顏 色
37. 點選 ，從顏 色 資料庫選擇顏 色 先點選框框，再點選
38. 選擇薄荷綠 色 • Color.mint 會產 生 薄荷綠 色 • .frame & .foregroundStyle 都是接在 Circle( ) 後，
 所以會作 用 在圓形上
39. 練習: 利 用 foregroundStyle 設定圓形的顏 色
40. 找不到喜歡的顏 色 ?
41. 用 紅(red)、綠(green)、藍(blue)設定顏 色 • https://www.rapidtables.com/web/color/RGB_Color.html • 數字的範圍是 0 ~ 255
42. 用 紅、綠、藍設定顏 色 先點選 foregroundStyle ( ) 裡的框框或讓游標停在 foregroundStyle 的 ( ) 裡
43. 從顯 示 區資料庫選擇顏 色 用 紅、綠、藍設定顏 色 在搜尋框輸入 Colo 可快速找到顏 色
44. 程式裡 red、green、blue 的數字範圍是 0 ~ 1 用 紅、綠、藍設定顏 色 Color( ) 會產 生 顏 色 ，就像 Circle( ) 產 生 圓形
45. 程式裡 red、green、blue 的數字範圍是 0 ~ 1， 用 紅、綠、藍設定顏 色 網 頁 上顯 示 的 red、green、blue 數字範圍是 0 ~ 255， 程式的 red、green、blue 數字範圍是 0 ~ 1， 所以要除 255
46. 練習: 用 紅、綠、藍設定顏 色 https://www.rapidtables.com/web/color/RGB_Color.html
47. 加入矩形 Rectangle • 游標先停在 .foregroundStyle 的下 一行 ，然後再加入矩形 • 在搜尋框輸入 Rec 可快速找到矩形
48. 利 用 Rectangle( ) 產 生 矩形 • Rectangle( ) 和之前的 Circle().frame(width: 200, height: 200).foregroundStyle(Color(red: 72/255, green: 209/255, blue: 204/255)) 是分開的， 一 個是圓形的程式， 一 個是矩形的程式 • 上下排列是因為 VStack
49. 矩形也可以設定 大 小 和顏 色
50. ZStack { } 裡的元件會疊在 一 起，愈後 面 加入的元件會蓋住前 面 的元件， 就像疊疊樂 將 VStack 改成 ZStack ZStack { } 裡的元件會重疊置中顯 示
51. 練習: 加入 Rectangle 和設定 ZStack
52. 膠囊形 Capsule
53. 加入膠囊形 Capsule • 將 Circle 改成 Capsule • 在搜尋框輸入 Cap 可快速找到膠囊
54. 加入膠囊形 Capsule 寬 高一 樣的膠囊形就是圓形
55. 寬 200 高 300 的膠囊形
56. 練習: 將圓形 Circle 改成膠囊形 Capsule
57. 如何移動矩形 想要膠囊形當臉，矩形當脖 子
58. 位移可以移動元件 點選修飾符資料庫的位移(Offset) • 游標先停在 Rectangle 的 foregroundStyle 後 • 在搜尋框輸入 O ff 可快速找到位移
59. offset 會讓元件從原本的位置移動 • x > 0 會向右移動，x < 0 會向左移動 • y > 0 會向下移動，y < 0 會向上移動
60. x 設定 0，y 設定 200 只向下移動
61. 練習: 用 位移(offset)移動形狀
62. 加入圓 角 矩形(RoundRectangle)當衣服 在搜尋框輸入 Roun 可快速找到圓 角 矩形
63. 從 cornerRadius 的數字設定圓 角 弧度 • 膠囊再寬 一 點，width 設定 250 • 讓臉和脖 子 的形狀同 一 個顏 色
64. 練習: 加入圓 角 矩形(RoundRectangle)當衣服
65. 加上半圓形當帥氣的黃 色 頭髪 ? 加入圓形
66. 剪裁可以裁切形狀，比 方 將圓形變成半圓形 點選修飾符資料庫的剪裁(trim) • 游標先停在 Circle( ) 的下 一行 ，trim 一 定要輸入在形狀的後 面 • 在搜尋框輸入 Tri 可快速找到剪裁
67. 裁切形狀的 trim • 游標先停在 trim 的 ( ) 裡，在 ( ) 裡輸入裁切的範圍
68. 輸入 f，然後按向右鍵展開
69. 選擇 (from:to:)
70. 選擇 (from:to:) from 和 to 的數字控制裁切的範圍，數字的範圍是 0 ~ 1
71. 數字的範圍是 0 ~ 1 0 / 1 0.25 0.5 0.75
72. from 設為 0，to 設為 0.25
73. from 設為 0，to 設為 0.5
74. from 設為 0.75，to 設為 1
75. from 設為 0.5，to 設為 1
76. 練習: 使 用 trim 加上半圓形當帥氣的頭髪
77. 範例: 長髮女孩 示 範 用 GPT 寫出圖片裡的程式
78. • 5 種形狀 • Circle(圓形) • Rectangle(矩形) • RoundRectangle(圓 角 矩形) • Capsule(膠囊形) • Ellipse(橢圓形) • 4 種修飾符 • frame(框架)，設定 大 小 • foregroundStyle(前景樣式)，設定顏 色 • o ff set(位移)，移動元件 • trim(剪裁)，裁切形狀 • 堆疊元件的 ZStack 複習
79. • 建立 一 個新的 App • 比 方 加入眼睛、嘴巴、帽 子 • 範例連結 練習: 自 由創作
80. 加入內建的圖片 點選 ，顯 示 符號資料庫
81. 加入兩個星星當眼睛 利 用 Image( ) 生 成圖片
82. 練習: 加入內建的圖片
83. 加入背景圖片
84. • MUSE AI (要登入) • 可以打中 文 • Ideogram(要登入) • 可以打中 文 • Stable Di ff usion XL (免登入) • ChatGPT: 將畫圖指令翻成英 文 AI 畫圖
85. 以 Ideogram 為例，選擇圖片的風格 photo: 照片 illustration: 插畫 3d render: 3D渲染 typography: 排版 cinematic: 電影 poster: 海報 painting: 繪畫 fashion: 時尚 product: 產品 anime: 動漫 architecture: 建築 dark fantasy: 黑 暗奇幻 vibrant: 鮮明 gra ffi ti: 塗鴉 portrait photography: 人 像攝影 wildlife photography: 野 生 動物攝影 conceptual art: 概念藝術 ukiyo-e: 浮世繪 連結
86. 長按圖片，點選儲存到照片 下載 生 成的圖片 海底世界的背景圖，有許多可愛的 魚
87. 練習: 用 AI 生 成背景圖片，然後存到相簿
88. 點選 將相簿的圖片加入 App 打開左邊的側邊欄
89. 點選下圖黃 色 框框的按鈕，然後點選照片
90. 選擇照片
92. 修改照片的名字 長按可點選重新命名
93. 練習: 將相簿的圖片加入 App
94. 選擇影像 游標先停在 ZStack { } 裡的開頭，因為背景圖片要顯 示 在最下 面 ，
 被其它東 西 蓋著
95. 在 Image( ) 裡輸入圖片名字，記得輸入雙引號
96. 外接鍵盤 輸入雙引號的 方 法 按住 shift 鍵和雙引號按鍵
97. iPad 螢幕鍵盤 輸入雙引號的 方 法
98. iPad 螢幕鍵盤 輸入雙引號的 方 法
99. 在 Image( ) 裡輸入圖片名字，記得輸入雙引號 如果右邊沒看 到 App 畫 面 ， 記得點選黃 色 框框的按鈕
100. 練習: 加入背景圖片
101. 加入 文 字 點選顯 示 區資料庫的 文 字 游標停在 ZStack { } 裡的最後 一行 ，讓 文 字在最上層，蓋住其它東 西
102. 利 用 Text( ) 產 生 文 字 Text( ) 裡傳入顯 示 的 文 字，記得要加雙引號
103. 調整 文 字的顏 色 和位置
104. 點選修飾符資料庫的字體(font) 游標停在 Text ( ) 的下 一行 ，font 要接在 Text ( ) 後 面
105. 利 用 font(.title) 讓 文 字變 大
106. 練習: 加入 文 字
107. 設定 App Icon
108. 設定 App Icon
109. 設定 App 名稱
110. 練習: 設定 App Icon 和名稱