#24 Storyboard 電子書 App_DIY SLIME

前言:

WK09 春酒專案與228連假烤肉 @ 西瓜日記 :: 痞客邦 ::

Reference:

#24 Storyboard 電子書 App

開始:

1. 從 App Icon Generator 產生 iOS App Icon

2. 研究 UIImageView 的 Content Mode

in LaunchScreen.storyboard

3. 搭配 tab bar controller & navigation controller

1. Navigation Controller如遺失要拉 segue要選root view controller

3. 客製Navigation bar的顏色(appearance)

Navigation Bar->Bar Tint-> Custom

Navigation Item->Title->Slime Party

4. Tab Bar Icon and SF Symbos

1. Tab Bar Controller要先置於Navigation Controller
2. Tab Bar Controller拉 segue 要選view controllers.
3. Assets裡設定AccentColor or Tab Bar裡設定Image Tint or Bar Bottom Item 裡設Global Tint.

Bar Item->Title->Google Form, Image: square. and.pencil

SF Symbol 3 四種客製顏色的 rendering mode(配色模式）

1. Monocrome (單色)

2. Hierarchical (階層式)

3. Palette (色盤)

4. Multicolor(多色，剛好與Monochrome 一樣，需寫程式客製)

5. 圓角 layer.cornerRadius 設為高度的一半

layer.cornerRadius, Type: Number, Value:50

6. 陰影 layer.shadowOpacity

layer.shadowOpacity, Type: Number, Value:5(Float:1~5)

模擬器跑起來才看得到

7. 設定 content size，實現水平捲動，上下捲動和分頁的 scroll view

1. View 先放在Exit下面，編輯好再加回來Scroll View

2. Scroll View Key Path裡加入Content Size, Tye 選Size. Change the Value to 1300(height) 上下捲動 or width(4300) 左右JBN. Content Size的寬與高決定是否可以上下或左右捲動，Content Size 的寬或高必須大於 Scroll View

1. 上下捲動

2. 左右捲動

3. 分頁效果: Page Enabled, Page的大小即為Scroll View的大小

8. 使用到 iOS SDK 的各種 UI 元件，比方 view，button，label，image view，text field，text view，segmented control，table view，scroll view

9. 熟悉 App gif 錄製，GitHub，Medium

10. Let’s have slime party!

GitHub - gmb728/SlimeDIY