Skip to content

介紹如何使用 Layout Protocol 來自訂排版,影片分為三個小章節,最後有一個練習題在 assignment 的分支。

Notifications You must be signed in to change notification settings

jane-chao/LayoutProtocolCourse

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 

Repository files navigation

Layout Protocol 基礎教學

✨ 這個課程包含三個影片和一個作業,幫助你掌握 Layout Protocol 的使用基礎。

📚 Layout Protocol 能讓你根據使用者的裝置、字體和 View 的大小來調整排版。

三段影片的內容

1. 排版基礎:自動判斷 view 的大小

認識 Layout 如何讓你能根據裝置、字體大小和 view 需要的寬度來動態地幫你排版。

排版結果

2. 排到滿換行的 Flow Layout

讓每個 view 維持自己的大小,一個一個排列,空間不夠時自動換行。強化你對基礎 Layout 的掌握,並學會如何讀取預設的 spacing,和在 Layout 內做對齊。

Flow Layout

3. 設定 Layout Key

讓每個 view 能在 Layout 時個別提供資訊。我們會設置一個圓形的 Layout,透過 LayoutKey 讓每個 view 自己決定與圓心的距離和位置。

設定 Layout Key

作業

設計視訊聊天畫面(其實都是靜態圖片),圖片大小會依據是否有被 pin 或是被隱藏而調整。

  • 請從 assignment 分支中下載起始檔案,裡面有用 TODO 標記你需要設計的地方。總共只有三個步驟,會練習到 Layout Protocol 和 LayoutValueKey。
  • 詳細內容可以看影片的 12:00 有介紹這個練習題。

作業成果

作業成品

About

介紹如何使用 Layout Protocol 來自訂排版,影片分為三個小章節,最後有一個練習題在 assignment 的分支。

Topics

Resources

Stars

Watchers

Forks

Languages