0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

行数可変のUILabelを表示/非表示(トルツメ)する方法

Last updated at Posted at 2017-03-04

iOSアプリにて、あるUI要素を内容やボタン操作などにより、表示したり非表示(トルツメ)にしたい時があります。縦方向で言えば、高さ固定のUI要素については、高さのNSLayoutConstraintを設定し、それのconstantプロパティを本来の高さまたは0に切り替えることによって、表示/非表示を切り替えることができます。

しかし、UI要素が行数可変のUILabelの場合、中の文字列によって高さが可変のため、上記の方法が使えません。

そこで、高さ0のNSLayoutConstraintを設定し、priorityプロパティを250または750に切り替えることによって、表示/非表示を切り替えることができます。

高さ0のNSLayoutConstraintの設定
priorityプロパティはデフォルトで250に設定しておく
スクリーンショット 2017-03-04 18.30.07.png

ShrinkCell.swift
class ShrinkCell: UITableViewCell {
    var originalLabelBottomConstraint = CGFloat(0)
    
    @IBOutlet weak var label: UILabel!
    @IBOutlet weak var labelHeight: NSLayoutConstraint!
    @IBOutlet weak var labelBottomConstraint: NSLayoutConstraint!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
        
        originalLabelBottomConstraint = labelBottomConstraint.constant
    }

    func configure(hidden: Bool) {
        if hidden {
            // 非表示(トルツメ)
            labelHeight.priority = 750 // 高さ0が優先される
            labelBottomConstraint.constant = 0
        } else {
            // 表示
            labelHeight.priority = 250 // UILabelの高さが優先される
            labelBottomConstraint.constant = originalLabelBottomConstraint
        }
    }
}

表示している時
スクリーンショット 2017-03-04 20.52.33.png

非表示(トルツメ)している時
スクリーンショット 2017-03-04 20.52.48.png

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?