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趴之後加上亂數抽卡,還有卡配對出後出現對應意思,那就完整多了,市面上還沒看到有人做,期待學完做一個來玩玩!!!^^