Remove views in UIstackview swift

Question

I am new to swift. I have added view to stackview using addArrangedSubview(). But I am not able to remove this view using removeArrangedSubview(). Even after removing arranged subView the view is still present

import Foundation
import UIKit

class render: UIViewController {

  let subview    = UIStackView()
  let mainview   = UIStackView()

  override func viewDidLoad() {
    super.viewDidLoad()

    self.mainviewlet()
    self.login()
  }

  func login() {

    let username = UITextField()
    // text field

    let button = UIButton(frame: CGRect(x: 100, y: 100, width: 100, height: 40))
    //button

    // Adding to subview  
    subview.axis  = UILayoutConstraintAxis.vertical
    subview.distribution  = UIStackViewDistribution.equalSpacing
    subview.alignment = UIStackViewAlignment.center
    subview.spacing   = 16.0

    subview.addArrangedSubview(username)
    subview.addArrangedSubview(button)

    subview.translatesAutoresizingMaskIntoConstraints = false;

    // Adding subview to another stackview
    mainview.addArrangedSubview(subview)
    self.view.addSubview(mainview)

}

In another function I am removing the arranged subview

func signup(sender: UIButton!) {

    // Remove subview
    mainview.removeArrangedSubview(subview)
    subview.removeFromSuperview()

    let firstname = UITextField()
    firstname.textAlignment = NSTextAlignment.center
    firstname.textColor = UIColor.black
    firstname.frame = CGRect()
    firstname.frame.size.height = 30;
    firstname.text = "firstname"

    subview.addArrangedSubview(firstname)
    mainview.addArrangedSubview(subview)
    self.view.addSubview(mainview)
}

and my mainview is created as:

func mainviewlet {

  mainview.axis  = UILayoutConstraintAxis.vertical
  mainview.distribution  = UIStackViewDistribution.equalSpacing
  mainview.alignment = UIStackViewAlignment.center
  mainview.spacing   = 16.0
  mainview.translatesAutoresizingMaskIntoConstraints = false;

  self.view.addSubview(mainview)
}

I want the username & button to be deleted and add new field firstname to the subview.

Am I doing it the right way ? How to delete subview ? Thanks for any help

@shallowThought , the buttons and text boxes are still present even after I remove the subview — Ahalya Hegde, Jan 05 '17 at 13:56
You are not removing them. Missing is somethng like `subview.removeArrangedSubview(username)`. — shallowThought, Jan 05 '17 at 14:34
@shallowThought, u mean I need to remove them one by one ? what if there are more controls like that ? — Ahalya Hegde, Jan 14 '17 at 12:51

Reimond Hill · Accepted Answer · 2021-05-14T07:45:08.973

In Swift 5.4

removeArrangedSubview method removes the provided view from the stack’s arrangedSubviews array. The view’s position and size will no longer be managed by the stack view. However, this method does not remove the provided view from the stack’s subviews array; therefore, the view is still displayed as part of the view hierarchy.

To prevent the view from appearing on screen after calling the stack’s removeArrangedSubview: method, explicitly remove the view from the subviews array by calling the view’s removeFromSuperview() method, or set the view’s isHidden property to true.

So:

myStackView.removeArrangedSubview(myView)
myView.removeFromSuperview()

Extended If you have a series of arranged subview, and you want to clean them, You can also create an extension:

extension UIStackView {
    
    func removeFully(view: UIView) {
        removeArrangedSubview(view)
        view.removeFromSuperview()
    }
    
    func removeFullyAllArrangedSubviews() {
        arrangedSubviews.forEach { (view) in
            removeFully(view: view)
        }
    }
    
}

Why not just myView.removeFromSuperview? That will also work. — Pranav Pravakar, Dec 18 '19 at 07:48

score 36 · Answer 2 · answered Jan 05 '17 at 14:20

36

If you want to hide a view within a stack view, all you have to do is set the contained view’s hidden property to true and the stack view handles the rest.

So what you must call as far as I understood from your code is the following:

subview.hidden = true

answered Jan 05 '17 at 14:20

Kostas Tsoleridis

926
7
13

1

This is the correct answer! You don't need to remove view from super view. Hiding it does the trick! thanks – Dhaval H. Nena Jan 06 '22 at 12:35

score 12 · Answer 3 · answered Jul 30 '19 at 07:16

By my experience backed by actually testing the implementation (), all you have to do to remove subview from stackView is call removeFromSuperview() method on every subview of the stackView:

stackView.subviews.forEach { (view) in
    view.removeFromSuperview()
}

This is how it looks in console:

(lldb) po stackView.arrangedSubviews
▿ 3 elements
  - 0 : <UIStackView: 0x7f840c8297d0; frame = (0 0; 375 95); layer = <CATransformLayer: 0x600003f48c80>>
  - 1 : <UIStackView: 0x7f840c82f5e0; frame = (0 125; 375 95); layer = <CATransformLayer: 0x600003f54520>>
  ▿ 2 : <UIView: 0x7f840b3c93a0; frame = (0 250; 375 47); opaque = NO; autoresize = W+H; gestureRecognizers = <NSArray: 0x600006bdae20>; layer = <CALayer: 0x600003f4a7e0>>

(lldb) po stackView.subviews
▿ 3 elements
  - 0 : <UIStackView: 0x7f840c8297d0; frame = (0 0; 375 95); layer = <CATransformLayer: 0x600003f48c80>>
  - 1 : <UIStackView: 0x7f840c82f5e0; frame = (0 125; 375 95); layer = <CATransformLayer: 0x600003f54520>>
  ▿ 2 : <UIView: 0x7f840b3c93a0; frame = (0 250; 375 47); opaque = NO; autoresize = W+H; gestureRecognizers = <NSArray: 0x600006bdae20>; layer = <CALayer: 0x600003f4a7e0>>

Then you remove all subviews:

(lldb) expression stackView.subviews.forEach { (view) in view.removeFromSuperview() }

And the result:

(lldb) po stackView.subviews
0 elements

(lldb) po stackView.arrangedSubviews
0 elements

You can make extension to UIStackView to save you some typing in the future:

extension UIStackView {
    func removeAllSubviews() {
        subviews.forEach { (view) in
            view.removeFromSuperview()
        }
    }
}

Mike Taverne · Answer 4 · 2017-01-05T14:49:24.837

0

You are on the right track, but there are a few issues with your code.

First, you should only call self.view.addSubview(mainview) once, in mainviewlet. You should not be doing this again in login and signup.

EDIT: removed second comment because it was incorrect.

Third, your calls to addArrangedSubview and removeArrangedSubview should be balanced. You are adding username and button to your subview but never removing them. You need to remove them if you want them to disappear.

edited Jan 05 '17 at 14:49

answered Jan 05 '17 at 14:32

Mike Taverne

9,156
2
42
58

1

You might want to check the [docs for `removeArrangedSubview:`](https://developer.apple.com/reference/uikit/uistackview/1616235-removearrangedsubview). ”However, this method does not remove the provided view from the stack’s subviews array; therefore, the view is still displayed as part of the view hierarchy.” – rob mayoff Jan 05 '17 at 14:41
@robmayoff Thank you, Rob, I stand corrected. That was an incorrect assumption on my part. – Mike Taverne Jan 05 '17 at 14:47

score 0 · Answer 5 · answered Jul 16 '20 at 01:28

0

If you want to remove the view without referencing it again:

Make sure the view is connected via outlets
fooView.removeFromSuperview()

The stackView will be drawn with fooView removed

answered Jul 16 '20 at 01:28

craft

2,017
1
21
30

score 0 · Answer 6 · answered Sep 01 '21 at 03:48

0

You can do it use a while loop.

let stack = UIStackView()
while let v = stack.arrangedSubviews.first {
    stack.removeArrangedSubview(v)
}

answered Sep 01 '21 at 03:48

onewh

421
4
10

Remove views in UIstackview swift

6 Answers6