Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Swift Coding Hackathon
Search
愛瘋一切為蘋果的彼得潘
April 16, 2024
0
140
Swift Coding Hackathon
使用 Swift Playgrounds 用形狀創作有趣的圖案
愛瘋一切為蘋果的彼得潘
April 16, 2024
Tweet
Share
More Decks by 愛瘋一切為蘋果的彼得潘
See All by 愛瘋一切為蘋果的彼得潘
Swift Student Challenge
apppeterpan
0
300
生成式人工智慧在程式開發與程式學習的應用
apppeterpan
0
1.2k
SwiftUI 跨平台 App 開發初體驗 - 開發 iOS, macOS, watchOS 的 MOPCON App
apppeterpan
1
1.4k
使用 WidgetKit 開發 iOS widget
apppeterpan
1
1.1k
如何變成 iOS App 開發魔法師
apppeterpan
0
200
SwiftUI Christmas 交換禮物 App
apppeterpan
0
620
利用_SwiftUI_製作電子書_App.pdf
apppeterpan
2
2.7k
第一次_SwiftUI_10YearChallenge_App_親密接觸.pdf
apppeterpan
0
1k
WWDC19 新技術分享: Xcode 11,iOS_13,SwiftUI
apppeterpan
1
1.3k
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Rails Girls Zürich Keynote
gr2m
93
13k
What's in a price? How to price your products and services
michaelherold
243
11k
Atom: Resistance is Futile
akmur
261
25k
Optimising Largest Contentful Paint
csswizardry
31
2.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Thoughts on Productivity
jonyablonski
67
4.2k
What's new in Ruby 2.0
geeforr
341
31k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
39
2.1k
For a Future-Friendly Web
brad_frost
174
9.3k
KATA
mclloyd
27
13k
Transcript
彼得潘 Swift Coding Hackathon 使 用 Swift Playgrounds 用 形狀創作有趣的圖案
小飛 俠彼得潘 連結
• 連結 比 方人 臉或動物 參考 Apple 的 Build with
Stacks and Shapes 用 形狀創作有趣圖案
打開 Playgrounds,建立 App
建立 App
左邊寫程式,右邊觀看和操作 App 介 面黑色 或 白色 和 iPad 是否打開深 色
模式有關
練習: 建立 一 個 App
移除 VStack { } 裡的程式 • 可以 用 iPad 的鍵盤,也可以外接鍵盤
• 點選選取成為 文 字
拖曳選取 VStack { } 裡的程式,然後點擊選取範圍,選擇刪除 使 用 外接鍵盤的同學可以按住 shift 鍵,然後按
方 向鍵 選取 VStack { } 裡的程式,然後按 delete 鍵
• 先點選畫 面 讓游標出現 • 上 一 步: 三指左滑 •
下 一 步: 三指右滑 上 一 步和下 一 步的 小 技巧
練習: 移除 VStack { } 裡的程式
顯 示 區資料庫有許多可以加到畫 面 的元件,比 方 文 字、圖片、形狀 點選 顯
示 顯 示 區資料庫 有哪些形狀 ?
• 查看顯 示 區資料庫有哪些元件 • 查看顯 示 區資料庫有哪些形狀 練習: 點選
,顯 示 顯 示 區資料庫
膠囊、圓形、橢圓形、路徑、矩形、圓 角 矩形 • 今天會 用 到膠囊、圓形、橢圓形、矩形、圓 角 矩形 •
路徑可以做出任何的形狀,不過比較複雜
游標停在 VStack { } 裡空 白 的 一 行
方 法 1: 從顯 示 區資料庫點選 加入圓形 Circle
方 法 1: 從顯 示 區資料庫點選 在搜尋框輸入 Ci 快速找到圓形
利 用 Circle( ) 產 生 圓形 • 深 色
模式的背景是 黑色 ,圓形是 白色 • 淺 色 模式的背景是 白色 ,圓形是 黑色
方 法 2: 打程式,輸入 ci,選擇 Circle( ) 按 enter 加入圓形
Circle 已經習慣打程式的 小 朋友可以 用方 法 2,還不習慣的可以 用方 法 1 從選單選
練習: 加入圓形
圓形預設的 大 小 是佔滿畫 面 空間的 大 小 拖曳調整畫 面
的 大小 全螢幕顯 示
全螢幕顯 示
點選三 角 形執 行 App
點選上 方 的三個 小 圓點,再點選關閉 停 止 App
練習: 調整畫 面 的 大 小 和執 行 App
如何調整圓形的 大 小 和顏 色
游標停在 Circle( ) 的下 一行
修飾符可以修改元件的樣式和功能,比 方大 小 、顏 色 點選 顯 示 修飾符資料庫
框架可以控制元件的 大 小 點選修飾符資料庫的框架(frame) 在搜尋框輸入 Fr 可快速找到框架
圓形變成寬度(width) 100, 高 度(height) 100 .frame(width:100.0, height:100.0) • .frame 接在
Circle( ) 後,所以會作 用 在圓形上 • 按 tab 鍵可跳到下 一 個輸入框
將 width & height 調成 200
輸入 .fra ,然後按向右鍵展開 手 動從鍵盤輸入
選擇 frame(width:height:) 按 enter 手 動從鍵盤輸入
練習: 利 用 frame 設定圓形的 大 小
點選修飾符資料庫的前景樣式(foregroundStyle) • 游標先停在 .frame 的下 一行 • 在搜尋框輸入 For 可快速找到前景樣式
前景樣式可以控制元件的顏 色
控制元件顏 色 的 foregroundStyle 在框框裡輸入顏 色
點選 ,從顏 色 資料庫選擇顏 色 先點選框框,再點選
選擇薄荷綠 色 • Color.mint 會產 生 薄荷綠 色 • .frame
& .foregroundStyle 都是接在 Circle( ) 後, 所以會作 用 在圓形上
練習: 利 用 foregroundStyle 設定圓形的顏 色
找不到喜歡的顏 色 ?
用 紅(red)、綠(green)、藍(blue)設定顏 色 • https://www.rapidtables.com/web/color/RGB_Color.html • 數字的範圍是 0 ~ 255
用 紅、綠、藍設定顏 色 先點選 foregroundStyle ( ) 裡的框框或讓游標停在 foregroundStyle 的
( ) 裡
從顯 示 區資料庫選擇顏 色 用 紅、綠、藍設定顏 色 在搜尋框輸入 Colo 可快速找到顏
色
程式裡 red、green、blue 的數字範圍是 0 ~ 1 用 紅、綠、藍設定顏 色 Color(
) 會產 生 顏 色 ,就像 Circle( ) 產 生 圓形
程式裡 red、green、blue 的數字範圍是 0 ~ 1, 用 紅、綠、藍設定顏 色 網
頁 上顯 示 的 red、green、blue 數字範圍是 0 ~ 255, 程式的 red、green、blue 數字範圍是 0 ~ 1, 所以要除 255
練習: 用 紅、綠、藍設定顏 色 https://www.rapidtables.com/web/color/RGB_Color.html
加入矩形 Rectangle • 游標先停在 .foregroundStyle 的下 一行 ,然後再加入矩形 • 在搜尋框輸入
Rec 可快速找到矩形
利 用 Rectangle( ) 產 生 矩形 • Rectangle( )
和之前的 Circle().frame(width: 200, height: 200).foregroundStyle(Color(red: 72/255, green: 209/255, blue: 204/255)) 是分開的, 一 個是圓形的程式, 一 個是矩形的程式 • 上下排列是因為 VStack
矩形也可以設定 大 小 和顏 色
ZStack { } 裡的元件會疊在 一 起,愈後 面 加入的元件會蓋住前 面 的元件,
就像疊疊樂 將 VStack 改成 ZStack ZStack { } 裡的元件會重疊置中顯 示
練習: 加入 Rectangle 和設定 ZStack
膠囊形 Capsule
加入膠囊形 Capsule • 將 Circle 改成 Capsule • 在搜尋框輸入 Cap
可快速找到膠囊
加入膠囊形 Capsule 寬 高一 樣的膠囊形就是圓形
寬 200 高 300 的膠囊形
練習: 將圓形 Circle 改成膠囊形 Capsule
如何移動矩形 想要膠囊形當臉,矩形當脖 子
位移可以移動元件 點選修飾符資料庫的位移(Offset) • 游標先停在 Rectangle 的 foregroundStyle 後 • 在搜尋框輸入
O ff 可快速找到位移
offset 會讓元件從原本的位置移動 • x > 0 會向右移動,x < 0 會向左移動
• y > 0 會向下移動,y < 0 會向上移動
x 設定 0,y 設定 200 只向下移動
練習: 用 位移(offset)移動形狀
加入圓 角 矩形(RoundRectangle)當衣服 在搜尋框輸入 Roun 可快速找到圓 角 矩形
從 cornerRadius 的數字設定圓 角 弧度 • 膠囊再寬 一 點,width 設定
250 • 讓臉和脖 子 的形狀同 一 個顏 色
練習: 加入圓 角 矩形(RoundRectangle)當衣服
加上半圓形當帥氣的黃 色 頭髪 ? 加入圓形
剪裁可以裁切形狀,比 方 將圓形變成半圓形 點選修飾符資料庫的剪裁(trim) • 游標先停在 Circle( ) 的下 一行
,trim 一 定要輸入在形狀的後 面 • 在搜尋框輸入 Tri 可快速找到剪裁
裁切形狀的 trim • 游標先停在 trim 的 ( ) 裡,在 (
) 裡輸入裁切的範圍
輸入 f,然後按向右鍵展開
選擇 (from:to:)
選擇 (from:to:) from 和 to 的數字控制裁切的範圍,數字的範圍是 0 ~ 1
數字的範圍是 0 ~ 1 0 / 1 0.25 0.5 0.75
from 設為 0,to 設為 0.25
from 設為 0,to 設為 0.5
from 設為 0.75,to 設為 1
from 設為 0.5,to 設為 1
練習: 使 用 trim 加上半圓形當帥氣的頭髪
範例: 長髮女孩 示 範 用 GPT 寫出圖片裡的程式
• 5 種形狀 • Circle(圓形) • Rectangle(矩形) • RoundRectangle(圓 角
矩形) • Capsule(膠囊形) • Ellipse(橢圓形) • 4 種修飾符 • frame(框架),設定 大 小 • foregroundStyle(前景樣式),設定顏 色 • o ff set(位移),移動元件 • trim(剪裁),裁切形狀 • 堆疊元件的 ZStack 複習
• 建立 一 個新的 App • 比 方 加入眼睛、嘴巴、帽 子
• 範例連結 練習: 自 由創作
加入內建的圖片 點選 ,顯 示 符號資料庫
加入兩個星星當眼睛 利 用 Image( ) 生 成圖片
練習: 加入內建的圖片
加入背景圖片
• MUSE AI (要登入) • 可以打中 文 • Ideogram(要登入) •
可以打中 文 • Stable Di ff usion XL (免登入) • ChatGPT: 將畫圖指令翻成英 文 AI 畫圖
以 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: 浮世繪 連結
長按圖片,點選儲存到照片 下載 生 成的圖片 海底世界的背景圖,有許多可愛的 魚
練習: 用 AI 生 成背景圖片,然後存到相簿
點選 將相簿的圖片加入 App 打開左邊的側邊欄
點選下圖黃 色 框框的按鈕,然後點選照片
選擇照片
None
修改照片的名字 長按可點選重新命名
練習: 將相簿的圖片加入 App
選擇影像 游標先停在 ZStack { } 裡的開頭,因為背景圖片要顯 示 在最下 面 ,
被其它東 西 蓋著
在 Image( ) 裡輸入圖片名字,記得輸入雙引號
外接鍵盤 輸入雙引號的 方 法 按住 shift 鍵和雙引號按鍵
iPad 螢幕鍵盤 輸入雙引號的 方 法
iPad 螢幕鍵盤 輸入雙引號的 方 法
在 Image( ) 裡輸入圖片名字,記得輸入雙引號 如果右邊沒看 到 App 畫 面 ,
記得點選黃 色 框框的按鈕
練習: 加入背景圖片
加入 文 字 點選顯 示 區資料庫的 文 字 游標停在 ZStack
{ } 裡的最後 一行 ,讓 文 字在最上層,蓋住其它東 西
利 用 Text( ) 產 生 文 字 Text( )
裡傳入顯 示 的 文 字,記得要加雙引號
調整 文 字的顏 色 和位置
點選修飾符資料庫的字體(font) 游標停在 Text ( ) 的下 一行 ,font 要接在 Text
( ) 後 面
利 用 font(.title) 讓 文 字變 大
練習: 加入 文 字
設定 App Icon
設定 App Icon
設定 App 名稱
練習: 設定 App Icon 和名稱