CODEWITHSUNDEEP
iosiphone
Android teem
Android teem

Reputation: 830

IOS how to completely remove a View

I want to hide a view completely. I am new to ios. But I have great working experience in android.

So in android We can set visibility to gone. and it completely removes the view from layout. Same I want to do in IOS. here is the layout/design example

View 1 View 2 ( it is the one I want to hide and show) View 3

now when I want to hide the view 2 I want the space of view 2 also vanish from screen and View 1 and View 3 must stick together . and when view 2 is set to visible then it must display in sequence. i.e View 1,2,3

Right now what I am doing is setting view2.ishidden = true but its not working in the way I want.

Please tell me what is equivalent to view.gone of android in IOS. ???

Upvotes: 0

Views: 80

Answers (1)

Matic Oblak
Matic Oblak

Reputation: 16774

There are a few ways in achieving this but what you are missing here is some key information on how your layout is being set.

I will assume that the 3 views you are having are vertically aligned, are one next to each other and have equal width.

Programmatically what we are looking at from horizontal perspective this is done:

let firstLeading = NSLayoutConstraint(item: view1, attribute: .leading, relatedBy: .equal, toItem: parent, attribute: .leading, multiplier: 1.0, constant: 0.0)
let betweenSecondAndFirst = NSLayoutConstraint(item: view2, attribute: .leading, relatedBy: .equal, toItem: view1, attribute: .trailing, multiplier: 1.0, constant: 0.0)
let secondEqualWidth = NSLayoutConstraint(item: view2, attribute: .width, relatedBy: .equal, toItem: view1, attribute: .width, multiplier: 1.0, constant: 0.0)
let betweenThirdAndSecond = NSLayoutConstraint(item: view3, attribute: .leading, relatedBy: .equal, toItem: view2, attribute: .trailing, multiplier: 1.0, constant: 0.0)
let lastEqualWidth = NSLayoutConstraint(item: view3, attribute: .width, relatedBy: .equal, toItem: view1, attribute: .width, multiplier: 1.0, constant: 0.0) // Note to view1 to make things easier
let lastTrailing = NSLayoutConstraint(item: view3, attribute: .trailing, relatedBy: .equal, toItem: parent, attribute: .trailing, multiplier: 1.0, constant: 0.0)

And when the second is being skipped we may simply disable betweenThirdAndSecond and add betweenThirdAndFirst as:

let betweenThirdAndFirst = NSLayoutConstraint(item: view3, attribute: .leading, relatedBy: .equal, toItem: view1, attribute: .trailing, multiplier: 1.0, constant: 0.0)

You can play with properties on constraints to enable or disable them. Or you can simply use priorities and toggle them for instance from 900 to 100. You can actually setup all of these constraints in storyboard and then drag the 2 as outlets into your code. Then simply have:

func setMiddleViewShown(_ shown: Bool) {
    UIView.animate(withDuration: 0.3) {
        self.betweenThirdAndSecond.priority = UILayoutPriority(rawValue: shown ? 900.0 : 100.0)
        self.betweenThirdAndFirst.priority = UILayoutPriority(rawValue: shown ? 100.0 : 900.0)
        self.view2.alpha = shown ? 1.0 : 0.0
        parent.layoutIfNeeded() // parent is most likely "self.view"
    }
}

This way is probably best from what you can control (mostly animations). But you may as well use UIStackView which has methods to insert or remove views. UICollectionView should work as well. Or you know.. just do it all programmatically, ignore constraints and simply set frame for each of the views.

A minimum I can think of in using UIStackView is the following and it works:

class ViewController: UIViewController {

    let views: [UIView] = [
    { let view = UIView(); view.backgroundColor = .red; return view; }(),
    { let view = UIView(); view.backgroundColor = .green; return view; }(),
    { let view = UIView(); view.backgroundColor = .blue; return view; }()
    ]

    lazy var stackView: UIStackView = {
        let stackView = UIStackView(frame: CGRect(x: 50.0, y: 100.0, width: 300.0, height: 200.0))
        self.view.addSubview(stackView)
        stackView.backgroundColor = .black
        stackView.distribution = .fillEqually
        return stackView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        stackView.addArrangedSubview(views[0])
        stackView.addArrangedSubview(views[1])
        stackView.addArrangedSubview(views[2])
    }

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesBegan(touches, with: event)

        UIView.animate(withDuration: 0.3) {
            if self.stackView.arrangedSubviews.count == 3 {
                self.views[1].alpha = 0.0
                self.stackView.removeArrangedSubview(self.views[1])
            } else {
                self.views[1].alpha = 1.0
                self.stackView.insertArrangedSubview(self.views[1], at: 1)
            }
            self.stackView.layoutIfNeeded()
        }
    }

}

Upvotes: 2

Related Questions