隐藏&显示画面中间的某区块

缘由:

开发时或多或少会遇到因某个条件地达成,需要显示或隐藏画面中的另一个条件,若是区块在最底部,直接isHidden.toggle(),看起来是没什麽问题,但假如是在画面中段或上半部,那是不是会消失的有点突兀,所以要加入一个画面的约束条件,网上查找相关的资讯,可以用程序码直接设定约束条件,就能达成此需求。

实作:

前置作业除了将相关要用到的元件先Referencing Outlets到ViewController中外,
将UISwitch元件先预设为On,且将要隐藏的元件们嵌入StackView

//是否为台湾籍区块
@IBOutlet weak var IsTaiwaneseStackView: UIStackView!
//身分证字号输入区块
@IBOutlet weak var IDStackView: UIStackView!
//是否是台湾籍的开关
@IBOutlet weak var IsTaiwaneseSwitch: UISwitch!

以下范例我是将”是否为台湾籍”的UISwitch元件的Sender当作是否显示”身分证号码”输入区块的判断依据,当”是否为台湾籍”为On时,显示”身分证号码”输入区块,反之,则隐藏”身分证号码”输入区块。
若非台湾籍要隐藏红色框框的区块
https://ithelp.ithome.com.tw/upload/images/20210916/20130757qvkZiDT6NR.png

隐藏後如下图
https://ithelp.ithome.com.tw/upload/images/20210916/201307572BhHDIc1vM.png
接着我们先建立一个约束条件的变数
var IsTaiwaneseStackViewToIDStackViewSpace:NSLayoutConstraint? = nil

然後在viewDidLoad() 中,先设定好要隐藏区块的约束条件的内容

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        IsTaiwaneseStackViewToIDStackViewSpace = NSLayoutConstraint(item: IsTaiwaneseStackView, attribute: .bottom, relatedBy: .equal, toItem: IDStackView, attribute: .bottom, multiplier: 1, constant: 0)
    }

当UISwitch的Sender接收到更动时,就会把指定区块隐藏/显示且启动/停用的隐藏的约束条件
启用约束条件程序码:
NSLayoutConstraint.activate(<#T##constraints: [NSLayoutConstraint]##[NSLayoutConstraint]#>)
停用约束条件程序码:
NSLayoutConstraint.deactivate(<#T##constraints: [NSLayoutConstraint]##[NSLayoutConstraint]#>)

范例如下:

    //Switch sender
    @IBAction func IsTaiwaneseSender(_ sender: Any) {
        IDStackView.isHidden.toggle()
        if IsTaiwaneseSwitch.isOn {
            NSLayoutConstraint.deactivate([IsTaiwaneseStackViewToIDStackViewSpace!])
        }
        else {
            NSLayoutConstraint.activate([IsTaiwaneseStackViewToIDStackViewSpace!])
        }
    }

<<:  android studio 30天学习笔记-day 1 - 前言

>>:  Day 04:看看 Angular CLI 对我们做了什麽?认识专案架构

Vue.js 从零开始:v-on

本篇来介绍 v-on 指令的特别之处,使用 JavaScript 撰写一个事件处理,除了 DOM 的...

[JS] You Don't Know JavaScript [this & Object Prototypes] - this Or That?

前言 this是JavaScript中最令人困惑的关键字之一,他会自动在每个function作用域中...

33岁转职者的前端笔记-DAY 5 登入画面切版实作

第五天的文章就来谈谈工作上学习到的切版画面 首先一样附上范例图: 这是常见的登入会员或是加入会员的页...

Youtube Data API 教学  -  流量配额的计算 Quotas

「鲑鱼均,因为一场鲑鱼之乱被主管称为鲑鱼世代,广义来说以年龄和脸蛋分类的话这应该算是一种 KNN 的...

【C#】Creational Patterns Builder Mode

The Builder design pattern separates the construct...