iOS一套代碼適配所有iPhone手機布局實現方案，iosiphone

iOS一套代碼適配所有iPhone手機布局實現方案，iosiphone
iOS一套代碼適配所有iPhone手機布局實現方案

本文主要是講述一套代碼適配所有iPhone手機布局解決方案。要點是瞭解原理和思想。

多重專案採用了這種布局方式，感覺良好，實際情況還是要看看你們UI能不能接受這種方式

主要思想就是畫面根據螢幕的尺寸動態改變所有控制項尺寸的大小，實現所有螢幕的適配

先展示效果手機放大到一樣大小效果所有手機顯示效果幾乎是一樣的

手機順序為iPhone 5s iphone 6s iphone 6s plus iphone X

畫面截屏效果畫面是根據螢幕大小動態去改變的，大螢幕的等比例放大，小螢幕的等比例縮小

實現思路

如何用一套代碼實現在不同螢幕中動態縮放，達到在不同種螢幕效果一致呢？
首先我想到了我們現在適配的iphone的螢幕比例都是16：9的螢幕（當時想的時候還沒有出iPhoneX，所以沒有想過iPhoneX），如果UI設計師給你的是 750*1334的設計稿（就是iPhone6手機螢幕尺寸的設計稿）給你的時候，你就可以先寫只適配iPhone6的，只要在iPhone6手機上顯示跟設計稿一致就可以了。在做完iPhone6的頁面之後，就要考慮其他手機適配的問題了，其他手機的螢幕都是16：9的屏，也就是說iPhone6 要適配iPhone 6 plus就只需要所有空間的大小，位置全部放大相同的倍數就可以適配plus了，同理如果要適配iPhone5 就是將所有控制項縮小相同的倍數就行了。

下面舉例：
如果在iPhone 6 手機上面100點寬高的頭像，已經寫好了，在iPhone6 plus上的高度就應該是110.4，如果說在iPhone6手機上面上下邊距是10，那麼在iPhone6 plus上是11

寬高比：375 ：414 = 100 : X  X = 110.4邊距比：375 ：414 = 10 ：Y Y = 11

上面的看懂就很簡單了
每當我設定frame的時候，不同的螢幕設定成不同的值就行了。每次設定一個值得時候可以先經過我們的一個方法，動態把這個值放大和縮小相同比例的數值。下面是範例程式碼：

關鍵範例程式碼

    func CGFloatAutoFit(_ float:CGFloat)->CGFloat {        let min = UIScreen.main.bounds.height < UIScreen.main.bounds.width ? UIScreen.main.bounds.height :UIScreen.main.bounds.width    return min / 375 * float}

上面的代碼就是精華，沒有什麼難度，你也可以自己寫。意思就是你傳一個float數值過來，首先判斷手機螢幕長寬最短的值（因為有時候是橫屏的），拿到寬高最短的直接和375比算出真實的要縮放的值。應為我們UI設計師給我的都是iPhone6 的設計稿所以我比的是375（豎屏下手機的寬度）。

    手機寬度 ： 375 = 縮放後大小 ：設計稿大小

布局實現方案調整

看懂了上面，自己有想法的下面可以不用看了

如果要使用這種思路，在設定控制項的位置和大小時就必須要過我們自動縮放的一個方法。
我們這裡是直接用frame布局（直接設定長寬高，很土，但是很好用）

控制項布局方法原來

        self.line.x = 10        self.line.y = 10        self.line.height = 50        self.line.width = 50        self.scrollView.addSubview(self.line)

現在方法

        self.line.x = CGFloatAutoFit(10)        self.line.y = CGFloatAutoFit(10)        self.line.height = CGFloatAutoFit(50)        self.line.width = CGFloatAutoFit(50)        self.scrollView.addSubview(self.line)

很簡單，設定值得時候過一下我們的方法就行了

文字設定方法

    self.doctorDescLabel.font = UIFont.systemFont(ofSize: CGFloatAutoFit(15))

文字大小也要動態改變大小

圖片設定大小

不能使用sizetofit方法了，直接按照比例寫死，如果所設計稿給你的是100px,你就直接CGFloatAutoFit(50)

左右邊距設定

如果說你想左右邊距距離10

    label.x = CGFloatAutoFit(10)    label.width = self.width - CGFloatAutoFit(20)

頁面案例

////  VXXOtherUserInfoViewController.swift//  shikee////  Created by 小星 on 2017/11/21.//  Copyright ? 2017年 shikee. All rights reserved.//import UIKitimport ChameleonFrameworkimport STPopupimport SwiftyJSONimport IQKeyboardManagerSwiftclass VXXOtherUserInfoViewController: VXXBaseViewController,UIScrollViewDelegate,PopPasswordDelegate{    var scrollView = UIScrollView()    var titleLbl = UILabel()    var shareBtn = UIButton()    var moreBtn = UIButton()    var navigationView:UIView?    var backBtn = UIButton()    let headerTopImgView = UIImageView()    let headerBottomImgView = UIImageView()    let headerImgView = UIImageView()    let nameLabel = UILabel()    let scoreBtn = UIButton()    let descLabel = UILabel()    let hospitalLabel = UILabel()    let line = UIView()    let doctorDescLabel = UILabel()    let doctorDescContentLabel = UILabel()    let line2 = UIView()    let goodAtLabel = UILabel()    let tipsView = TipsView()    let line3 = UIView()    let specialLabel = UILabel()    let specialBottomline = UIView()    let videoCell = VXXOtherUserCell()    let liveCell = VXXOtherUserCell()    let messageCell = VXXOtherUserCell()    let bottomLine = UIView()    var bottomView = UIView()    var focusBtn = UIButton()    var giftBtn = UIButton()    override func viewDidLoad() {        super.viewDidLoad()        self.view.backgroundColor = UIColor.white        self.automaticallyAdjustsScrollViewInsets = false        self.initNavigationView()        self.headerImgView.isUserInteractionEnabled = true        let tap = UITapGestureRecognizer(target: self, action: #selector(self.tapToCheckBigPic))        self.headerImgView.addGestureRecognizer(tap)    }    override func viewWillAppear(_ animated: Bool) {        super.viewWillAppear(animated)        self.navigationController?.setNavigationBarHidden(true, animated: false)        IQKeyboardManager.sharedManager().enable = false    }    override func viewWillDisappear(_ animated: Bool) {        super.viewWillAppear(animated)        IQKeyboardManager.sharedManager().enable = true    }    var dateSource:JSON?{        didSet{            self.setInfo(dateSource:dateSource)        }    }    func setInfo(dateSource:JSON?){        guard let data = dateSource else{            return        }        if data["prodoctor_auth"].intValue == 1{            self.isDoctor = true        }else{            self.isDoctor = false        }        if self.isDoctor {            self.nameLabel.text = data["nickname"].stringValue            self.titleLbl.text = data["nickname"].stringValue            self.doctorDescContentLabel.text = data["introduction"].stringValue            self.headerImgView.yy_setImage(with: URL.init(string: data["header_link"].stringValue), placeholder: UIImage.init(named: "user_tx"))            self.tipsView.tipArr = data["skill_tag"].arrayValue            self.scoreBtn.setTitle(data["score"].stringValue, for: .normal)            self.is_focus = data["is_focus"].intValue            self.videoCell.countLabel.text = "\(data["ds_private_count"].stringValue)場"            self.liveCell.countLabel.text = "\(data["ds_public_count"].stringValue)場"            self.messageCell.countLabel.text = "\(data["comment_count"].stringValue)條"            self.hospitalLabel.text = data["belong_hospital"].stringValue            if data["positional_titles"].stringValue != "" {                self.descLabel.text = "\(data["section"].stringValue)|\(data["positional_titles"].stringValue)"            }else{                self.descLabel.text = "\(data["section"].stringValue)"            }        }else{            self.nameLabel.text = data["nickname"].stringValue            self.titleLbl.text = data["nickname"].stringValue            self.doctorDescContentLabel.text = data["introduction"].stringValue            self.headerImgView.yy_setImage(with: URL.init(string: data["header_link"].stringValue), placeholder: UIImage.init(named: "user_tx"))            self.is_focus = data["is_focus"].intValue            self.descLabel.text = "健康號:\(friendUid)"            self.videoCell.countLabel.text = "\(data["focus_num"].stringValue)人"            self.liveCell.countLabel.text = "\(data["to_focus_num"].stringValue)人"        }        self.doctorUI()    }    func doctorUI(){        self.view.backgroundColor = UIColor.white        self.scrollView.frame = self.view.bounds        self.view.addSubview(self.scrollView)        self.scrollView.delegate = self        headerTopImgView.height = CGFloatAutoFit(115)        headerTopImgView.width = self.view.width        headerTopImgView.backgroundColor = kPrimaryColor        self.scrollView.addSubview(headerTopImgView)        self.headerImgView.height = CGFloatAutoFit(83)        self.headerImgView.width = CGFloatAutoFit(83)        self.headerImgView.centerX = self.view.width * 0.5        self.headerImgView.y = CGFloatAutoFit(63)        self.headerImgView.layer.cornerRadius = self.headerImgView.height * 0.5        self.headerImgView.layer.masksToBounds = true        self.headerImgView.layer.borderWidth = CGFloatAutoFit(3)        self.headerImgView.layer.borderColor = HexColor("a4c9f8")?.cgColor        self.scrollView.addSubview(headerImgView)        self.nameLabel.font = UIFont.systemFont(ofSize: CGFloatAutoFit(15))        self.nameLabel.sizeToFit()        self.nameLabel.textColor = HexColor("333333")        self.nameLabel.centerX = self.view.width * 0.5 - CGFloatAutoFit(18)        self.nameLabel.y = self.headerImgView.frame.maxY + CGFloatAutoFit(10)        self.scrollView.addSubview(nameLabel)        self.scoreBtn.titleLabel?.font = UIFont.systemFont(ofSize: CGFloatAutoFit(10))        self.scoreBtn.backgroundColor = HexColor("FFB448")        self.scoreBtn.setImage(UIImage.init(named: "user_pinf"), for: .normal)        self.scoreBtn.width = CGFloatAutoFit(29)        self.scoreBtn.height = CGFloatAutoFit(14)        self.scoreBtn.centerY = self.nameLabel.centerY        self.scoreBtn.x = self.nameLabel.frame.maxX + CGFloatAutoFit(4)        self.scoreBtn.layer.cornerRadius = 3        self.scoreBtn.layer.masksToBounds = true        self.scrollView.addSubview(self.scoreBtn)        self.descLabel.font = UIFont.systemFont(ofSize: CGFloatAutoFit(12))        self.descLabel.sizeToFit()        self.descLabel.textColor = HexColor("666666")        self.descLabel.centerX = self.view.width * 0.5        self.descLabel.y = self.nameLabel.frame.maxY + CGFloatAutoFit(10)        self.scrollView.addSubview(descLabel)        self.hospitalLabel.font = UIFont.systemFont(ofSize: CGFloatAutoFit(12))        self.hospitalLabel.sizeToFit()        self.hospitalLabel.textColor = HexColor("666666")        self.hospitalLabel.centerX = self.view.width * 0.5        self.hospitalLabel.y = self.descLabel.frame.maxY + CGFloatAutoFit(10)        self.scrollView.addSubview(hospitalLabel)        self.headerBottomImgView.width = self.view.width        self.headerBottomImgView.height = CGFloatAutoFit(23)        self.headerBottomImgView.x = 0        self.headerBottomImgView.y = self.hospitalLabel.frame.maxY + CGFloatAutoFit(5)        self.headerBottomImgView.image = UIImage.init(named: "zhb_frame_bgimg")        self.scrollView.addSubview(headerBottomImgView)        self.line.height = CGFloatAutoFit(5)        self.line.width = self.view.width        self.line.backgroundColor = kSplitLineColor        self.line.x = 0        self.line.y = headerBottomImgView.frame.maxY        self.scrollView.addSubview(self.line)        self.doctorDescLabel.text = "醫生簡介"        self.doctorDescLabel.font = UIFont.systemFont(ofSize: CGFloatAutoFit(15))        self.doctorDescLabel.textColor = HexColor("333333")        self.doctorDescLabel.sizeToFit()        self.doctorDescLabel.x = CGFloatAutoFit(10)        self.doctorDescLabel.y = CGFloatAutoFit(15) + self.line.frame.maxY        self.scrollView.addSubview(self.doctorDescLabel)        self.doctorDescContentLabel.textColor = HexColor("999999")        self.doctorDescContentLabel.numberOfLines = 0        self.doctorDescContentLabel.font = UIFont.systemFont(ofSize: CGFloatAutoFit(12))        if self.doctorDescContentLabel.text != nil{            let ns = self.doctorDescContentLabel.text! as NSString            let rectDoctorDesc = ns.boundingRect(with: CGSize(width: self.view.width - CGFloatAutoFit(20), height: 100000), options: .usesLineFragmentOrigin, attributes: [NSFontAttributeName:UIFont.systemFont(ofSize: CGFloatAutoFit(12))], context: nil)            self.doctorDescContentLabel.frame = rectDoctorDesc            self.doctorDescContentLabel.x = CGFloatAutoFit(10)            self.doctorDescContentLabel.y = self.doctorDescLabel.frame.maxY + CGFloatAutoFit(14)            self.scrollView.addSubview(self.doctorDescContentLabel)        }        self.line2.backgroundColor = kSplitLineColor        self.line2.width = self.view.width        self.line2.height = CGFloatAutoFit(1)        self.line2.x = 0        self.line2.y = self.doctorDescContentLabel.frame.maxY + CGFloatAutoFit(15)        self.scrollView.addSubview(self.line2)        self.goodAtLabel.text = "擅長領域"        self.goodAtLabel.textColor = HexColor("333333")        self.goodAtLabel.font = UIFont.systemFont(ofSize: CGFloatAutoFit(15))        self.goodAtLabel.sizeToFit()        self.goodAtLabel.x = CGFloatAutoFit(10)        self.goodAtLabel.y = CGFloatAutoFit(15) + self.line2.frame.maxY        self.scrollView.addSubview(self.goodAtLabel)        self.tipsView.x = CGFloatAutoFit(10)        self.tipsView.y = CGFloatAutoFit(15) + self.goodAtLabel.frame.maxY        self.tipsView.width = self.view.width - CGFloatAutoFit(20)        let tipsViewHeigth = self.tipsView.getFrame() //自己根據資料布局        self.scrollView.addSubview(self.tipsView)        self.line3.backgroundColor = kSplitLineColor        self.line3.height = CGFloatAutoFit(5)        self.line3.width = self.view.width        self.line3.x = 0        self.line3.y = tipsViewHeigth + self.tipsView.y + CGFloatAutoFit(15)        self.scrollView.addSubview(self.line3)        self.specialLabel.text = "特色服務"        self.specialLabel.textColor = HexColor("333333")        self.specialLabel.font = UIFont.systemFont(ofSize: CGFloatAutoFit(15))        self.specialLabel.sizeToFit()        self.specialLabel.x = CGFloatAutoFit(10)        self.specialLabel.y = CGFloatAutoFit(15) + self.line3.frame.maxY        self.scrollView.addSubview(self.specialLabel)        let imgViewF = UIImageView()        imgViewF.width = CGFloatAutoFit(24)        imgViewF.height = CGFloatAutoFit(24)        imgViewF.y = self.specialLabel.frame.maxY + CGFloatAutoFit(18)        imgViewF.x = CGFloatAutoFit(52)        imgViewF.image = UIImage.init(named: "user_oth_icon1")        self.scrollView.addSubview(imgViewF)        let publicLabel = UILabel()        publicLabel.font = UIFont.systemFont(ofSize: CGFloatAutoFit(12))        publicLabel.textColor = HexColor("3da5f7")        publicLabel.text = "公開直播"        publicLabel.sizeToFit()        publicLabel.centerX = imgViewF.centerX        publicLabel.y = imgViewF.frame.maxY + CGFloatAutoFit(15)        self.scrollView.addSubview(publicLabel)        let imgViewS = UIImageView()        imgViewS.width = CGFloatAutoFit(24)        imgViewS.height = CGFloatAutoFit(24)        imgViewS.y = self.specialLabel.frame.maxY + CGFloatAutoFit(18)        imgViewS.centerX = self.view.width * 0.5        imgViewS.image = UIImage.init(named: "user_oth_icon2")        self.scrollView.addSubview(imgViewS)        let videoLabel = UILabel()        videoLabel.font = UIFont.systemFont(ofSize: CGFloatAutoFit(12))        videoLabel.textColor = HexColor("3da5f7")        videoLabel.text = "視頻諮詢"        videoLabel.sizeToFit()        videoLabel.centerX = imgViewS.centerX        videoLabel.y = imgViewS.frame.maxY + CGFloatAutoFit(15)        self.scrollView.addSubview(videoLabel)        let imgViewT = UIImageView()        imgViewT.width = CGFloatAutoFit(24)        imgViewT.height = CGFloatAutoFit(24)        imgViewT.y = self.specialLabel.frame.maxY + CGFloatAutoFit(18)        imgViewT.x = self.view.width - imgViewT.width - CGFloatAutoFit(52)        imgViewT.image = UIImage.init(named: "user_oth_icon3")        self.scrollView.addSubview(imgViewT)        let voiceLabel = UILabel()        voiceLabel.font = UIFont.systemFont(ofSize: CGFloatAutoFit(12))        voiceLabel.textColor = HexColor("3da5f7")        voiceLabel.text = "語音諮詢"        voiceLabel.sizeToFit()        voiceLabel.centerX = imgViewT.centerX        voiceLabel.y = imgViewT.frame.maxY + CGFloatAutoFit(15)        self.scrollView.addSubview(voiceLabel)        self.specialBottomline.backgroundColor = kSplitLineColor        self.specialBottomline.height = CGFloatAutoFit(5)        self.specialBottomline.width = self.view.width        self.specialBottomline.x = 0        self.specialBottomline.y = self.line3.frame.maxY + CGFloatAutoFit(120)        self.scrollView.addSubview(self.specialBottomline)        self.videoCell.height = CGFloatAutoFit(60)        self.videoCell.width = self.view.width        self.videoCell.y = self.specialBottomline.frame.maxY        self.videoCell.x = 0        self.videoCell.setTitle("私密諮詢", for: .normal)        self.scrollView.addSubview(self.videoCell)        self.videoCell.addTarget(self, action: #selector(self.onCellClicked(sender:)), for: .touchUpInside)        self.liveCell.height = CGFloatAutoFit(60)        self.liveCell.width = self.view.width        self.liveCell.y = self.videoCell.frame.maxY        self.liveCell.x = 0        self.liveCell.setTitle("公開直播", for: .normal)        self.liveCell.addTarget(self, action: #selector(self.onCellClicked(sender:)), for: .touchUpInside)        self.scrollView.addSubview(self.liveCell)        self.messageCell.height = CGFloatAutoFit(60)        self.messageCell.width = self.view.width        self.messageCell.y = self.liveCell.frame.maxY        self.messageCell.x = 0        self.messageCell.setTitle("使用者留言", for: .normal)        self.messageCell.addTarget(self, action: #selector(self.onCellClicked(sender:)), for: .touchUpInside)        self.scrollView.addSubview(self.messageCell)        self.bottomLine.backgroundColor = kSplitLineColor        self.bottomLine.height = 500        self.bottomLine.width = self.view.width        self.bottomLine.x = 0        self.bottomLine.y = self.messageCell.frame.maxY        self.scrollView.addSubview(self.bottomLine)        self.bottomView.height = 50        self.bottomView.width = self.view.width        self.bottomView.x = 0        self.bottomView.y = self.view.height - 50        self.bottomView.backgroundColor = UIColor.white        self.view.addSubview(self.bottomView)        self.focusBtn.height = 50        self.focusBtn.width = self.view.width * 0.5        self.focusBtn.x = 0        self.focusBtn.y = 0        self.bottomView.addSubview(self.focusBtn)        self.focusBtn.setTitleColor(HexColor("666666")!, for: .normal)        self.focusBtn.titleLabel?.font = UIFont.systemFont(ofSize: 15)        self.focusBtn.imageEdgeInsets = UIEdgeInsets(top: 0, left: -8, bottom: 0, right: 0)        self.focusBtn.titleEdgeInsets = UIEdgeInsets(top: 0, left: 8, bottom: 0, right: 0)        self.focusBtn.addTarget(self, action: #selector(OtherUserInfoViewController.follow_btnDidTap(sender:)), for: .touchUpInside)        self.giftBtn.height = 50        self.giftBtn.width = self.view.width * 0.5        self.giftBtn.x = self.giftBtn.width        self.giftBtn.y = 0        self.bottomView.addSubview(self.giftBtn)        self.giftBtn.setTitle("送心意", for: .normal)        self.giftBtn.setTitleColor(HexColor("666666")!, for: .normal)        self.giftBtn.titleLabel?.font = UIFont.systemFont(ofSize: 15)        self.giftBtn.setImage(UIImage(named: "user_zhaunz"), for: .normal)        self.giftBtn.imageEdgeInsets = UIEdgeInsets(top: 0, left: -8, bottom: 0, right: 0)        self.giftBtn.titleEdgeInsets = UIEdgeInsets(top: 0, left: 8, bottom: 0, right: 0)        self.giftBtn.addTarget(self, action: #selector(OtherUserInfoViewController.gitfMoney), for: .touchUpInside)        self.scrollView.contentSize = CGSize(width: 0, height: self.messageCell.frame.maxY + 50)        self.view.bringSubview(toFront: self.navigationView!)    }}

實現的感覺都是一樣的

現在就是手寫代碼十分痛苦，不知道怎麼處理，有很多代碼寫的很沒意思，但是寫好一套就不需要考慮其他手機的適配問題這個就很爽了。寫習慣了只後速度放慢的話也跟XIB差不多，XIB寫好了需要調整，這個寫好了就不用動了，維護方面和XIB差不了多少，可能這方面要差一點，看別人的代碼可能沒有XIB清晰，如果說是自己寫的我倒是覺得手寫代碼還比XIB簡單。