Rf-4 Storyboard 電子書 雷諾曼牌義
先附上熱騰騰的GIF
主題發想
當初想電子書的主題，我就想到前一陣子看到YouTuber蔡哥幫人算命運，而且好像蠻準的，所以我也買了一副卡跟書來看，但因為初學且牌有36張依照問題的問法，牌的解釋會不相同，必須一直查書，所以電子書馬上就想到可以來做看看雷諾曼卡的牌義查詢，這樣APP上直接隨點隨查＾＾
工具使用
View Controller、Tab Bar Controller、Navigation Controller
table view controller with static cells
水平捲動，上下捲動和分頁的 scroll view
label、image view、text view
利用 1024x1024 的圖片設定 App Icon
AI生成APP icon
Interface Builder 的 Attributed 設定文字
客製的 UIButton — filled
水平捲動，上下捲動和分頁的 scroll view
SF Symbol 四種客製顏色
dark-mode
Figma開始主頁使用
開始主頁設定
開始頁面的背景我使用Fima來找到好的設計當背景～
背景
View Controller上使用image view加入圖片，把Content Mode 設定成Aspect Fill，並且不要勾選Clip to Bounds讓照片不要被裁切，這時把照片拉好拉滿到整個畫面完成背景～～
文字
View Controller上使用Label 來設定標題文字Lenormand Travel，用option + return讓他變成兩行顯示
顏色部分我使用FD9270這個色調
字型使用Marker Felt Thin 文字大小為47.0
Button
View Controller上使用Fill Button設定文字GO
字型使用Large Title
image的地方我使用SF的dog.fill內部填滿狗狗圖，Symbol Scale部分我使用Large 讓圖看起來大些，Placement這邊我選擇Leading，因為放文字右邊上面下面都感覺都很怪，還是左邊順眼一點
Padding與文字間距我設定10
Background Configuration 的 Corner Style 選擇 Capsule圓角，按鈕顏色我用內建的橘色
主分類表頁面設定
創建左右捲動的view
這邊我先創一個 view 依照分類跟照片想呈現的大小來設定長度，用14 pro為例左右長度393，依照好牌總共9張，我要有Paging Enabled效果每頁就是一張圖，所以設定長度為393 * 9張再大於一點，Width 設定3600 Height 依照想顯示最好的高度我設定150，底色我設定17341E的綠色
button加入圖片的部分
創建button來加入圖片，實現按圖片可以跳轉到View
圖片Width 設定393 Height 高度我設定與view相同150
這邊因為我不希望圖的背景色去蓋過view的綠色，所以我Background設定為Clear Color都設定好後，把圖都放置剛剛創建的view上
創建左右捲動scroll view
創一個 scroll view 把剛剛弄好的view放置到scroll view上
這時把Paging Enabled打勾，分頁效果很重要
顏色都調成Clear Color與捲動bar都關掉
最重要的地方先到Identity inspector 頁面把contentSize加上，因為總共9張圖一張寬393所以我設定3537，沒有要上下滾動另一個設定0
創建上下捲動的Table View Controller
當創出來時候sub會有個 Table View
把Content 設定成static cells
取消 Show Horizontal / Vertical Indicator 的勾選線選擇None
背景Clear Color這邊Style我使用Inset Grouped直接順眼多了
設定 Table View Cell
這邊我把cell的Row高度設定200預留了50拿來放lable 設定剩下150來拿放置剛剛的左右scroll view
背景設定Clear Color
設定好把scroll view與標題lable一起放置Cell，再來就可以用大絕招，回到Table View設置Section調整為5，這時候會新創建cell，包含裡面所有東西直接全複製不用一個一個做有夠爽
創建Tab Bar Controller、Navigation Controller
這邊我使用SF客制一下Tap icon顏色，其他不多做贅述，而這邊只有一個地方比較重要就是，看到Hydee同學這篇講到以下這功能，找超久＾＾
結果peter就剛好群組貼Hydee同學的文章出來真的非常感謝！！
個別頁面設定
個別頁面這邊用image view設定圖與下方捲動式文字UI，這邊Interface Builder 的 Attributed設定了文字重要地方顯示橘色
清單頁面設定
創建上下捲動的Table View Controller
這邊跟上面一樣 Table View把Content 設定成static cells
這邊Style我使用Inset Grouped，不要先把Sections設高一個做好再來調數量，這時選Section設定header的文字
Table View Cell設定
這邊高度都設定為100
style設定 Subtitle Cell並且調整照片與文字距離為27，文字上下自己的距離20 Accessory設定為Disclosure 後 cell後面會有“ > ”
背景設定色調為8D6A6E
以上設定完就可以回到Table View設定Sections數量，這時一樣他會把欄位裡面所有東西都複製
總結心得
這作業讓我對Storybord內建的功能覺得蠻猛的，現在還沒到超熟，還有很多東西沒摸到，就可以做出一點點app的樣子，要是我這些還沒摸到的或摸到的隱藏功能都摸熟，加上code進來，可能很多人會覺得很多要學，但我怎反而有點興奮，未來學到後面我希望把這app完成度，再提高一點離完成度100這樣還早，才大概50趴之後加上亂數抽卡，還有卡配對出後出現對應意思，那就完整多了，市面上還沒看到有人做，期待學完做一個來玩玩！！！＾＾
