Confused on this one...
I have a stackview in a tableview cell.
The stackview (Center, Equal Spacing) has two sub stackviews,
Left stackview (Fill, Fill) has a UIButton (infoButton) and UILabel (Description)
Right stackview (Fill, Fill) has just UILabel
When I set infoButton.isHidden = true, Description is nowhere to be seen on iOS 10.2. On iOS 11.1 it works as expected.
Thanks for taking a look!
Image: iOS 11.1 on left, iOS 10.2 on right.
Additional Info:
if (input.Help == ""){
aCell.infoButton.isHidden = true
} else {
aCell.infoButton.isHidden = false
aCell.infoButton.tag = i
aCell.infoButton.isUserInteractionEnabled = true
aCell.infoButton.addGestureRecognizer(tap)
}
Solved: I changed the Stack View (that contains the button and label together) to Alignment 'Center' instead of 'Fill'. The Stackview height had been changing to 0 as observed in the View Debugger (thank you Matt for pointing me to the debugger!)
Changed the Stack View (that contains the button and label together) to Alignment 'Center' instead of 'Fill'.
The Stackview height had been changing to 0 as observed in the View Debugger (thank you Matt for pointing me to the debugger!) when one subview of the stack was set to hidden.
I had a similar issue placing a Label and Text Field inside stack view containing another Label as the title. Wanted to hide/show Text Field and Label for editing purposes (eg: First Name Label and First Name Text Field. If editing would show only the Text Field, otherwise, show only the Label).
Title: First Name (always visible)
Label: John (hidden when editing)
Text Field: John (hidden when not editing)
My problem: When showing back the Label it was disappearing along with the title Label.
My solution: Embedding into a stack view the Name Label and Text Field
Hope this helps :)
Related
(Xcode 11, Swift)
Being a newbie to iOS and Autolayout, I'm struggling with implementing a fairly simple (IMHO) view which displays a [vertical] list of items. The only problem is that items are decided dynamically and each of them could be either text or image (where either of those could be fairly large so scrolling would be required). WebView is not an option, so it has to be implemented natively.
This is how I understand the process:
Make in IB a UIScrollView and size it to the size of the outer frame.
Make a container view as a subview of UIScrollView (again, in IB) and size it the same.
Set constraint on equal width of both
At runtime, populate container view with UILabels/UIImageViews and also set constraints programmatically to ensure proper layout.
"Tell" scrollview about the subview height in order to make it manage the scrolling thereof.
Is this the right approach? It doesn't seem to work for me (for a toy example of dynamically adding a very tall image to a container view - I cannot get the scrolling to work). What would be the proper way to do the last step in the process above - just force the contentSize of the scrollview to the size of the populated container view (it doesn't seem to work for me). Any help would be appreciated.
When adding multiple elements to a scroll view at run-time, you may find it much easier to use a UIStackView... when setup properly, it will automatically grow in height with each added object.
As a simple example...
1) Start by adding a UIScrollView (I gave it a blue background to make it easier to see). Constrain it to Zero on all 4 sides:
Note that we see the "red circle" indicating missing / conflicting constraints. Ignore that for now.
2) Add a UIView as a "content view" to the scroll view (I gave it a systemYellow background to make it easier to see). Constrain it to Zero on all 4 sides to the Content Layout Guide -- this will (eventually) define the scroll view's content size. Also constrain it equal width and equal height to the Frame Layout Guide:
Important Step: Select the Height constraint, and in the Size Inspector pane select the Placeholder - Remove at build time checkbox. This will satisfy auto-layout in IB during design time, but will allow the height of that view to shrink / grow as necessary.
3) Add a Vertical UIStackView to the "content view". Constrain it to Zero on all 4 sides. Configure its properties to Fill / Fill / 8 (as shown below):
4) Add an #IBOutlet connection to the stack view in your view controller class. Now, at run-time, as you add UI elements to the stack view, all of your "scrollability" will be handled by auto-layout.
Here is an example class:
class DynaScrollViewController: UIViewController {
#IBOutlet var theStackView: UIStackView!
override func viewDidLoad() {
super.viewDidLoad()
// local var so we can reuse it
var theLabel = UILabel()
var theImageView = UIImageView()
// create a new label
theLabel = UILabel()
// this gets set to false when the label is added to a stack view,
// but good to get in the habit of setting it
theLabel.translatesAutoresizingMaskIntoConstraints = false
// multi-line
theLabel.numberOfLines = 0
// cyan background to make it easy to see
theLabel.backgroundColor = .cyan
// add 9 lines of text to the label
theLabel.text = (1...9).map({ "Line \($0)" }).joined(separator: "\n")
// add it to the stack view
theStackView.addArrangedSubview(theLabel)
// add another label
theLabel = UILabel()
// multi-line
theLabel.numberOfLines = 0
// yellow background to make it easy to see
theLabel.backgroundColor = .yellow
// add 5 lines of text to the label
theLabel.text = (1...5).map({ "Line \($0)" }).joined(separator: "\n")
// add it to the stack view
theStackView.addArrangedSubview(theLabel)
// create a new UIImageView
theImageView = UIImageView()
// this gets set to false when the label is added to a stack view,
// but good to get in the habit of setting it
theImageView.translatesAutoresizingMaskIntoConstraints = false
// load an image for it - I have one named background
if let img = UIImage(named: "background") {
theImageView.image = img
}
// let's give the image view a 4:3 width:height ratio
theImageView.widthAnchor.constraint(equalTo: theImageView.heightAnchor, multiplier: 4.0/3.0).isActive = true
// add it to the stack view
theStackView.addArrangedSubview(theImageView)
// add another label
theLabel = UILabel()
// multi-line
theLabel.numberOfLines = 0
// yellow background to make it easy to see
theLabel.backgroundColor = .green
// add 2 lines of text to the label
theLabel.text = (1...2).map({ "Line \($0)" }).joined(separator: "\n")
// add it to the stack view
theStackView.addArrangedSubview(theLabel)
// add another UIImageView
theImageView = UIImageView()
// this gets set to false when the label is added to a stack view,
// but good to get in the habit of setting it
theImageView.translatesAutoresizingMaskIntoConstraints = false
// load a different image for it - I have one named AquariumBG
if let img = UIImage(named: "AquariumBG") {
theImageView.image = img
}
// let's give this image view a 1:1 width:height ratio
theImageView.heightAnchor.constraint(equalTo: theImageView.widthAnchor, multiplier: 1.0).isActive = true
// add it to the stack view
theStackView.addArrangedSubview(theImageView)
}
}
If the steps have been followed, you should get this output:
and, after scrolling to the bottom:
Alignment constraints (leading/trailing/top/bottom)
The alignment constraint between Scroll View and Content View defines the scrollable range of the content. For example,
If scrollView.bottom = contentView.bottom, it means Scroll View is
scrollable to the bottom of Content View.
If scrollView.bottom = contentView.bottom + 100, the scrollable
bottom end of Scroll View will exceed the end of Content View by 100
points.
If scrollView.bottom = contentView.bottom — 100, the bottom of
Content View will not be reached even the scrollView is scrolled to
the bottom end.
That is, the (bottom) anchor on Scroll View indicates the (bottom) edge of the outer frame, i.e., the visible part of Content View; the (bottom) anchor on Content View refers to the edge of the actual content, which will be hidden if not scrolled to.
Unlike normal use cases, alignment constraints between Scroll View and Content View have nothing to do with the actual size of Content View. They affect only “scrollable range of content view” but NOT “actual content size”. The actual size of Content View must be additionally defined.
Size constraints (width/height)
To actually size Content View, we may set the size of Content View to a specific length, like width/height of 500. If the width/height exceeds the width/height of Scroll View, there will be a scrollbar for users to scroll.
However, a more common case will be, we want Content View to have the same width (or height) as Scroll View. In this case, we will have
contentView.width = scrollView.width
The width of Content View refers to the actual full width of content. On the other hand, the width of Scroll View refers to the outer container frame width of Scroll View. Of course, it doesn’t have to be the same width, but can be other forms like a * scrollView.width + b.
And if we have Content View higher (or wider) than Scroll View, a scrollbar appears.
Content View can not only be a single view, but also multiple views, as long as they are appropriately constrained using alignment and size constraints to Scroll View.
For details, you may follow this article: Link.
I use this code for view nib to stackview
for index in 0..<4 {
let view = CategoryClass.createMyClassView()
view.myLabel.text = "Hello World!"
self.stackView.addArrangedSubview(view)
}
And I get below image :
But I want to add subview by category.xib height ( 40px per view ) not fill.
And set in center of parent
Like below :
Screenshot:
Please add Four label in Xib and after put in stackView and give spacing like 5, 10, 20 whatever you like
Please check screenshot and let me know if u have any problem related stackview i will help you
you need to delete the top and bottom constraints of the stackView. Or you can delete any one and make the other constraint in greater than or equal to form
This will solve your problem
I have a Table View within my main UIViewController that has one non-editable prototype cell. I am trying to remove the left indent from the table view cell. No matter what method I use, the indent does not go away.
Here is what I have tried:
On the Table View: In Interface Builder > Attributes Inspector, I set Separator Inset to Custom with left inset of 0.
On the Table View Cell: In Interface Builder > Attributes Inspector, I set indentation Level and Width to 0. I also changed Separator to Custom with left 0.
I also tried the following in code:
myTable.layoutMargins = UIEdgeInsets.zero
myTable.separatorInset = UIEdgeInsets.zero
And this inside of cellForRowAt:indexPath
cell.indentationLevel = 0
cell.indentationWidth = 0
cell.layoutMargins = UIEdgeInsets.zero
return cell
Here's a screenshot of what's occurring:
I need all of the "Hello's" to left-align with the red section header text.
How can I remove the left-indent of the content?
Thanks.
Have you tried using a custom cell with a label and at the required distance from the left edge?
I'm sure that layoutMargins is the reason of indent on UITableViewCell. But I think you can't change layoutMargins. I almost don't use textLabel of UITableViewCell. You can refer to Setting layoutMargins of UIView doesn't work.
Try this -
helloLabel.textAlignment = .Left
cell.addSubview(helloLabel)
I Have a Horizontal Collection View with Cells containing a label that has auto layout that expands on the size of the cell view.
Im using Xcode 8 and Swift 3.
How can I make so that my cell size is dynamic based on the text? I mean, I want it to expand, so that Otro Text... Reads complete instead of how its shown right now with the dots.
As You can see on the screenshot, now my large text gets trimmed (The Collection view, is on the area that has the Texts: Todo, Otro Text... Test1).
Hope someone can help or orient me on finding a solution.
You need to make sure that the you add leading and trailing constraint to the label and do not add any width constraint.
Next step is to give an estimatedSize in you collectionViewLayout.
Example
if let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
flowLayout.estimatedItemSize = CGSize(
width: 100, height: collectionView.bounds.size.height)
}
You need to set the estimatedItemSize in your UICollectionViewLayout to be able to enable self-sizing cells. It is not possible from Storyboards, only available through code.
I have a button on my storyboard. This button is inside a view and that view is inside a scroll view.
What I am trying to do sounds relatively simple: When the button is pressed, the button moves down a little bit and a textField appears where the button had previously been.
However, what happens is the button animates, but then returns to its original position, instead of staying moved, and the textField appears as it should.
Because the position of the appearing textField is dependent on the position of the button, pressing the button multiple times simply places a bunch of textfields on top of each other.
Here is a picture of what happens:
my Screen:
Here is the code I am running when the button is pressed:
#IBAction func addIngredientButtonPressed(sender: UIButton) {
contentView.bounds.size.height += addIngredientLabel.bounds.height
scrollView.contentSize.height += addIngredientLabel.bounds.height
//Create Text Field and Set Initial Properties
let newIngredientTextField = UITextField(frame: CGRectMake(self.addIngredientLabel.frame.minX as CGFloat, self.addIngredientLabel.frame.midY as CGFloat, self.addIngredientLabel.bounds.width,self.addIngredientLabel.bounds.height * 0.60))
newIngredientTextField.font = UIFont.systemFontOfSize(15.0)
newIngredientTextField.placeholder = "ADD INGREDIENT HERE"
newIngredientTextField.contentHorizontalAlignment = UIControlContentHorizontalAlignment.Left
newIngredientTextField.alpha = 0.0
scrollView.addSubview(newIngredientTextField)
UIView.animateWithDuration(0.5) { () -> Void in
self.addIngredientLabel.center.y += self.addIngredientLabel.bounds.height
newIngredientTextField.alpha = 1.0
}
}
Note:** the length is also being added successfully to the screen, but the button is not staying moved. So in the screenshot above you can indeed scroll up and down **
I noticed that if you comment out the top 2 lines of code, the ones that add height to the contentView and the scrollView, you get almost the right behavior. The button moves and stays moved, the textField appears in the right spot, but if you keep pressing, it won't let you add more textFields than the screen size will hold.
Here is a picture of what happens if you comment out the top two lines. The button won't do anything more if you keep pressing it more:
screen filled:
I found lots of tutorials that tell you how to add more content than can fit into one screen using the storyboard and setting the inferred metrics to free form, but I have not found anyone trying to add elements dynamically like I am.
You appear to have a contentView -- presumably a direct subview of your scrollView, but you're adding the newIngredientTextField directly to your scrollView rather than to your contentView.
When you increase the bounds.size.height of the contentView, it decreases its frame.origin.y by half as much (to keep its center in the same place). As your original button is presumably a subview of this contentView, that will cause it to move independently of the newly-added text field.
In other words, write:
contentView.frame.size.height += addIngredientLabel.bounds.height
rather than
contentView.bounds.size.height += addIngredientLabel.bounds.height
and
contentView.addSubview(newIngredientTextField)
rather than
scrollView.addSubview(newIngredientTextField).