I need design custom cell like below with nslayoutconstraints by programtaically with visual format lanuguage as well as constraintswithitem.Any help will be appreciate one.
` /* Intialize and assign Product Name */
productName=[[UILabel alloc]init];
productName.font=[UIFont fontWithName:#"HelveticaNeue" size:17.0f];
self.productName.lineBreakMode = NSLineBreakByWordWrapping;
self.productName.numberOfLines = 0;
productName.translatesAutoresizingMaskIntoConstraints=NO;
[self.contentView addSubview:productName];
/* Intialize and assign Product Option */
productOption=[[UILabel alloc]init];
productOption.translatesAutoresizingMaskIntoConstraints=NO;
productOption.font=[UIFont fontWithName:#"HelveticaNeue" size:13.0f];
productOption.textColor=[UIColor colorWithRed:128/255.0f green:128/255.0f blue:128/255.0f alpha:1.0f]; /* 808080 */
[self.contentView addSubview:productOption];
/* Intialize and assign Product Image */
productImageView=[[UIImageView alloc]init];
productImageView.translatesAutoresizingMaskIntoConstraints=NO;
productImageView.clipsToBounds=YES;
productImageView.contentMode=UIViewContentModeScaleAspectFill;
productImageView.layer.cornerRadius = 22.5;
productImageView.layer.masksToBounds = YES;
productImageView.layer.borderColor =[UIColor whiteColor].CGColor;
productImageView.layer.borderWidth = 1;
[self.contentView addSubview:productImageView];
/* Intialize and assign List icon Image */
listIconImage=[[UIImageView alloc]init];
listIconImage.translatesAutoresizingMaskIntoConstraints=NO;
listIconImage.image=[UIImage imageNamed:#"right-arrow.png"];
[self.contentView addSubview:listIconImage];
[self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.productImageView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.contentView
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:7]];
[self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:productImageView
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:self.contentView
attribute:NSLayoutAttributeLeft
multiplier:1
constant:11.5]];
[self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.productImageView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeWidth
multiplier:1.0
constant:45]];
[self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.productImageView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeHeight
multiplier:1.0
constant:45]];
[self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.productName
attribute:NSLayoutAttributeLeading
relatedBy:NSLayoutRelationEqual
toItem:self.productImageView
attribute:NSLayoutAttributeTrailing
multiplier:1.0
constant:10]];
[self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.productName
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.contentView
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:5]];
[self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.productOption
attribute:NSLayoutAttributeLeading
relatedBy:NSLayoutRelationEqual
toItem:self.productImageView
attribute:NSLayoutAttributeTrailing
multiplier:1.0
constant:10]];
[self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.productOption
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.productName
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:5]];
[self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.listIconImage
attribute:NSLayoutAttributeRight
relatedBy:NSLayoutRelationEqual
toItem:self.contentView
attribute:NSLayoutAttributeRight
multiplier:1.0
constant:-15.0f]];
[self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.listIconImage
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeHeight
multiplier:1.0
constant:20.0f]];
[self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.listIconImage
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeWidth
multiplier:1.0
constant:11.0f]];
[self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.listIconImage
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:self.contentView
attribute:NSLayoutAttributeCenterY
multiplier:1.0
constant:0]]; `
The above is the code i have used to create this Design.Now i am struggling for how to get dynamic height in tableviewcontroller.It is always returning 0 when i am getting in heightForRowAtIndexPath.
Thanks & Regards
Sam.P
You should set tableView.rowHeight = UITableViewAutomaticDimension and also provide tableView.estimatedRowHeight = 68.0f (estimated height, doesn't have to be exact);
More info in following link:
SO Link
Related
Its been 2 days working on this problem and i just can't figure it out.
I have a UIScrollView stretched in all my view and i am adding to it as subViews a random number of UIImageViews, and i am enabling paging so it will look like a gallery app.
My problem is when i rotate the screen, the images frames stays the same (this is probably because of the constraints) so i tried to give the images constraints and it worked they would rotate perfectly but then a problem appeared where the scroll view wont scroll anymore and the images are on top of each other ..
This is my code :
-(void)setupScrollView
{
for(int i = 0 ; i < [_arrayOfImages count] ; i++)
{
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(self.view.frame.size.width*i, 0, self.view.frame.size.width, self.view.frame.size.height)];
[imageView setImage:[[_arrayOfImages objectAtIndex:i] getImageForImageView:imageView]];
[imageView setUserInteractionEnabled:YES];
[imageView setContentMode:UIViewContentModeScaleAspectFit];
[imageView setTranslatesAutoresizingMaskIntoConstraints:NO];
[_scrollView addSubview:imageView];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1.f constant:0.f]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1.f constant:0.f]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.f constant:0.f]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.f constant:0.f]];
}
[_scrollView setContentSize:CGSizeMake(self.view.frame.size.width*[_arrayOfImages count], self.view.frame.size.height)];
}
Can anyone help me please ? thanks
You need to change the frame of UIScrollView and the UIImageViews in Autorotate delegate methods. After that you have to change the ContentSize of UIScrollView.
- (BOOL) shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation{}
//ios 7
-(void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation{}
duration:(NSTimeInterval)duration -
-(void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation{}
//ios 8
-(void)viewWillTransitionToSize:(CGSize)size
withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator{
if (size.width > size.height) {
// Positions for Landscape
} else {
// Positions for Portrait
}
}
I'am not really sure, because I need to see all application, but you can try following code
-(void)setupScrollView
{
for(int i = 0 ; i < [_arrayOfImages count] ; i++)
{
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(self.view.frame.size.width*i, 0, self.view.frame.size.width, self.view.frame.size.height)];
[imageView setImage:[[_arrayOfImages objectAtIndex:i] getImageForImageView:imageView]];
[imageView setUserInteractionEnabled:YES];
[imageView setContentMode:UIViewContentModeScaleAspectFit];
[imageView setTranslatesAutoresizingMaskIntoConstraints:NO];
[_scrollView addSubview:imageView];
[imageViewArray addObject:imageView]
if (i == 0) {
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1.f constant:0.f]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1.f constant:0.f]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.f constant:0.f]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.f constant:0.f]];
} else {
UIImageView * previousView = [imageViewArray objectAtIndex:i-1];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:previousView attribute:NSLayoutAttributeLeading multiplier:1.f constant:0.f]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:previousView attribute:NSLayoutAttributeTrailing multiplier:1.f constant:0.f]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:previousView attribute:NSLayoutAttributeTop multiplier:1.f constant:0.f]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:previousView attribute:NSLayoutAttributeBottom multiplier:1.f constant:0.f]];
}
}
[_scrollView setContentSize:CGSizeMake(self.view.frame.size.width*[_arrayOfImages count], self.view.frame.size.height)];
}
Also, you need to declare imageViewArray as NSMutableArray:
add to #interface:
NSMutableArray * imageViewArray;
and in viewDidLoad:
imageViewArray = [[NSMutableArray alloc] init];
I am trying to add a gray uiview overlay using autolayouts so that when you rotate the device it automatically still covers the entire screen. How would this be done programatically?
It is easy, you need 4 constraints to do that - top, bottom, left and right:
NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeTop multiplier:1.0f constant:0.0f];
NSLayoutConstraint *bottomConstraint = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeBottom multiplier:1.0f constant:0.0f];
NSLayoutConstraint *leftConstraint = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeLeft multiplier:1.0f constant:0.0f];
NSLayoutConstraint *rightConstraint = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeRight multiplier:1.0f constant:0.0f];
Try this:
UIView *greyView = [UIView new];
[self.view addSubview:greyView];
greyView.translatesAutoresizingMaskIntoConstraints = NO;
NSDictionary *viewDictionary = #{#“greyView”:greyView};
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|-0-[myView]-0-|“ options:0 metrics:nil views:viewDictionary]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#“H:|-0-[myView0]-0-|” options:0 metrics:nil views:viewDictionary]];
I'm animating a UITableView into view when a UIView is tapped, like a drop down menu. It's fully visible, all cells are there, and the tableview's delegate and datasource are set. For some reason it doesn't respond to taps on any cells. Any ideas?
_tableView = [UITableView new];
_tableView.translatesAutoresizingMaskIntoConstraints = NO;
_tableView.backgroundColor = [UIColor yellowColor];
_tableView.rowHeight = kMenuCellHeight;
_tableView.allowsSelection = YES;
_tableView.dataSource = self;
_tableView.delegate = self;
_tableView.bounces = YES;
_tableView.tableHeaderView = nil;
[_tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:#"MenuCell"];
[self insertSubview:_tableView belowSubview:_blankView];
_menuHeight = 4 * kMenuCellHeight;
_tableTopConstraint = [NSLayoutConstraint constraintWithItem:_tableView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:_blankView attribute:NSLayoutAttributeBottom multiplier:1 constant:-_menuHeight];
NSLayoutConstraint *tableLeading = [NSLayoutConstraint constraintWithItem:_tableView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:levelView attribute:NSLayoutAttributeLeading multiplier:1 constant:0];
NSLayoutConstraint *tableTrailing = [NSLayoutConstraint constraintWithItem:_tableView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:levelView attribute:NSLayoutAttributeTrailing multiplier:1 constant:0];
NSLayoutConstraint *tableHeight = [NSLayoutConstraint constraintWithItem:_tableView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:_menuHeight];
[_tableView addConstraint:tableHeight];
[self addConstraints:#[ _tableTopConstraint, tableTrailing, tableLeading ]];
I was trying to add a subview to tableview using autolayout, but I get this Assertion failure when I do so.
" * Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Auto Layout still required after executing -layoutSubviews. UITableView's implementation of -layoutSubviews needs to call super.'"
My code
UIView *view = [[UIView alloc] init];
[view setBackgroundColor:[UIColor redColor]];
[parentView addSubview:view];
[view setTranslatesAutoresizingMaskIntoConstraints:NO];
NSLayoutConstraint *c1 = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:parentView attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0.0];
NSLayoutConstraint *c2 = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:parentView attribute:NSLayoutAttributeLeft multiplier:0.0 constant:10.0];
NSLayoutConstraint *c3 = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:parentView attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0.0];
NSLayoutConstraint *c4 = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:parentView attribute:NSLayoutAttributeTop multiplier:1.0 constant:50.0];
[parentView addConstraint:c1];
[parentView addConstraint:c3];
[parentView addConstraint:c2];
[parentView addConstraint:c1];
but if I set frame to the view without any autolayout constraint, it works fine.
I couldn't figure out what I am missing.
Does anyone could help me to transform this code into visual-format auto-layout?
I've tried several ways but I can't do this...
Thank you!
// Constraints
horizontal = [NSLayoutConstraint constraintWithItem:loginView.view
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:1.0
constant:CGRectGetWidth(loginView.view.frame)];
vertical = [NSLayoutConstraint constraintWithItem:loginView.view
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:1.0
constant:CGRectGetHeight(loginView.view.frame)];
centerX = [NSLayoutConstraint constraintWithItem:loginView.view
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeCenterX
multiplier:1.0
constant:0.0];
centerY = [NSLayoutConstraint constraintWithItem:loginView.view
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeCenterY
multiplier:1.0
constant:0.0];
[self.view addConstraints:#[horizontal, vertical, centerX, centerY]];
Finally!
// Variables
NSDictionary *views = #{
#"view" : self.view,
#"superview" : self.view.superview,
};
NSDictionary *metrics = #{
#"width" : #(CGRectGetWidth(self.view.frame)),
#"height" : #(CGRectGetHeight(self.view.frame))
};
// Constraints
NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:#"H:[superview]-(<=1)-[view(width)]"
options:NSLayoutFormatAlignAllCenterY
metrics:metrics
views:views];
[self.view.superview addConstraints:constraints];
constraints = [NSLayoutConstraint constraintsWithVisualFormat:#"V:[superview]-(<=1)-[view(height)]"
options:NSLayoutFormatAlignAllCenterX
metrics:metrics
views:views];
[self.view.superview addConstraints:constraints];