UIButton dynamic width in autolayout - ios

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];
}

Related

how to make position of view dynamic using constrants in ios?

I am developing an app in which i am showing a image view.There are some red dots on image which are UIButton.When user tap on button then image should zoom.For that i have added a scroll view with constraints as below
Inside scroll view i have imageview
Now i when my screen size changes then image size also changes.I have added a UIButton as red dot.I have given it's constraints horizontal & vertical line.
Now when device size change then button position on image also change.
What i want the button position should also be same on all device even if the image size grows.Please tell me how can i do that.
Add the button on top of the UIImage View
then add constraints by dragging from the button to the image.
first put two constraints for leading space from UIImageView and top
space from UIImageView to be a constant or standard depending on ur
needs.
It would look something like this as ur code..
button.top = image.top
button.leading = image.leading
adding these two constraints will do ur work.
If u want to fix the size of the button u need to add hieght and
width constraints.
ill attach an image on how it looks like
here the weather icon is the image and i m setting constraints on the button
(remove the constraints for trailing and bottom)
To place the button according to the image
set the image to a known size say 100 x 100
and then place the button at the required place.
now check the distance from the top of the image to the button.
ex. if it is say 12 then ur ratio will be 12:100
now set a constant (button.top) to 12.
so now if the height changes to say 200 multiply it by the ratio
i.e image.height* 12/100
in the given example constant = 200(new image hieght) *(12/100)(ratio) = 24
so the new distance of the button.top = 24
Like a view, you can drag and drop the constraints into the viewController.m file:
#property (weak, nonatomic) IBOutlet NSLayoutConstraint *myLayoutConstraint;
where you can manipulate programmatically:
[UIView animateWithDuration:1.0 animations:^{
self.myLayoutConstraint.constant = 10;
} completion:^(BOOL finished) {
//handle completion
}];

Xcode: How to add margin/padding to label text?

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)

Programmatically stretch UIButton width depending on condition

I've got two UIButtons into a view, which is 232px wide.
The buttons are aligned such as
|[BUTTON1][BUTTON1]|
|-------232px------|
I have a set of constraints for this alignment, but now I want to be able to change the frame of BUTTON1's to full width, depending on a condition, so it'd have to be programmatically. I tried changing the frame, but since it's automatically updated, it won't work. Basically, what I want to achieve is BUTTON1 covering BUTTON2, Is there an easy way to do this?
As you are using autoLayout in your project, so to change the frame of your button, you have to change the constraint of you UIButton.
First make the IBOutlet of your buttons' width constraint and then when you want to change the frame of the button update that constraint like this
button.widthConstraint.constant = //set the constraint;
[UIView animateWithDuration:0.25f
animations:^{
[self.view setNeedsLayout];
}
completion:^(BOOL finished) {
}];
Make the outlet of button and width constraint and then
self.buttonWidthConstraint += 20 // adjust as per requirements
[self.myButton updateConstraints]
You can set the constant of the button you want covered to 0 and animate the change. Then the covering button will fill in the whole space.

Slide in an UIButton and push other UIButton when a certain distance is reached

I would like to slide in a UIButton (grey color in screenshot) from the left to right and center it on the screen. There is an UIButton (orange color in screenshot) already though that is centered and this button should be pushed to the right and always have a distance of 20 from the UIButton that slides in.
The centered button (in orange) has four constraints:
Height constraint
Width constraint
Top space to Layout Guide constraint
Horizontal constraint
Currently the button that will slide in (in grey) has the following constraints:
Center Y relationship to the orange button
Height constraint
Width constraint
Leading space to superview
The idea that I had was to add an outlet to the grey UIButton's "leading space" constraint and to animate that using the UIView's animateWithDuration:animations: method:
- (void)viewDidLoad {
[super viewDidLoad];
self.slideInLeadingConstraint.constant = 100;
[self.slideInButton setNeedsUpdateConstraints];
[UIView animateWithDuration:3.0 animations:^{
[self.slideInButton layoutIfNeeded];
[self.centerButton layoutIfNeeded];
}];
}
What could I change in the constraint for this to work?
Since you would expect the orange button to move at some point, you can't force it to be centered. Lower the priority from 1000 to something lower. This means: I would really like it to be centered, but it doesn't have to be.
Add a horizontal distance (leading/trailing) constraint between the two buttons. Set its value to >= 20. This means: The distance cannot go under 20pt, but anything larger is fine.
Animate away ;)
Inside your animation block, you need to call layoutIfNeeded on all views involved in the animation or on one of their common superviews.
Note:
The reason why you had problems with this is that you have called it from viewDidLoad. At that point, the view has been fully initialized, but not added to the hierarchy yet.
It's not yet certain, how big the parent view will be and dimensions for the animation will have to be guessed (by just taking the dimensions of your scene in the storyboard).
Performing the animation after it has been initially displayed (e.g. in viewDidAppear) causes the animation to be calculated with the right dimensions.

iOS constraints make width of button more bigger then content text

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.

Resources