Layout challenge in xcode - ios

Here is an image of what I want my page to do, this displays initially
and when Tips are selected, everything moves down accordingly,
This was created in android studio and it was simple, just have a layout that is "gone" and display when needed, everything would adjust itself.
However I am having a hard time trying to do that same in Xcode.
What I have tried to do was create a container view and link constraints so that when the size of the container view changes the label and switch would also move.
But when I add vertical spacing and then move the container it just increases the vertical spacing so it stays in the same position.

Add all of the Tip Type objects inside a UIView. Then add a height constraint on the UIView. You can set that height constraint to 0 when you want it to be hidden and 100 (or whatever height you need) when you want it to be shown.
Declare the NSLayoutConstraint:
#property (nonatomic, strong) IBOutlet NSLayoutConstraint *heightConstraint;
In storyboard, make your connection to the height constraint of your UIView.
Use the following code to hide the UIView:
heightConstraint.constant = 0;
Then to set the height to 100 (or whatever you want):
heightConstraint.constant = 100;

Related

Change value of UILabel inside UIStackView in .xib file

I am creating a vertical UIStackView inside a UIView and placing UILabel elements inside it.
Now, I want to change the height of Label inside the UIStackView. But the height property seems to be disabled.
Alternatively, I am able to set height constraint for the label and change it's value programatically. I want to know if there is a way to change the value in the XIB itself as my purpose is to set a static value and cut down on adding code for it.
First add UIView in UIStackView and Then Add UILabel under view. Set label's constraint. Now you can just change the UIView Frame from Size inspector, it will automatically change the label frame.

How to remove space of hidden UIImage?

I'm stuck that I don't know how to remove spacing of hidden UIImage. Purpose is If flag is true, UIImage will be displayed and if flag is false, UIImage is hidden but space of this hidden image is still there.
I'm using Auto Layout.
If you are using Auto Layout and Storyboard you can set create an IBOutlet as a property of your Controller class. You then hook that up to the width constraint of the UIImage. In your code when the UIImage is hidden you set the IBConstraint to 0. When it is shown, you set the IBConstraint back to the normal width.
(in Controller.h)
#property (weak, nonatomic) IBOutlet NSLayoutConstraint *constraintImageWidth;
(in Controller.m) (pseudo code)
if(hidden){
constraintImageWidth.constant = 0;
}
else{
constraintImageWidth.constant = 30;
}
There should also be a horizontal constraint between the left side of the label and the right side of the image set up in the Storyboard.
Here is where you would check the width box to add the width constraint.
Here is where you would connect the referencing Outlet to the IBOutlet on your controller
The easiest and most effective way to handle this is using Stack Views.
Insert both the images in a horizontal stack view and stack view will internally take care of the spacing. Additional properties like alignment, spacing can be tweaked as per requirement.
Keep in mind that you will have to re-establish the constraints between stack view and adjacent elements since once the views are added to a stack view all if its constraints are cleared

UITableView Auto-Layout Flexible Height

I have following design.
Am using AutoLayout to make every thing flexible. In this design i have a UIView which is Gray in Color as showing in image and a UITableView below UIView. Some times i have to show this UIView and some times i have to hide this Gray UIView.
My problem is when ever i hide UIView, UITableView is not fixing its height. I don't want to hard code in .m file. Is it possible AutoLayout take care of this issue. I have these constraints as below image. Am i missing any constrain.
When i try to change UIView height, UITableView is not moving up and showing some orange constraints as show in image.
The contraints looks good. All you have to do to show/hide the gray UIView is change the height constraint constant.
To do this, create an IBOutlet in your controller for the constraint (you do this the same way you would for a UIView IBOutlet), and when you want to hide the gray view, set the constant property of the constraint to 0.
eg.
#interface MyViewController
#property (weak, nonatomic) IBOutlet NSLayoutConstraint *greyViewHeightConstraint;
#end
and when you want to hide the view:
self.greyViewHeightConstraint.constant = 0;
To show the view again, you would have to save the "default" constant value after the storyboard is loaded (like in viewDidLoad for example), and set self.greyViewHeightConstraint.constant to this saved value.
Note also that these constraint changes can be animated.
The "orange constraint" you are seeing in Interface Builder is normal: it indicates that the view frame is not matching the constraints you set. You can then update the frame to respect the constraints, or update the constraints to match the frame.

Stop autolayout from resizing my view

Using Storyboards I add a UIView with height of 5px.
At run time the height of that view is increased (could be up to 25px).
When the orientation changes, the height of the view is reverted back to the original 5px.
How can I prevent this? I want the height to remain at whatever it was prior to the orientation change.
Sure I could detect orientation change and then change it back but that looks sloppy because it shrinks then increases right away.
Edit: This may or may not be an autolayout issue. Or might just be the default behavior of storyboards.
Add a constraint fixing the height, you may also need to remove a constraint. If you show the code or explain how you're setting the constants in the first place can give a more detailed answer.
Other answer is to remove the constraint that stretching the size of your view, may be that you have conflicting constraints.
One more answer could be you need to adjust the priority of an other constraint perhaps one for spacing between views. Again more detail = better answer.
Overriding -layoutSubviews is the incorrect approach. If you're using autolayout you should adjust a view's height by modifying its constraints programmatically.
Make a property for your view's height constraint:
#property (strong, nonatomic) IBOutlet NSLayoutConstraint *heightConstraint;
I put IBOutlet there since you said you're making the constraints in a storyboard. Just drag the height constraint to that property to connect it. (You could also create the constraint programmatically, in which case you wouldn't use IBOutlet.)
Then, whenever you want to change the height:
self.heightConstraint.constant = 25;
The solution to the problem is to sublcass UIView and override -(void)layoutSubviews
In -(void)layoutSubviews is where I set my desired height

how to get auto layout to work in Xcode

I looked into http://developer.apple.com/library/ios/#recipes/xcode_help-interface_builder/articles/UnderstandingAutolayout.html but the explanations are pretty vague.
I'm on iOS 6. I have a view controller with two child views, one on top of another:
I want to use autolayout to set up the views in such way that if I change the top view's frame programatically, the bottom view will resize to accommodate the top view's new frame. That is, if I increase the top view's height, the bottom view's height should drecrease to keep the same separation between both views; the opposite should happen if I decrease the top view's height.
The default constraints I get for these two views in Xcode are:
And if I hold Command and resize the top (map) view, the bottom (tableview) seems to correctly shrink or expand vertically to honor the space constraint between them.
However, the minute I try modifying the top view's frame or bounds via code, for instance:
self.topView.frame = CGRectMake(0, 0, 320, 514);
The bottom view doesn't shrink.
So what am I missing?
You can't modify self.topView.frame like that. Setting the frame is auto layout's job. You need to modify the constraints and then let auto layout update the frame.
Create an outlet of type NSLayoutConstraint in your view controller:
#property (nonatomic, strong) IBOutlet NSLayoutConstraint *topViewHeightConstraint;
Connect the outlet to the height=127 constraint on the top view in your storyboard. See this answer if you need more help connecting an outlet to the constraint.
Then, to change the height of the top view, and have auto layout update the frame of the bottom view too, set the constraint's constant:
self.topViewHeightConstraint.constant = 514;
At the end of the run loop (not right away, but before the screen is updated), auto layout will modify the frames of both views to satisfy the changed constraint.

Resources