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 。歡迎大家訪問!
相關文章
- 螢幕適配
- vue專案PC端如何適配不同解析度螢幕Vue
- Flutter螢幕適配Flutter
- AutoLayout螢幕適配
- android 螢幕適配Android
- flutter 螢幕尺寸適配 字型大小適配Flutter
- Flutter實戰 從頭擼一個「孤島」APP(No.1、專案初始化、螢幕適配)FlutterAPP
- Android 主流螢幕以及適配Android
- Android螢幕適配(理論適配100%機型)Android
- 【postcss-px-to-viewport】螢幕適配CSSView
- Flutter螢幕適配 - 等比縮放Flutter
- @media 移動端螢幕適配
- Android 螢幕適配終結者Android
- android螢幕適配三:通過畫素密度適配Android
- android 螢幕適配一:通過自定義View的方式實現適配AndroidView
- 如何高效的構建螢幕適配方案的專案
- 實踐 | 為 Trackr app 適配大螢幕裝置APP
- WWDC 2018:快速將開發專案適配所有的iOS裝置iOS
- 移動 web 端螢幕適配 – remWebREM
- Android螢幕適配總結和思考Android
- Android技能樹 — 螢幕適配小結Android
- H5 分層螢幕適配H5
- 更好地適配大螢幕裝置 | 2021 Android 開發者峰會Android
- iOS微信更新6.7.4版本:適配iPhone XS MAX大螢幕iOSiPhone
- 極其簡單的Flutter 螢幕適配Flutter
- Android螢幕適配前先了解這些Android
- android 今日頭條的螢幕適配理解Android
- 全志T113-i開發板適配LVDS螢幕的過程
- Android螢幕適配很難嘛?其實也就那麼回事Android
- android 螢幕適配二:手寫百分比佈局適配Android
- Android 螢幕適配:最全面的解決方案Android
- 淺談-web螢幕適配的解決方案Web
- Android dp方式的螢幕適配工具使用(Android Studio外掛方式)Android
- Flutter螢幕適配,簡單粗暴的全域性適配方式Flutter
- 學習筆記:自適應佈局,多螢幕適配筆記
- Andoid螢幕適配終極手段(小編用過最得勁的dp適配)
- Android專案實戰(四十):Andoird7.0+安裝APK適配AndroidAPK
- 鴻蒙Banner圖一多適配不同螢幕鴻蒙
- Android最全螢幕適配的幾個重要概念(三)Android