IOS开发入门之iOS一套代码适配所有iPhone手机布局实现方案
凌雪 2018-10-23 来源 :网络 阅读 1580 评论 0

摘要:本文将带你了解IOS开发入门iOS一套代码适配所有iPhone手机布局实现方案,希望本文对大家学IOS有所帮助。

本文将带你了解IOS开发入门iOS一套代码适配所有iPhone手机布局实现方案,希望本文对大家学IOS有所帮助。


       

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)

   

 

很简单,设置值得时候过一下我们的方法就行了

文字设置方法

?

 

1

   

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()

  &nb    

   

 

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之IOS频道!

 

 

本文由 @凌雪 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程