橫豎屏布局效果如下:
橫豎屏不同布局和約束.gif
在inspector中可以看到Trait Variation取代了之前的sizeclass(關于sizeclass這篇文章不錯sizeclass介紹),和sizeclass一樣默認選中狀態(以下截圖都是Xcode8.2環境)
D6D7AEAD-0590-4650-A67E-E64A70E0FBB2.png
用Trait Variations實現橫豎屏不同約束
之前sizeclass 的compact,regular,any位置有所改變,如下:
1.png
準備工作##############
在storyBoard上拖入任意view,設置顏色
2.png
1.豎屏
a.先選中豎屏圖標(橫屏時選中橫屏圖標)
2385DFA8-EAD6-42EF-B9DE-2BA740E82B45.png
b.點擊右側的Vary for Traits,在彈出的小提示框選擇width和height(觀察左側圖標橫豎屏的變化),豎屏時選中height,width選不選都可以,區域變藍
c.選中view添加約束,填完后點擊"Done Varing"
2.橫屏
操作步驟同豎屏,如下:
選中橫屏--->點擊Vary for Traits--->選擇width(height選不選都可以)--->添加約束--->點擊Done Varing
4BA68577-C7CC-4E51-84E6-ECDE4C6BC8F8.png
效果如圖:
橫豎屏不同約束添加.gif
(在我敲這個粗體"豎屏"的時候,發現原來字體是這么調節的,用#號來控制,文字前面一個#應該是最大的字體,#越多字越小#,6個#最小;重啟一行才有效果,應該是為標題之類的專門設置的哇,個人總結歡迎指正)
一個井
前六個井的效果
文字劃線:前后兩個波浪線的效果
斜體:前后三個星號的效果
2BD481AF-EDF8-4963-8A10-2BE88458207E.png
