iOS一套代码适配所有iPhone手机布局实现方案
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 UIKit import ChameleonFramework import STPopup import SwiftyJSON import IQKeyboardManagerSwift class 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简单。