iOS Swift iPhone枫甲、iPad屏幕完整適配

導(dǎo)言

移動(dòng)開(kāi)發(fā)中屏幕適配是很重要的椅亚。就個(gè)人而言限番,最從android開(kāi)發(fā)的時(shí)候用過(guò)最原始的屏幕適配方案,以1920*1080為基準(zhǔn)屏幕(設(shè)計(jì)圖比例 )呀舔,然后生成以1px開(kāi)始不同的分辨率


圖片來(lái)自簡(jiǎn)書(shū).png
圖片來(lái)自簡(jiǎn)書(shū)2.png

這樣的做法能簡(jiǎn)單的適配屏幕弥虐,不過(guò)手機(jī)分辨率過(guò)多,就要增加一種像素比例媚赖,無(wú)形中增加了app的體積霜瘪,也麻煩。

然后就是用過(guò)今日頭條的AndroidAutoSize無(wú)入侵輕量級(jí)的屏幕適配框架省古,這種方案是不錯(cuò)的粥庄,我android同事也在用,重點(diǎn)是無(wú)入侵性輕量級(jí)豺妓。

然后回到iOS屏幕適配惜互,masonry和SnapKit都是基于自動(dòng)布局,大的方面還是能適配屏幕的琳拭,小的地方還是需要自己手動(dòng)改才行训堆。

最近在學(xué)習(xí)Flutter課程(MJ老師系列

有講到小程序的適配基于rpx,然后我覺(jué)得挺好的 現(xiàn)在就移植到iOS(我一直認(rèn)為前端思想都是大同小異的

實(shí)現(xiàn)

先上代碼

class QSizeFit : NSObject {
    
    static let shared : QSizeFit = {
        let shared = QSizeFit()
        return shared
    }()
    
    let rpx : Double
    
    override init() {
        rpx = Double(1.0 * UIScreen.main.bounds.size.width / 375)
    }
    
    
    func getIRpx(value : Int) -> Int{
        return Int(rpx) * value
    }
    
    func getFRpx(value : Float) -> Float{
        return Float(rpx) * value
    }
    
    func getDRpx(value : Double) -> Double{
        return rpx * value
    }
    
}


 
extension Int {    
    
    var rpx : Int {
        return QSizeFit.shared.getIRpx(value: self)
    }
}

extension Float {
    
    var rpx : Float {
        return QSizeFit.shared.getFRpx(value: self)
    }
    
}

extension Double {
    
    var rpx : Double {
        return QSizeFit.shared.getDRpx(value: self)
    }
}

extension CGFloat {
    
    var rpx : CGFloat {
        return CGFloat(QSizeFit.shared.getFRpx(value: Float(self)))
    }
    
}

375 是設(shè)計(jì)圖比例 也是基準(zhǔn)
使用中注意Double\ Float 轉(zhuǎn)Int 當(dāng)rpx小于1 有時(shí)候會(huì)結(jié)果等于0了

效果圖
Simulator Screen Shot - iPad Pro (11-inch) (1st generation) - 2020-07-06 at 10.25.00.png
Simulator Screen Shot - iPad Pro (12.9-inch) (4th generation) - 2020-07-06 at 10.24.14.png
Simulator Screen Shot - iPhone 6s - 2020-07-06 at 10.22.03.png
Simulator Screen Shot - iPhone Xs Max - 2020-07-06 at 10.23.31.png

其他

如果有什么其他更好的方案也可以留言交流白嘁。

后續(xù)

2020.08.11

在項(xiàng)目中使用發(fā)現(xiàn)還是有些問(wèn)題坑鱼,比如在iPad上比例于iPhone相差較大。會(huì)造成中間部分View重疊。以下是優(yōu)化后的效果

Simulator Screen Shot - iPad Pro (12.9-inch) (4th generation) - 2020-08-11 at 09.44.18.png
Simulator Screen Shot - iPad Pro (12.9-inch) (4th generation) - 2020-08-11 at 09.44.33.png
Simulator Screen Shot - iPad Pro (12.9-inch) (4th generation) - 2020-08-11 at 09.59.01.png

其中圖一二是同一版本鲁沥,是將UIViewController中的View添加到UIScrollView中呼股,以此達(dá)到完整的展示。不過(guò)對(duì)于用戶體驗(yàn)性不是很好画恰。在此期間使用iPad過(guò)程中發(fā)現(xiàn)百度App首頁(yè)中左右是空白的(當(dāng)然他主題色也是白色彭谁,看起來(lái)沒(méi)異樣),內(nèi)容居中的效果允扇。

后面想了下缠局,設(shè)計(jì)圖上有些是最頂級(jí)rootView是UIView(不是UIScrollView)就分開(kāi)適配

/// 所有UIViewController的View的父類,效果圖1考润、2就是繼承UIScrollView狭园,如果是圖3就應(yīng)該繼承UIView
class QMainView: UIScrollView {

    lazy var viewMain : UIView = {
        let view = UIView()
       
        return view
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
      
        self.addSubview(viewMain)
        
        if UIDevice.current.userInterfaceIdiom == .pad {
            let w = 375 * QScreenHeight / 667
            viewMain.frame = CGRect(x: (QScreenWidth - w) * 0.5, y: 0, width: w, height: QScreenHeight)
        }else {
            viewMain.frame = CGRect(x: 0, y: 0, width: QScreenWidth, height: QScreenHeight)
        }
        
        //contentSize = viewMain.frame.size
        
        self.bounces = false
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func addSubview(_ view: UIView) {
        if  view != viewMain {
            viewMain.addSubview(view)
        }else {
            super.addSubview(view)
        }
    }
    
}

基類QViewController中把UIView替換掉

lazy var vianMainQ : QMainView = {
        let view = QMainView(frame: UIScreen.main.bounds)
        return view
}()
    
override func loadView() {
        if isFullScreen() {
            view = vianMainQ
        }else {
            view = UIView()
        }
}

當(dāng)然rpx也要增加一種
如果是滿屏就是rootView不能滾動(dòng)的就應(yīng)該使用rpx2

let rpx : Double
    
let rpx2 : Double
    
override init() {
        
        rpx = Double(1.0 * UIScreen.main.bounds.size.width / 375)
        
        if UIDevice.current.userInterfaceIdiom == .pad {
            rpx2 = Double(QScreenHeight / 667)
        }else {
            rpx2 = rpx
        }
        
 }
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市糊治,隨后出現(xiàn)的幾起案子唱矛,更是在濱河造成了極大的恐慌,老刑警劉巖俊戳,帶你破解...
    沈念sama閱讀 217,406評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件揖赴,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡抑胎,警方通過(guò)查閱死者的電腦和手機(jī)燥滑,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)阿逃,“玉大人铭拧,你說(shuō)我怎么就攤上這事∈扬保” “怎么了搀菩?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,711評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)破托。 經(jīng)常有香客問(wèn)我肪跋,道長(zhǎng),這世上最難降的妖魔是什么土砂? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,380評(píng)論 1 293
  • 正文 為了忘掉前任州既,我火速辦了婚禮,結(jié)果婚禮上萝映,老公的妹妹穿的比我還像新娘吴叶。我一直安慰自己,他們只是感情好序臂,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,432評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布蚌卤。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪逊彭。 梳的紋絲不亂的頭發(fā)上咸灿,一...
    開(kāi)封第一講書(shū)人閱讀 51,301評(píng)論 1 301
  • 那天,我揣著相機(jī)與錄音诫龙,去河邊找鬼析显。 笑死鲫咽,一個(gè)胖子當(dāng)著我的面吹牛签赃,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播分尸,決...
    沈念sama閱讀 40,145評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼锦聊,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了箩绍?” 一聲冷哼從身側(cè)響起孔庭,我...
    開(kāi)封第一講書(shū)人閱讀 39,008評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎材蛛,沒(méi)想到半個(gè)月后圆到,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,443評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡卑吭,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,649評(píng)論 3 334
  • 正文 我和宋清朗相戀三年芽淡,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片豆赏。...
    茶點(diǎn)故事閱讀 39,795評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡挣菲,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出掷邦,到底是詐尸還是另有隱情白胀,我是刑警寧澤,帶...
    沈念sama閱讀 35,501評(píng)論 5 345
  • 正文 年R本政府宣布抚岗,位于F島的核電站或杠,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏宣蔚。R本人自食惡果不足惜向抢,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,119評(píng)論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望件已。 院中可真熱鬧笋额,春花似錦、人聲如沸篷扩。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,731評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至枢冤,卻和暖如春鸠姨,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背淹真。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,865評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工讶迁, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人核蘸。 一個(gè)月前我還...
    沈念sama閱讀 47,899評(píng)論 2 370
  • 正文 我出身青樓巍糯,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親客扎。 傳聞我的和親對(duì)象是個(gè)殘疾皇子祟峦,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,724評(píng)論 2 354