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
150
Swift Coding Hackathon
使用 Swift Playgrounds 用形狀創作有趣的圖案
愛瘋一切為蘋果的彼得潘
April 16, 2024
Tweet
Share
More Decks by 愛瘋一切為蘋果的彼得潘
See All by 愛瘋一切為蘋果的彼得潘
Swift Student Challenge
apppeterpan
0
340
生成式人工智慧在程式開發與程式學習的應用
apppeterpan
0
1.3k
SwiftUI 跨平台 App 開發初體驗 - 開發 iOS, macOS, watchOS 的 MOPCON App
apppeterpan
1
1.5k
使用 WidgetKit 開發 iOS widget
apppeterpan
1
1.1k
如何變成 iOS App 開發魔法師
apppeterpan
0
200
SwiftUI Christmas 交換禮物 App
apppeterpan
0
650
利用_SwiftUI_製作電子書_App.pdf
apppeterpan
2
2.7k
第一次_SwiftUI_10YearChallenge_App_親密接觸.pdf
apppeterpan
0
1.1k
WWDC19 新技術分享: Xcode 11,iOS_13,SwiftUI
apppeterpan
1
1.3k
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Bash Introduction
62gerente
608
210k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Designing for Performance
lara
604
68k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Being A Developer After 40
akosma
87
590k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
How STYLIGHT went responsive
nonsquared
95
5.2k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
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 和名稱