iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0
Mobile Development

轉職App開發打怪雜記系列 第 16

隱藏&顯示畫面中間的某區塊

  • 分享至 

  • xImage
  •  

緣由:

開發時或多或少會遇到因某個條件地達成,需要顯示或隱藏畫面中的另一個條件,若是區塊在最底部,直接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!])
        }
    }

上一篇
用程式碼畫個1/4圓的按鈕
下一篇
本地化APP(變更APP語言)
系列文
轉職App開發打怪雜記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言