2016年1月8日 星期五

iOS筆記:storyboard autoLayout 範例1

要求:橫向螢幕,16:9的圖片呈現,置中,最大尺寸1280x720



  1. 橫向螢幕
    在Target General Deployment Info設定
  2. 16:9的圖片
    拉一個UIImageView進storyboard,並在此UIImageView 新增 Constraint : Aspect Ratio Multiplier 16:9 (width:height)
  3. 置中
    UIImageView 加入兩個 Alignment Constraints : Horizontally in Container , Vertically in Container
  4. 對UIImageView 四個邊加入Spacing to neatest neighbor Constraints: 0, 0, 0, 0
  5. 左右兩側Constraints保持不動,只修正上下Constraints:Relation改成Greater Then or Equal
    (這樣可以確保圖片是用最大尺寸顯示。)

  6. 原理:我們有一個保持UIImageView長寬比例的約束,因為明顯地寬會比高長,卡住左右邊就能讓圖片在螢幕內。又因要保持長寬比,所以上下要能伸縮(於是成了>=)

  7. 最大尺寸1280x720
    UIImageView 加入兩個 Constraints :Width 1280 , Height 720
    接著修正Relation:Less Then or Equal

  8. 更新後就會是我們所想像的模樣了。
    最終constraint會像這樣:






沒有留言:

張貼留言