微模仿 Podcast
Published in
Jul 11, 2021
先準備 app icon
先把Podcast 圖丟到App icon Generator 製作各種size的icon(之前好像都用 MakeAppIcon ,但我不知道差異😂), 接著把完成的icon拖到assets資料夾內
Podcast 範例圖
搬出 Table View Controller
稍微看了一下 Podcast , 是用滿滿的 cell組成的 , 所以直接到Library 拖一個table view controller
點選table view 後 , 先將Content 改為Static Cells 方便自訂樣式 (記得table view要沒顯示Prototype Cells 的字樣就對了)
- 每個區塊都是可以滑動的scroll view , 所以拖scroll view到介面
- 再拖一個view 到 first responder 下方, 這樣view可以顯示在介面外 ,如圖
- 先在view上排好版 , 把label、image 排一排位置
- 接著要設定scroll view的contentSize ,我的view的width是1152, 所以value也設定1152, 如下圖
- 最後把view 拖進scroll view裡面就完成了( 記得要調整view的x、y位置都在 0 )
多元的 Cell 排版
Podcast 用不同cell 排版方式就讓畫面很豐富, 所以table view真的要學好🤣
下面兩種都是用scroll view + view 的排版方式
- 左邊 是cell 包著兩個scroll view , 使用者可以分別向左滑動
- 右邊則是cell 包著一個scroll view, 然後scroll view 則又包了兩個view
這樣使用者在左滑的時候, 會一整面的4個image 一起滑動
最後完成 table view 排版後 , 加上tab bar controller 跟 navigation controller, 記得源頭都是同一個tab bar controller
大概結構如下圖
然後tab bar controller底下的小圖樣跟title , 若要修改就要各別點選對應的頁面更改
end.
