Hello, i want to create relative constraints between 3 elements.
And when resized from 4 to 3.5inch those constraints resizing to the new size while objects keep their size;
There is a way to create flexible spacing between elements with the help of constraints. The way is to use a view for the spacing not a constraint. There is event a sample in the official documentation.
https://developer.apple.com/library/ios/documentation/userexperience/conceptual/AutolayoutPG/AutoLayoutbyExample/AutoLayoutbyExample.html
Look at the section named "Spacing and Wrapping".
Don't use static height and width. use following code for calculating height and width.
int width = self.view.frame.size.width;
int height = self.view.frame.size.height;
In this way set X and Y co-ordinate for your element.
Refer this Code -
int imageX = 2,imageY = 2;
int count1 = 0;
for (int i = 0; i < [mainMenuColumn1Array count]; i++) {
count1++;
MenuClass *menuClass = [[MenuClass alloc] init];
menuClass = [mainMenuColumn1Array objectAtIndex:(count1 - 1)];
UIButton *menuBtn = [UIButton buttonWithType:UIButtonTypeCustom];
menuBtn.frame = CGRectMake(imageX, imageY, (width/2)-4, (height/3)-4);
menuBtn.tag = count1;
[menuBtn addTarget:self action:#selector(mainMenu1Action:) forControlEvents:UIControlEventTouchUpInside];
menuBtn.backgroundColor = [UIColor colorWithRed:17.0/255.0 green:116.0/255.0 blue:239.0/255.0 alpha:1.0];
[mainView1 addSubview:menuBtn];
imageY = imageY + height/3;
imageX = 2;
}
Here I have add UIButtons dynamically. And I set XY co-ordinates dynamically. This is a generic code for all size devices.
You can't do this in interface builder, as far as I am aware, because you can't specify multipliers on constraints via interface builder. However, you can do it quite easily in code, particularly using a nice auto layout helper category available via Github or cocoapods. (Disclaimer - I wrote the category!).
The category contains a method to distribute an array of views evenly along a specified axis, and under the hood it creates constraints using multipliers of the containing view's dimensions - so for two views, the centres would be 0.33 and 0.66 of the way along the relevant axis, for example.
To use this for a view primarily built in interface builder, you'd use placeholder constraints (removed at run time) then add the category constraints after viewDidLoad.
Related
I am new in iOS and I am facing problem regarding to create UILabel dynamically. I need to change its hight and the Y position according to data from webservice.
My code is like this
NSMutableArray *remarkarray =[[NSMutableArray alloc] init];
remarkarray=[responsedict valueForKey:#"Key"];
NSString *RemarkString=[NSString stringWithFormat:#"%#",[remarkarray objectAtIndex:0]];
remarklbl.text=RemarkString;
remarklbl.numberOfLines=0;
[remarklbl sizeToFit];
I have create UILabel like this
But its Y Position is fix. I need to create a UILabel in which I can change the height and the Y position according to text in it. Like this
Thanks in Advance!
You can do it very easily by declaring two labels in Storyboard.
Here are steps.
Drag two UILabels in your viewController and select the first one and set constraints like below image.
Select the second label and add following constraints.
Select both labels and set numberOfLines to zero.
Now u can set text dynamically from code.
All you have to do is:
float x=10.0,y=10.0,height=40;
float verticalSpace=20.0;
for (int i = 0; i < 10; i++)
{
UILabel *label = [[UILabel alloc] initWithFrame: CGRectMake(x, y,50,height)];
label.text = #"dummy text";// It could be from array as well if you want to add different text for each label. Eg: label.text = [arr objectAtIndex:i];
[self.view addSubview:label];
y = y +height+ verticalSpace;
}
You could search around with key word "auto layout dynamic label height"
I have a GameViewController.
In this GVC im generating a CGRect like this:
-(void) generateLevel1 {
int j = 0;
for (int i = 0; i < [self.gameModel.cards count]; i++) {
NSInteger value = ((CardModel *)self.gameModel.cards[i]).value;
CGFloat x = (i % _CARDS_PER_ROW) * 120 + (i % _CARDS_PER_ROW) * 40 + 208;
CGFloat y = j * 122 + j * 40 + 324;
CGRect frame = CGRectMake(x, y, 125, 125);
CardView *cv = [[CardView alloc] initWithFrame:frame andPosition:i andValue:value];
if (!((CardModel *)self.gameModel.cards[i]).outOfPlay) {
[self.boardView addSubview:cv];
}
}
}
So i have now my View called boardView, and added a subView called cv.
My Code is written for iPad, and now i want to make an universal App, so i need, that my CGRect is downsized for iPhone 4,5,6,6+.
Whats the best way to do that?
The best would be to reimplement the view with usage of the UICollectionView which then you could define the layout for particular screen bounds.
You can't use Auto Layout (constraints) AND CGRect (frames). Constraints determine origin (x,y) and size (h,w) of a view. Auto Layout uses constraints to manage positioning and sizing frames for you. You can't size or position them yourself, if they are also constrained.
The reason why you should reimplement your code is called 'Adaptive UI'. You want your app to support different devices. Will your existing code work on an Pad running iOS 9 which can show two split-screen apps side-by-side?
If you're trying to figure out your board size, and haven't handled all these edge cases, including new devices or upcoming changes in iOS 9, your app (layout) will break.
If you do yourself a favor and reimplement it the way Apple suggests, your app will support these upcoming changes, and still lay itself out correctly.
Can it be done programmatically? Yes. But Storyboards and Auto Layout are generally easier ways that handle things for you, and you don't need to write most of the code you already wrote.
I'm running into issues with my UI when adding a dynamic number of child UIView elements into a "container" UIView. Basically I need to be able to dynamically resize the container view (self.containerAView below) to fit the height of all the "children" subViews that have been added to it. All the attempts that I have done thus far to reset the frame haven't worked. It is worth noting that the initial size is defined in the *.xib file that is initially loading the containerAView (UIView) element with an initial size of 300x200 (w x h).
- (void)drawScreen {
// handle all screen presentation initialization here
// programatically create a dynamic number of child views to add to the container view
for (int i = 0; i < 3; i++) {
int childViewHeight = 60;
int childViewWidth = 300;
UIView *childView = [[UIView alloc] initWithFrame:CGRectMake(0, (i * childViewHeight) + (i * 10), childViewWidth, childViewHeight)];
childView.backgroundColor = [UIColor blackColor];
[self.containerAView addSubview:childView];
}
// build a mapping dictionary for all child elements in the container view
NSMutableDictionary *containerASubViewDictionary = [[NSMutableDictionary alloc] init];
for (int i = 0; i < [self.containerAView.subviews count]; i++) {
[containerASubViewDictionary setValue:self.containerAView.subviews[i] forKey:[NSString stringWithFormat:#"childView%d", i]];
}
// WHAT TO ADD HERE TO HANDLE RESIZING self.containerAView height???
}
Any sort of help on dynamically resizing the container view would be greatly appreciated as I have been unable to find any solution as of yet.
One way, which is probably the most up to date approach, would be to add 4 auto layout constraints to the containerview in interface builder.
Add the four constraints: x = 0, y = 0, width = 300 & height = 200
Now click on the width constraint in interface builder to highlight it and then control drag it into your .h file and give it a name, like containerWidth.
#property (strong, nonatomic) IBOutlet NSLayoutConstraint *containerWidth;
Repeat with the height.
In your .m file you can adjust the height and width in your drawScreen method by manipulating the contstraints.
self.containerWidth.constant = width; // your calculated new width
self.containerHeight.constant = height; // your calculated new height
You seem to be attempting to change the height of your container's frame. A frame has an origin and a size. Try manipulating these properties:
self.containerView.frame.origin.x
self.containerView.frame.origin.y
self.containerView.frame.size.height
self.containerView.frame.size.width
So I have setup a UIView that contains a UIScrollView (and child content view) that has sub views that are series of UILabels and UIViews that grow and shrink depending on the content contained in them, all using AutoLayout from the Storyboard. This works when I have something like Label - Label - Label - View w/o any issues, however if I put an empty UIView in-between two labels and insert sub views on the UIView, I'm not seeing the results I'm expecting. I have the following layout in a storyboard:
...where the teal and blue views are labels that grow to infinite height and the orange view (optionsPanel) is an empty UIVIew that I later inject sub views into. The rest of the stuff on the window is UILabels and UISegment controls. Between each row of views I have a Vertical Space constraint with a constant of 8. This all worked beautifully until I had to put in the empty UIView and programmatically inject sub views. The code I would expect to work would be something like (optionsPanel is the orange colored UIView)...
optionsPanel.translatesAutoresizingMaskIntoConstraints = YES;
NSArray *options = [product objectForKey:#"options"];
lastTop = 10;
for(int i=0;i<options.count; i++) {
NSDictionary *option = [options objectAtIndex:i];
NSArray *values = [option objectForKey:#"values"];
if([self hasNoneValue:values] && values.count == 2) {
NSDictionary *value = [self notNoneValue:values];
M13Checkbox *optionCheck = [[M13Checkbox alloc] initWithTitle:[option objectForKey:#"name"]];
optionCheck.frame = CGRectMake(0, lastTop, 280, 25);
[optionsPanel addSubview:optionCheck];
lastTop += 25;
} else {}
}
...where the orange UIView would magically grow and everything would just get pushed around accordingly, however this is what I'm seeing:
...the orange UIView does not grow at all, and the other two top UIView have gone somewhere off the screen. So my next guess was to turn off the Autoresizing Mask using...
optionsPanel.translatesAutoresizingMaskIntoConstraints = NO;
...but I'm getting a result where everything appears to be working but the orange UIView (optionsPanel) has no height for whatever reason and looks like:
This is getting closer to what I would expect, so I thought I would force the height of the orange UIView using code like...
frame = optionsPanel.frame;
frame.size.height = lastTop;
optionsPanel.frame = frame;
...but this appears to have no affect on anything.
Purely guessing, I found that this code almost works, if I arbitrary set the optionPanel's origin to something much larger than the space that is needed....
optionsPanel.translatesAutoresizingMaskIntoConstraints = YES;
NSArray *options = [product objectForKey:#"options"];
lastTop = 10;
for(int i=0;i<options.count; i++) {
NSDictionary *option = [options objectAtIndex:i];
NSArray *values = [option objectForKey:#"values"];
if([self hasNoneValue:values] && values.count == 2) {
NSDictionary *value = [self notNoneValue:values];
M13Checkbox *optionCheck = [[M13Checkbox alloc] initWithTitle:[option objectForKey:#"name"]];
optionCheck.frame = CGRectMake(0, lastTop, 280, 25);
[optionsPanel addSubview:optionCheck];
lastTop += 25;
} else {}
}
lastTop += 10;
frame = optionsPanel.frame;
frame.size.height = lastTop;
frame.origin.y += 300; //some arbitrarily large number
optionsPanel.frame = frame;
..which gives this result:
...but apparently the AutoLayout has decided that the name label needs to take up the extra space. Its an ugly approach but if I could figure out how much space I need then I could just push everything down, if I had to. What's the secret to having a dynamic UIView between two dynamically sized labels and everything just work???
As #Timothy says, you need to manually add constraints to the subviews of the orange view if you want it to resize based on its contents—views don’t do this by default.
In general, if you’re using autolayout in a window, you should never be manually setting the frame of any view. Autolayout overrides any frames you set the every time it’s called, so even if you manage to manually get it working for a second it’ll fail the next time anything triggers a layout.
For views created in code, it's perfectly fine to set their frames as long as their translatesAutoresizingMaskIntoConstraints property is YES (the default, by the way).
However, for a view instantiated in storyboard or a nib, you can not set its translatesAutoresizingMaskIntoConstraints to YES.
I am trying to create a couple of UIImageViews (preferably with a for loop) and then afterwards move them, but I don't know how because I'm having trouble figuring out how to reference them if they will be made programmatically.
So I want something like this:
for (int i = 0; i < 2; i++)
{
UIImageView *iv = [[UIImageView alloc]initWithImage:[UIImage imageNamed: picturo]];
CGRect rect = CGRectMake((i * 50) + 50,30, 25, 25);
[iv setFrame:rect];
iv.tag = i;
[self.view addSubview:iv];
}
(iv with tag of 0).center.y = 80; // <-- How do I do that!!
Obviously this example has no practical use and I could just change y value of 'rect' above to 80, but I want to know how to:
a. Create multiple uiimageviews (or any object for that matter) and be able to identify/reference/manipulate each one individually (I don't know how but I would assume by either naming them uniquely or using tags) and
b. Be able to identify/reference/manipulate an object that was created programmatically.
creating views with tags works the way you have it.
To access those views use the viewWithTag property on a view to identify one of it's subviews:
UIView* subview = [self.view viewWithTag:0];
subview.center = CGPointMake(subview.center.x, 80);
(you cannot write to a view.center's x or y, you have to recreate the whole thing. Likewise with other geometric structs such as CGSize, CGRect)