I have 3 elements in stackview.
-One is email - TextField,
-Other is password - Textfield;
-the last one is UIView and it has button in it.
When I run it, the button in that view doesnt respond, while the same view out of the stackview responds normally. ALSO when i put a button in that stackview, it acts but when it is in a view in stackview it doesnt.
I am missing something but what ?
thanks
Hey the problem is undefined constraints. Here I just created a simple solution to help you out. It is not perfect but it will helpful
When you are using stack view you need to keep few things in mind. There are two types of stackView horizontal and vertical stackView and stackView has some properties like
Axis - means you wan it horizontal or vertical
Alignment - It is simple you can understand when you see, fill leading centre and training
Distribution - In my thinking it is most important part of stack view
Fill will leave three of them their natural size, and make the fourth one take up the most space. It uses Auto Layout's content hugging priority to decide which one to stretch.
Fill Equally will make each subview the same size so they fill all the space available to the stack view.
Fill Proportionally uses the intrinsic content size of each subview to resize them by an equal amount. So view 1 was designed to have twice as much height as views 2, 3 and 4, that ratio will remain when they are resized – all the subviews get proportionally bigger or smaller.
Equal Spacing does not resize the subviews, and instead resizes the spacing between the subviews to fill the space.
Equal Centering is the most complicated, but for many people also the most aesthetically pleasing. It attempts to ensure the centers of each subview are equally spaced. This might mean that the right edge of view 1 is only 10 points from the left edge of view 2, while the right edge of view 2 is 50 points from the left edge of view 3, but what matters is that the centers of view 1, 2, 3 and 4 are all identically spaced.
Spacing - spacing is used to provide the space between objects like label, button etc.
I set the spacing between items 15 and distribution fill equally so they can fill the space available to the stack view.
here is the link to project https://github.com/waytorohit/SOreadytohelp so you can better understand.
References - https://www.hackingwithswift.com/read/31/2/uistackview-by-example
No need to give constraints
first delete view and button in your stack view and re-add then
create a viewController and of this viewController and connect it
#IBAction func clickMe(_ sender: UIButton) {
print("you click me")
}
and give some color of your button for checking and click on that
hope it's work fine.
No need for the extra view. If you delete this you can add a background colour to a normal button and change the background size and text size to make it appear the same.
If this isn't working you could go into your app design tool and make a coloured box and add this as an image into your button background.
After your button is set up you can add the #IBAction like any other normal button.
Hope it works, Toby
Related
I'm trying to make a row of buttons on the bottom of the screen and the buttons are images. I was having aspect ratio issues so a few sites recommended making image views and simply put transparent buttons on top of them. I've placed six image views in a stack view and constrained it to the bottom. I thought it would make sense to put six buttons in another stack view and then also constrain it to the bottom, but it always constrains to the nearest neighbor so now the images are actually on the bottom of the screen, but the transparent buttons are vertically sitting above them. Is it possible to have both constrained to the bottom of the screen so that they completely overlap? Thanks!
It is very much possible, from what you have written I assume that your second stackView is pinned to the top of First stackView. Change that constraint to bottom of your superView. This would be enough for your requirement.
Also Instead of using two different stackViews, I would recommend doing this in one single StackView, which will 6 UIViews inside and each UIView will have UIImageView and UIButton inside.
(Thanks, Sujith Chandran and Neil Hiddink for pointing the way!!)
Here is my solution: After selecting the bottom constraint for the stack view that contained the transparent button overlay, I went to the size inspector and changed the "Second Item" to superview, opened second item again and selected bottom, and then set Constant to 0. Eventually I had to change the value of constant to -70 to get the desired position because I previously set the button images to a height of 70.
I have set pin to all view but i got continuously this alert !
I have seen that this is because of height and width constraints but i didn't add height and width still i got this error !
This alert should be avoidable or not.
A UIView has no intrinsic size meaning none of your views know how large they should be and thus cannot be laid out the way you have them. You can set the height of each one to a fixed number but if you want them to scale I recommend using Equal Heights and Equal Widths and set the multiplier to the proportion of the view you want the little views to size to be. You could do this so many ways.
I am going walk you through one way that I think is the quickest(using StackViews) for my own sanity but the same logic could work with more dragging from each view.
Step 1:
Drag a Vertical StackView to the top of the storyboard. Add the following constraints. pin leading, trailing, and top =20. Then drag from the vertical stack view to the main view and choose equal heights and change the multiplier to 0.6(60% of the main view height). See image
Step 2:
Add a single horizontal stackview as an arranged Subview to our vertical stack view. Now add 3 UIViews and change the colors to desired colors. Change stack view to Alignment-Fill and Distribution-Fill Proportionately. Also add spacing=20. See Image
Step 3:
Choose your horizontal stackview that you just created in step 2 and hit Command-C to copy it. Hit Command-V to paste it. Note- If it does not paste it into the vertical stackview drag it in to the vertical stack view. Not there yet but close. See image
Step 4: Go to the vertical stack view and change it to Alignment-Fill and Distribution-(Fill Equally). Add Spacing of 20. You should now be a point that looks like this. See image
Step 5. Add a horizontal stack view below the vertical stack view and the bottom layout guide. Pin to all four sides at 20. Add three views and change the color to desired color. Change Alignment-Fill, Distribution-Fill Equally, and spacing=20.
Step 6. Adjust verticalStackView equal heights multiplier to maybe a lower number(0.5) to make it look like your view.
Step 7. Reap the rewards
The Big takeaway is that a UIView needs to know how big it is. UIStackView in this case tells the views how big they are. You could just have easily set the height and width of one of your views in your screenshot above to a percentage of the view. Then drag from that view to all of the like sized views and set equal heights/widths. That would have been more tedious and you can see why I used Stackviews for the example. Good luck.
I implemented a viewcontroller similar to the one in this question:
iOS two views cover exactly half of parent view
I get the desired result. The problem is that when I add a UIImageView into those two containers, the result get resized and ruins the symmetry. How do I prevent Imageviews from changing the size of their containers? I need to use AspectFill for these images.
I don't think the containers' sizes are changed. You just need to set their clipsToBounds property to true to avoid overflow.
If you use Reveal you should see the containers' sizes are not changed even if pictures inside them are bigger than themselves.
I'm unsure I understand what you mean about adding UIImageView into those controllers causing the views to resize, so forgive me if I'm getting this all wrong...
It sounds as though you've created two views of equal height that, together, consume the entire vertical space of the screen. After having done that, you want to add one or more UIImageView's to each of the original two views. Unfortunately, when you add the UIImageView, the enclosing view is resized.
Assuming I have that correct...
Are you doing this with Interface Builder either in an XIB or Storyboard file? If so, you ought to be able to achieve this with the proper set of constraints.
In the following image, I've laid out what I describe above.
As you can see, I have a red view on the top half of the window and a green view on the bottom half. The red view contains a UIImageView that is 75% of the width and height of red view, with its origin at (20, 20) within the red view.
The scene is configured as shown below:
The constraints on "Upper View" are:
You can see from this that Upper View is flush with the left, right, and top of its superview, and that its space to Bottom View is 0. You'll have to trust me that Bottom View is set up the same way.
The height of the Upper and Lower views is "Proportional" as shown in this constraint:
To achieve this "Proportional" setting, you first make the height of Upper View equal to the height of the superview, and then edit the constraint, changing "Multiplier" from "1" to "0.5."
The height (and width) of the Image View is proportional to that of the Upper view, as shown here:
If you set it up this way, you ought to be able to accomplish what (I think) you are looking to accomplish.
If my original assumption of what you are trying to achieve is incorrect, please post images of what you've got and how it's not working.
I have a setup like this in the interface builder:
(iphone5 size). I want the buttons to stay in that layout if the screen size increases i.e widens (but the buttons stay the same size). If I pin the top two buttons to their respective container edges when the screen is larger they will be too far apart from each other. I have the bottom button increasing its size fine. How can I do this? I tried putting a transparent UIView between each button and the container edge, but couldn't get it working this way. Could someone give me a pointer on how to do this please? thanks!
Assuming you already have the width, height and y-constraints in place, to create the correct x-constraints you can try something along the lines of this:
check the Horizontal Center in Container option
choose your button and double click the newly created constraint Align Center X to
change the Second Item from Center X to Trailing
enter a constant value to offset the position
Do this for both buttons. The constant value of the second button should be the negative of the first one AND its Second Item should be Leading.
Result
This method will result in equal spacing on all size classes.
The only drawback is that the spacing is no dynamic. for that purpose you would need some placeholder view in between.
I would say there are two approaches you could take:
Assumption is buttons have constraints for width and height.
1) Use a transparent view which you center horizontally within its containing view. Then pin the left buttons trailing edge to the transparent view and the right buttons leading edge to the center. You have a choice as to how to define their vertical position.
or
2) Add a transparent container view to your main view and then move your two buttons inside this view. Pin the two buttons apart the desired width and then pin the other button edges to the containing view at size 0pts. Finally center the new containing view horizontally in the view. You will need to define the height of this container view from the top or bottom.
The second is probably easier to execute within storyboard.
I am currently having difficulty with AutoLayout. I am using interface builder and am trying to position two buttons of equal width side by side as illustrated in the following image.
From the following Preview image, my titleImage has been properly constrained and is displaying correctly however the buttons are not. I have experimented by aligning button 1 with the leading edge of titleImage, and button2 with the trailing edge of titleImage, however the width distribution between the two buttons becomes skewed at this point, as demonstrated below.
My objective is to understand what constraints are missing and should be applied to the two buttons to maintain equal widths regardless of device. If possible I would like to achieve this through interface builder as opposed to additional code.
Add the following constraints
Assign equal width from button1 to button2.
Assign horizontal spacing between both buttons.
Assign leading space from button1 to its superview.
Assign trailing space from button2 to its superview.
Assign top space to both the buttons.
Let me know if it works for you.
Follow Steps and Screenshots for easy solution
Step-1)
For Button 1 : Set Constraints: (1)Leading, (2)Top or Bottom asper your need, (3)Height
Step-2)
For Button 2 : Set Constraints: (1)Trailing,(2)Top or Bottom asper your need, (3)Height
Step-3)
Press Ctrl + Drag From Button 1 to Button 2
Select Horizontal Spacing
Step-4)
Select Both Button (using Command) and Add Constraints Equal Width
OUTPUT
Hope it Helps you :)
Stack layout in iOS9, will do the job really nice.
Add stack view to your view and configure as follow:
You can check my example - you can easy aim this, by using proportional constraint.
Also you can easy aim proportional multiple UIViews.
Please look attached example
https://dl.dropboxusercontent.com/u/48223929/TestViewController.xib
My solution is to
Put a small view in the middle of two buttons and make it centre(Horizontal centre in container and vertical centre in contener as 0).
Add height and width to the small view.
Add buttons the constraints and give horizontal space constraints to small view.
Give the small view background colour same as buttons or View's colour.
Note: See the Screenshot.