IOS Code is applicable to the layout of all iPhone phones.

IOS Code is applicable to the layout of all iPhone phones.
IOS Code is applicable to all iPhone mobile phone la implementations

This article mainly describes a set of code adapted to all iPhone layout solutions. The main point is to understand the principles and ideas.

Multiple projects adopt this layout method, and it feels good. You still need to check whether your UI can accept this method.

The main idea is that the screen dynamically changes the size of all controls based on the screen size to adapt to all screens.

First, display the effect. The mobile phone is enlarged to the same size. All mobile phones have the same display effect.

IPhone 5S iphone 6 s iphone 6 s plus iphone X

Screenshots are dynamically changed based on the screen size. The screen size scales up proportionally, and the screen size scales down.

Implementation

How can I use a set of code to achieve dynamic scaling on different screens to achieve consistent effects on different screens?
First of all, I thought that the screen ratio of the iphone we now adapt to is 16: 9 (I didn't know the iphone ex at the time, so I didn't think about it ), if the UI Designer gives you a 750*1334 design draft (that is, the iPhone 6 mobile phone screen size design draft), you can first write a design that is only applicable to the iPhone 6, you only need to display it on the iPhone 6 mobile phone in the same way as the design draft. After finishing the iPhone 6 page, we need to consider the adaptation problem of other mobile phones. The screens of other mobile phones are all at. That is to say, to adapt iPhone 6 plus to iPhone 6, we only need the size of all the space, if you want to zoom in at the same position, you can adapt to the plus. Similarly, if you want to adapt to iPhone 5, you just need to narrow down all controls to the same multiples.

The following is an example:
If you have already written a 100-bit-wide profile picture on the iPhone 6 mobile phone, the height on the iPhone 6 plus should be 110.4. If the margin on the iPhone 6 mobile phone is 10, on iPhone 6 plus, it is 11.

Aspect Ratio: 375: 414 = 100: X = 110.4 margin ratio: 375: 414 = 10: Y = 11

The above is easy to understand.
Every time I set frame, set different screens to different values. Each time you set a value, you can first use our method to dynamically enlarge or reduce the value in the same proportion. The following is the sample code:

Key sample code

   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
}

The above code is the essence and there is no difficulty. You can also write it yourself. This means that you pass a float value to determine the minimum length and width of the mobile phone screen (because sometimes it is a horizontal screen ), get the shortest value of width and height, and calculate the actual value to be scaled in ratio to 375. It should be because our UI Designer gave me an iPhone 6 design draft, so I compared 375 (the width of the mobile phone in the portrait screen ).

Mobile phone width: 375 = scaled size: design draft size

Adjust layout Implementation Scheme

After reading the above information, you can skip the following steps if you have any ideas.

If you want to use this idea, you must go through an automatic scaling method to set the widget location and size.
Here we use frame layout directly (it is very earthy but easy to use)

Original Layout Method

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

Current Method

  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)

It's easy to set the value. Just pass our method.

Text setting method

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

The text size must also be dynamically changed.

Set the image size

You cannot use the sizetofit method. If the design draft is 100px, you can directly use CGFloatAutoFit (50)

Left and right margin settings

If you want the margin to be 10

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

Page case

//
// VXXOtherUserInfoViewController.swift
// shikee
//
// Created by Xiaoxing 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) field"
            self.liveCell.countLabel.text = "\ (data [" ds_public_count "]. stringValue) field"
            self.messageCell.countLabel.text = "\ (data [" comment_count "]. stringValue) bar"

            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 = "Health ID: \ (friendUid)"

            self.videoCell.countLabel.text = "\ (data [" focus_num "]. stringValue) people"
            self.liveCell.countLabel.text = "\ (data [" to_focus_num "]. stringValue) person"

        }

        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 = "Doctor profile"
        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 = "Good at field"
        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 () // Layout according to the data yourself
        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 = "Featured Service"
        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 = "Public broadcast"
        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 = "Video Consulting"
        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 = "Voice Consulting"
        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 ("Private Consultation", 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 ("Public Live Broadcast", 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 ("User Message", 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 ("Send heart", 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!)

    }

}

The same is true.

Now it is very painful to write the code by hand. I don't know how to handle it. There are a lot of code that is boring to write, but it is nice to write a set without considering the adaptation of other mobile phones. Writing habits, if the speed slows down, is similar to that of XIB. If XIB is well written, it needs to be adjusted. If it is well written, it does not need to be changed. The maintenance is not much different from that of XIB, this may be a little worse. I think the code written by myself is easier than the XIB.