0

I’ve been working on an app with a grid of buttons. The grid consists of 4 buttons per row, and (currently) 6 rows. In the storyboard, each row of buttons is in a horizontal stack view, and all 6 stack views are in a vertical stack view.

I don’t want all of the buttons to be visible all the time, so I’m turning them on and off with .isHidden. This is causing some problems when I run the app in the simulator:

  1. I want all of the buttons to stay the same size, but if one or more buttons in a given row / stack view are hidden, the remaining buttons in that row adjust their sizes to fill the row. I’m guessing that a combination of constraints on the buttons and settings on the stack view will solve this, but I haven’t come up with the right combination yet.

  2. If I start with, say, the first 3 rows of buttons all unhidden, then try to unhide a button in one of the other rows, all of the buttons disappear. However, if I ‘print’ the .isHidden state of each button, the ones that should be visible have .isHidden = false.

Any ideas for solving either of these problems?

Thanks in advance for any assistance.

Curiosity
  • 544
  • 1
  • 15
  • 29
DJR
  • 1
  • 2
  • Please add a code block that you tried for the approach so that it will be helpful for the community to help you better. – Akhilesh krishnan Nov 10 '18 at 06:29
  • I don’t think it’s really a ‘code’ problem. I could post the loop over the outlet collection of buttons, setting button.isHidden = true/false, but it looks like the problem is with auto layout and/or stack view settings. – DJR Nov 12 '18 at 02:48
  • @DJR - for your `1.` issue.... show what you want to happen. If you have 4 equal width buttons, and you hide / remove the 3rd button, how should it look? – DonMag Nov 13 '18 at 14:18
  • For problem 1, I want all 4 buttons to keep the same size and position. – DJR Nov 13 '18 at 20:42
  • @DJR - Is this what you want? 4 equal-width buttons... remove 3rd button, buttons 1, 2 and 4 remain at current size and positions? https://imgur.com/a/mwp5TN3 – DonMag Nov 13 '18 at 20:56
  • Yes, that's it exactly. – DJR Nov 13 '18 at 22:45

1 Answers1

0

To answer your first question...

When you hide a view in a UIStackView, auto-layout treats it as if it is "gone" --- the stack view will re-layout its arrangedSubviews as if that view was never there to begin with.

If you want this result:

enter image description here

Your best bet is probably to set the .alpha property of that view / button to 0. It will be completely invisible (so, in effect, "hidden") and the stack view will retain its current layout. And, controls with .alpha = 0 do not respond to touches (so you can't tap the invisible button).

For your second question, I'd recommend you re-post that question on its own. Make sure to include the code you're using that is not having the desired result.

See: How to Ask

DonMag
  • 69,424
  • 5
  • 50
  • 86
  • Thanks for this, @DonMag. Last night, I arrived at a similar conclusion by setting the background color of the button to transparent. After switching to that approach, the second problem stopped happening, but I'm going to do more testing to make sure. – DJR Nov 14 '18 at 18:44