天天看點

ios autolayout 網絡筆記

  先介紹一下幾種AutoLayout自動布局所經常使用的布局限制類型

  • width表示限制ui控件的固定寬度
  • height表示限制ui控件的固定高度
  • Leading Space to Superview 與父視圖的左邊界線保持固定距離
  • Trailing Space to Superview 與父視圖的右邊界線保持固定距離
  • Top Space to Superview 與父視圖的頂部邊界線保持固定距離
  • Bottom Space to Superview 與父視圖的底部邊界線保持固定距離
  • Horizotal Spacing 兩個子視圖之間的水準距離保持固定長度
  • Vertical Spacing 兩個子視圖之間的垂直距離保持固定長度
  • Width Equally 兩個子視圖之間保持相等的寬度
  • Height Equally 兩個子視圖之間保持相等的高度

  建立一個single view application的模闆項目,向Main.stroryboard拖入兩個button按鈕,分别設定background的顔色為紫色和綠色,可以看到在畫布上顯示正确的兩個button在不同尺寸螢幕的裝置上的運作效果都有所偏差

ios autolayout 網絡筆記

實際裝置上的運作效果:

ios autolayout 網絡筆記

iPhone 4s上的運作效果

因為我想要這兩個button一直是保持這樣的尺寸:兩個button寬和高要相等,同時兩個button離螢幕的兩邊都保持固定距離,且兩個button之間的距離一直保持不變,是以添加以下限制:

  • 分别選擇兩個button并點選editor->pin->width,editor->pin->height設定其固定寬度和高度
  • 分别選擇兩個button并點選editor->pin->Leading Space to Superview,editor->pin->Trailing Space to Superview固定其和父視圖之間的邊界距離
  • 按住shift分别點選兩個button,并點選editor->pin->Horizontal Spacing設定兩個button之間保持固定的長度距離
  • 按住shift分别點選兩個button,并點選editor->pin->Width Equally設定兩個button擁有相等的寬度

增加完上面的限制後就可以看到程式運作的顯示結果不會顯得那麼難看了

ios autolayout 網絡筆記

并且就算旋轉螢幕也能得到比較好的結果:

ios autolayout 網絡筆記

[菜鳥成長記]iOS開發自學筆記04-AutoLayout自動布局