iOS專案開發實戰——如何使用Autoresizing進行螢幕適配
自從iPhone5出來以後,iOS的開發就面臨了螢幕適配的問題。如今隨著iPhone6,iPhone6 plus的釋出,iPhone已經有4種不同的尺寸了。所以對於我們的App,就必須進行設配。本次我們嘗試使用Autoresizing來進行螢幕適配。Autoresizing比Auto Layout更加的方便。具體實現如下:
(1)建立一個iOS應用,在storyboard中不要勾選Use Auto Layout和Use Size Classes。如圖:
。
(2)此時storyboard的設計介面就變為一個iPhone5 大小的介面了。螢幕點為320*568,解析度為640*1136.因為iPhone5是視網膜螢幕,所以寬高分別是螢幕點數乘以二。所以我們一般設計都是基於這個4寸螢幕進行,然後適配到其他大小如4.7寸,5.5寸,3.5寸的螢幕。
(3)在介面加入一個Label,寫入文字,我們以這個控制元件來進行適配。如圖:
。
(4)然後執行在iPhone5下,沒有任何問題,但是執行在iPhone6 plus下,效果如下:。發現文字明顯往左上角偏移。所以,如果我們統一在4寸螢幕上設計,到時候執行在更大尺寸手機上的時候,所有控制元件都會往左上角跑,整個佈局就亂了。
。
(5)來到storyboard中的“Show the Size inspector”中,使用Autoresizing進行適配。
。
(6)兩個正方形之間如果選中,表示距離固定,否則自動伸縮長度。內部正方形的長寬如果選中,表示根據螢幕寬度自動縮放控制元件長寬。
現在我設定Autoresizing如下:表示水平距離螢幕不固定長度,控制元件寬度隨螢幕自動縮放。
。
(7)最後在iPhone6 plus下執行,可以成功的顯示,顯示效果同其他螢幕尺寸。
github主頁:https://github.com/chenyufeng1991 。歡迎大家訪問!
相關文章
- iOS專案開發實戰——螢幕適配、單位點和解析度iOS
- iOS專案開發實戰——使用程式碼獲取螢幕寬高iOS
- Android開發之螢幕適配Android
- vue專案PC端如何適配不同解析度螢幕Vue
- Flutter螢幕適配Flutter
- UIWebView 適配螢幕UIWebView
- iOS專案開發實戰——使用SDWebImage庫進行圖片請求iOSWeb
- iOS專案開發實戰——使用ShareSDK進行QQ和微信分享iOS
- flutter 螢幕尺寸適配 字型大小適配Flutter
- android 螢幕適配Android
- Android 螢幕適配最佳實踐Android
- iOS專案開發實戰——使用AFNetworking進行Http Get請求iOSHTTP
- iOS專案開發實戰——如何進行延時操作iOS
- Flutter實戰 從頭擼一個「孤島」APP(No.1、專案初始化、螢幕適配)FlutterAPP
- 安卓螢幕適配的方案安卓
- 適配iOS 11和iPhoneX螢幕適配遇到的一些坑iOSiPhone
- Flutter螢幕適配 - 等比縮放Flutter
- Android 主流螢幕以及適配Android
- Android 螢幕適配工具類Android
- android螢幕適配詳解Android
- iOS專案開發實戰——使用CoreLocation實現定位iOS
- iOS專案開發實戰——使用使用者首選項資料進行啟動提示iOS
- android螢幕適配三:通過畫素密度適配Android
- Android螢幕適配(理論適配100%機型)Android
- 實踐 | 為 Trackr app 適配大螢幕裝置APP
- android 螢幕適配一:通過自定義View的方式實現適配AndroidView
- 如何高效的構建螢幕適配方案的專案
- iOS專案開發實戰——使用UICollectionView實現瀑布流iOSUIView
- 移動 web 端螢幕適配 – remWebREM
- Android 螢幕適配終結者Android
- H5 分層螢幕適配H5
- android螢幕適配的問題Android
- iOS專案開發實戰——使用CALayer和定時器實現進度條iOS定時器
- 【移動適配】移動Web怎麼做螢幕適配(一)Web
- 【移動適配】移動Web怎麼做螢幕適配(三)Web
- iOS微信更新6.7.4版本:適配iPhone XS MAX大螢幕iOSiPhone
- iOS專案開發實戰——UILabel自適應較多的文字iOSUI
- 極其簡單的Flutter 螢幕適配Flutter