【AutoLayout - 依「瑩幕寬高」比例設定「XY座標」和將「一個視圖」放在「兩個視圖」的中間】

如標題這兩個需求是在開發階段很常遇到的問題,或許各位看了標題尚無法了解其箇中含意,那就容許法蘭克用圖來說明之,假設以下為美術給的兩個需求。

  • 設定綠色 View 的 Y 座標 = 瑩幕高的四分之一(左圖)
  • 設定綠色 View 介於紫色 View 和藍色 View 的中間(右圖)
Green view position Y = Screen height / 4 & Green view center between two views

以上這兩個需求並不難,只是要利用一點小小的技巧就是了,以下就開始來說明其實作方式。


  • 依瑩幕「寬高」比例設定「XY」約束

首先放置一個高度「等於」瑩幕高度四分之一的透明 View 在 Super View 上。並設定其約束如下。

接著設定其它約束

接著拖拉一個要被設定的元件至 Super View 上(這邊法蘭克使用 UIView),並設置其 Y 座標距離透明 View 為 0

接著設定其它約束如下

到這邊已經設定好所有的約束了,最後來看看在各個裝置的結果。


  • 將一個視圖放在兩個視圖的中間

請先自己拖拉兩個元件至 Super View 上(這邊法蘭克拖拉了兩個 UIView)

接著拖拉一個透明的 View 至該兩個元件的中間,並設定其約束

接著拖拉要被置中的元件至透明的 View 中,請確定是拖拉至透明的 View 中

接著調整背景色,並設定其約束

到這邊已經設定好所有的約束了,最後來看看在各個裝置的結果。

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.