I create all my constraints programmatically for my UI controls. So my button has a text: title
So if I don't set any restriction for width of the button, the app will create for me button based on text width, and this works fro me.
But I want to add few extra padding at left and right sides. How can I do it?
Use the contentEdgeInsets property of UIButton, e.g.:
`yourButton.contentEdgeInsets = UIEdgeInsetsMake(0.f, 10.f, 0.f, 10.f);`
will add 10 points to the left and right edges.
Related
I have button and a label in my table view cell placing one after other vertically.
In my xib design i placed my button then below it placed my label.
if the string for label is empty then i want to set the button as vertically center in table view cell and hide the label.
if have tried following code for my implementation but button does not come in vertical center position.
if([labelString isEqualToString:#""]){
_label.hidden = YES;
_button.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
}
it would be helpful if get suggestion for fixing this problem.
One approach: use dynamic setting of constraints.
In InterfaceBuilder:
Put your button and label inside an enclosing wrapper view.
Constrain the wrapper view to be centered in the main view.
Constrain the button and the label to be of fixed height, and the top of the label to be constrained to the bottom of the button (with spacing if desired).
Constrain the top of the wrapper to the top of the button.
Constrain the bottom of the wrapper with two separate constraints: one to the bottom of the button (but make this inactive), and one to the bottom of the label (active.).
Make both of those constraints outlets so that you can access them in code.
Leave the wrapper height otherwise unconstrained. Thus it will "shrink-wrap" to the combined height of the button and label.
In code:
When the label is empty, activate the constraint that pins the wrapper to the button instead of to the label:
BOOL hideLabel = [labelString isEqualToString:#""];
_label.hidden = hideLabel;
_wrapperToButtonConstraint.active = hideLabel;
_wrapperToLabelConstraint.active = !hideLabel;
Now the shrink-wrap effect will make the wrapper have the same height as the button, and since the wrapper is centered, so will the button be centered.
Have a look at the screenshot
I using stackview to stack the textfield, view, and tableview together. When I doing the constraint on the view,
I set the left constraint is 20, and right constraint as 20 on the both button, more over,
I add the width constraint on the both button but ended up the button show the width is different and cannot looks center on the simulator.
How do I make it to be center?
I'm working under the assumption you want your view to look like this:
V: textField - viewWithButtons - tableView
For your buttons, I'd highlight them and make them into a horizontal stack. Under attributes inspector, make the alignment fill, distribution fill equally, spacing 8 (or whatever you want).
From there, click your textFieldView, horizontalStackViewiewWithButtons, and tableView and then turn those into a vertical stack. From there, select your verticalStack from the document outline and click the Pin button at the lower-right corner of the screen. Left and right pins are 0, top pin is "Use Standard Value"
From there, work your way "inward" when you add constraints. The outer stack is mostly taken care of. You'll probably want to add a pin for the height of your textFieldView and your horizontalStackViewWithButtons.
I am also new to ios just my suggestion try this.
In storyboard set width constraint for both buttons
Create references for that constraints in your swift code.
#IBOutlet weak var height1: NSLayoutConstraint!
#IBOutlet weak var height2: NSLayoutConstraint!
In your viewwill appear method calculate width using your screen width for example
let screenSize: CGRect = UIScreen.mainScreen().bounds;
let width = screenSize.width;
//Then you need to remove the constraint spaces so
left(10) - Button1 - middle (10) - Button2 - Right(10)
So toatal 30
let width_available = screenSize.width - 30;
height2.constant = width_available/2
height1.constant = width_available/2
Edit 1:
The real simple solution just set equal width for both buttons from the storyboard.
Also you need horizontal spacing between the buttons
Hello guys i have one that is.
I have two buttons in controller when i remove or hidden one button i want to other button to increase size according to width.
Here i am using the auto layout so please post your answer accordingly
See the above image when i hide the button other button it should be adjust with the size.
set up all the constraints needed to create the layout like in your first screenshot
in IB you select the "time-button" and the "pay by cash" button and add a constraint to align their trailing edges
select this new "trailing-edges-constraint" and set it's priority to high (750)
(repeat the steps 1-3 for the "pay now" button but this time align to the leading edges)
and that's it!
FDStackView
Use UIStackView as if it supports iOS 6. It will automatically replace the symbol for UIStackView into FDStackView at runtime before iOS 9.
Or you can using a array of UIView to hold the buttons you want. The first and last element of the array is a 1px width 0.01 alpha UIView. Making the first's left align to the left of screen and the last's right align to the right of screen.
The all you need to do is that put the buttons in the array and make sure every buttons are between the 1px views.
you can add this constraint manually by creating its outlet of "width constraint" like below :
And wherever you want to re-set its width then you can do it manually,
- (IBAction)buttonClicked:(id)sender
{
[UIView animateWithDuration:0.15 animations:^{
_widthConstraint.constant = 100;
}];
[self.view layoutIfNeeded];
[self.view updateConstraints];
}
I have a label with text:
However, I want it have more padding (and for the edges to be a little rounded if possible). But when I stretch the label in my storyboard so that it appears to have padding, and then I restart the simulator, it doesn't add padding to it.
How would I do this? BTW, I'm using auto layout + objective c
If you want to go the layout constraints route, this is probably the fitting solution for you:
You should use a container view and place the label inside of that. Then add constraints for the label, which will be equivalent to a padding.
Select the label and click the constraints panel at the bottom right in the Storyboard file.
With the label selected, apply layout constraints like seen above (make sure you select the red "lines" so that the constraints are actually applied).
The orange view is the container view. The label is right inside of that.
You can add round corners from storyboard select your UILabel (or any view) and go to inspector, on the identity inspector section add a value as shown in the picture.
You need to override UILabel's drawRect method
Sample code:
#import "OCPaddedLabel.h"
#define PAD 10.0f
#define PAD_VERT 6.0f
#implementation OCPaddedLabel
- (void)drawTextInRect:(CGRect)rect {
UIEdgeInsets insets = {PAD_VERT, PAD, PAD_VERT, PAD};
[super drawTextInRect:UIEdgeInsetsInsetRect(rect, insets)];
}
if you would like to add rounded corners, you need:
label.layer.cornerRadius = 15.0f;
label.layer.masksToBounds = YES;
To change the padding on a label with a background color where text is aligned left or right, first select the label then in the attributes inspector at the top and change text from Plain to Attributed in the dropdown menu
Select the alignment of the text (in this example it aligns right) click on the 3 dot menu button to the far right to open additional settings and change Text-Direction from Natural to Right To Left
Text in label should now have a bit of padding on the right side
You can add margin with
yourLabel.frame = CGRectMake(0,0,100,100)
I defined a view which contains an UImageView and a UILabel. I setted constraints for each elements.
In wanted to do a circle with the first view, so I did that in the code :
self.mainView.layer.cornerRadius = self.mainView.frame.size.width / 2;
self.mainView.clipsToBounds = YES;
So it works, I have a circle, BUT the UImageView and the UILabel seems don't follow the constraints setted in the storyboard.
For example, on my UILabel, I setted a margin left and right 5px to the mainView, but I can see my UILabel "out" the mainView....
I tried to do a "setNeedsUpdateConstraints", but it's not the solution.
So, what I need to do to have my UILabel correctly positioned ?
Thanks,
I think this is what you are looking for:
self.mainView.layer.masksToBounds = YES;
Your problem is that when changing the mainView's layer you are not actually changing the bounds of the view. The bounds of the view are still represented in a rectangle manner. what you need to do is change the width constraint of the UILable.
To do so just create a autolayout constrain to your UILable (is you don't have it already). Control-Drag it to your viewController and change it dynamically using the constant value in the constraint.
If you don't need to set it dynamically just set the left & right margins to a bigger margin