iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 11
0
自我挑戰組

Hello Swift系列 第 11

11/30 Auto Layout

  • 分享至 

  • xImage
  •  

排版排起來~

Why

  1. 因為iPhone,Ipad有各種不同尺寸,我們要透過Auto Layout設計「自適應使用者介面」(adaptive user interface)以支援各種螢幕解析度。

What

  1. 以約束條件為基礎的佈局系統(constraint-based Layout system),我們只需要學會如何描述約束條件,不需要寫出數學公式。
  2. 用以開發自適應UI,可以依照螢幕的尺寸以及裝置的方向來調整。

How

  1. 於Auto Layout列設定
    X座標、Y座標、寬度、高度
    例如置中為Horizontal in container + Vertically in container兩個constraints
  2. Ctrl鍵+拖曳設定
  3. 束線
    藍色:約束條件
    橘/紅線:指出元件的佈局問題
    虛線:元件應在的位置
  4. 間距約束條件(spacing constraints)
    個人理解為相對位置的概念
  5. 安全區域(safe area)
    佈局導引。範圍是狀態列(status bar)之外的整個視圖,並且會隨著畫面上的狀態列、標籤列等自動調整。

上一篇
10/30 UI元件之Button
下一篇
12/30 Stake View
系列文
Hello Swift30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言