IOS view layout principles

Time:2021-12-20

Level first, then position:

Another idea is to specify the zindex of the view

func forUI(){
        //Hierarchy is very important. It's hard to change
        view.addSubs([ playingV, tShowD, contentHan,
                       progressV, bottomBoard, panelG
                      ])
        if calData.isFromStd{
            view.addSubs([editX_bt, progressChoosePop])
        }
        layout_h()
        h.addSubs([rhsMostMenuBtn, downloadB])
        
        if calData.isFromStd{
            tShowD.addSubs([vertBar])
        }
        
        view.addSubs([darkCurtain, donePop,
                      lhsPopViewSpacing, rhsPopViewTimes, speedSelectIdxV])
        
        v.addSubs([resultPop])
        
        let topRhsWidget: (ConstraintMaker) -> Void = { m in
            m.size.equalTo(CGSize(width: 32, height: 32))
            m.trailing.equalToSuperview().offset(-16)
            m.centerY.equalTo(self.h.arrow)
        }
        
        if calData.isFromStd{
            vertBar.snp.makeConstraints { (m) in
                m.size.equalTo(CGSize(width: 8, height: 16))
                m.leading.equalToSuperview().offset(16)
                m.top.equalToSuperview().offset(24)
            }
            editX_bt.snp.makeConstraints{ (m) in
                m.leading.equalToSuperview().offset(16)
                m.trailing.equalToSuperview().offset(-16)
                m.top.equalTo(h.snp.bottom).offset(16)
                m.height.equalTo(40)
            }
            tShowD.snp.makeConstraints{ (m) in
                m.leading.trailing.equalToSuperview()
                m.top.equalTo(editX_bt.snp.bottom)
                m.bottom.equalTo(bottomBoard.snp.top)
            }
            rhsMostMenuBtn.snp.makeConstraints(topRhsWidget)
            downloadB.snp.makeConstraints { (m) in
                m.size.equalTo(CGSize(width: 32, height: 32))
                m.centerY.equalTo(h.arrow)
                m.trailing.equalTo(rhsMostMenuBtn.snp.leading).offset(-16)
            }
        }
        else{
            tShowD.snp.makeConstraints { (m) in
                m.leading.trailing.equalToSuperview()
                m.top.equalTo(h.snp.bottom)
                m.bottom.equalTo(bottomBoard.snp.top)
            }
            downloadB.snp.makeConstraints(topRhsWidget)
        }
        playingV.snp.makeConstraints { (m) in
            m.leading.trailing.equalToSuperview()
            m.top.equalTo(h.snp.bottom)
            m.bottom.equalTo(progressV.snp.top)
        }
        panelG.snp.makeConstraints { (m) in
            m.leading.trailing.equalToSuperview()
            m.height.equalTo(panelG.h)
            self.constraintA.bottomPanelG = m.bottom.equalTo(progressV.snp.top)
        }
        bottomBoard.snp.makeConstraints { (m) in
            m.leading.trailing.equalToSuperview()
            m.height.equalTo(bottomBoard.heightStd)
            m.bottom.equalToSuperview()
        }
        
        progressV.snp.makeConstraints { (m) in
            m.leading.trailing.equalToSuperview()
            m.height.equalTo(progressV.h)
            m.bottom.equalTo(bottomBoard.snp.top)
        }
       resultPop.snp.makeConstraints { (m) in
           m.size.equalTo(resultPop.size)
           m.center.equalToSuperview()
       }
        
       donePop.snp.makeConstraints { (m) in
           m.size.equalTo(donePop.size)
           m.center.equalToSuperview()
       }
       
       darkCurtain.snp.makeConstraints { (m) in
           m.edges.equalToSuperview()
       }
        if calData.isFromStd{
            progressChoosePop.snp.makeConstraints { (m) in
                m.leading.trailing.equalToSuperview()
                constraintA.bottomChoosePop = m.bottom.equalTo(h)
                constraintA.heightChangeChoosePop = m.height.equalTo(self.progressChoosePop.popH)
            }
        }
        
        lhsPopViewSpacing.snp.makeConstraints { (m) in
            m.leading.trailing.equalToSuperview()
            m.height.equalTo(150 + UI.std.bottomOffsetY)
            m.bottom.equalToSuperview()
        }
        
        rhsPopViewTimes.snp.makeConstraints { (m) in
            m.leading.trailing.equalToSuperview()
            m.height.equalTo(160 + UI.std.bottomOffsetY)
            m.bottom.equalToSuperview()
        }
        
        speedSelectIdxV.snp.makeConstraints { (m) in
            m.leading.trailing.equalToSuperview()
            m.height.equalTo(150 + UI.std.bottomOffsetY)
            m.bottom.equalToSuperview()
        }
        view.layoutIfNeeded()
    }

There will be no strange animation

 view.layoutIfNeeded()

Recommended Today

Flutter synthetic games

Flutter synthetic gamesGitHub source address:https://github.com/CZXBigBrother/animals-merge-demo init.gif To realize the function, we need to understand the two shutter controls draggable and dragtarget It can be seen from the literal meaning that draggable can be dragged, and dragtarget is the drag target, which is to receive the control of draggable ddd.png We can only receive controls that […]