UITableView Layout is Broken - ios

Question

I'm new to iOS development, and now working on an iOS app mainly using UINavigationController and UITableViewController.
The problem I try to solve is the UITableView (Custom tableView cell) layout broken bug on the root viewController. This happens when I back from a child viewController to the root viewController.(Left: Original, Right: Wrong Layout) It looks like UITableView position is moved for some reason, but I'm not sure why.
In MainViewController.m
- (void)viewDidLoad {
[super viewDidLoad];
viewFrame = self.view.bounds;
[self loadHeader];
[self loadTable];
self.view.backgroundColor = [UIColor whiteColor];
numberOfCellRow = 20;
}
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:YES];
[self.navigationController setNavigationBarHidden:YES animated:YES];
}
- (void)loadView {
[super loadView];
}
- (void)loadHeader {
CGRect headerFrame = viewFrame;
headerFrame.size.width = self.view.frame.size.width;
headerFrame.size.height = 200;
self.headerView = [[HeaderView alloc] initWithFrame:CGRectIntegral(headerFrame)];
[self.view addSubview:self.headerView];
NSLog(#"header loaded");
}
- (void)loadTable {
CGRect tableFrame = CGRectMake(viewFrame.origin.x, viewFrame.origin.y + 150,
viewFrame.size.width, viewFrame.size.height-150);
self.customTableView = [[UITableView alloc] initWithFrame:CGRectIntegral(tableFrame)];
self.customTableView.backgroundColor = [UIColor clearColor];
//set delegates
self.customTableView.delegate = self;
self.customTableView.dataSource = self;
//set custom cell
UINib *nib = [UINib nibWithNibName:#"CardViewCell" bundle:nil];
[self.customTableView registerNib:nib forCellReuseIdentifier:#"Cell"];
self.customTableView.separatorStyle = UITableViewCellSeparatorStyleNone;
[self.view addSubview:self.customTableView];
}
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
NSLog(#"cell loaded");
dispatch_async(dispatch_get_main_queue(), ^{
[self loadData:indexPath];
});
}
- (void)loadData: (NSIndexPath *)indexPath {
_tableCell.titleLabel.text = [[_articles objectAtIndex:indexPath.row] title];
NSLog(#"%#", [[_articles objectAtIndex:indexPath.row] title]);
[_tableCell setNeedsLayout];
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
_tableCell = [tableView dequeueReusableCellWithIdentifier:#"Cell" forIndexPath:indexPath];
_tableCell.backgroundColor = [UIColor clearColor];
[_tableCell.contentView setUserInteractionEnabled: NO];
// add touch events
[_tableCell.button addTarget:self
action:#selector(cellPressed:withEvent:)
forControlEvents:UIControlEventTouchUpInside];
NSLog(#"%#", NSStringFromCGRect(tableView.frame));
return _tableCell;
}
In CardViewCell.m
- (void)drawRect:(CGRect)rect {
//self.backgroundColor = [UIColor colorWithRed:228/255.0f green:228/255.0f blue:228/255.0f alpha:1.0f];
NSLog(#"%f", rect.origin.x);
self.backgroundColor = [UIColor clearColor];
[self drawCardView];
[self drawCardImage];
[self drawButton];
[self drawLabels];
}
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
[super setSelected:selected animated:animated];
self.selectionStyle = UITableViewCellSelectionStyleNone;
}
- (void)drawCardImage {
_cardViewBounds = _cardView.bounds;
CGRect imageFrame = _cardViewBounds;
imageFrame.size.height = _cardViewBounds.size.height/2+40;
_cardImage = [[UIImageView alloc] initWithFrame:CGRectIntegral(imageFrame)];
_cardImage.image = [UIImage imageNamed:#"sampleImage"];
_cardImage.backgroundColor = [UIColor grayColor];
_cardImage.clipsToBounds = YES;
_cardImage.contentMode = UIViewContentModeScaleAspectFill;
_cardImage.userInteractionEnabled = YES;
_cardImage.tag = 100;
UIBezierPath *maskPath;
maskPath = [UIBezierPath bezierPathWithRoundedRect:self.cardView.bounds
byRoundingCorners:(UIRectCornerTopLeft | UIRectCornerTopRight)
cornerRadii:CGSizeMake(3.0, 3.0)];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = self.cardView.bounds;
maskLayer.path = maskPath.CGPath;
_cardImage.layer.mask = maskLayer;
[self.cardView addSubview:_cardImage];
}
- (void)drawCardView {
CGRect screen = [[UIScreen mainScreen] bounds];
CGRect frame = CGRectMake(15, 25, (int)screen.size.width-30, 200);
_cardView.layer.cornerRadius = 3;
_cardView.backgroundColor = [UIColor greenColor];
_cardImage.userInteractionEnabled = YES;
_cardImage.tag = 101;
_cardView.frame = CGRectIntegral(frame);
CALayer *caLayer = _cardView.layer;
caLayer.frame = _cardView.frame;
caLayer.shadowRadius = 3.0f;
caLayer.shadowOpacity = 0.4f;
caLayer.shadowOffset = CGSizeMake(0.0f, 3.0f);
caLayer.shouldRasterize = YES;
// retina screen resolution
[caLayer setRasterizationScale:[[UIScreen mainScreen] scale]];
[caLayer setShouldRasterize:YES];
[self addSubview:_cardView];
}
- (void)drawButton {
CGRect buttonSize = CGRectMake(_cardViewBounds.size.width-100, _cardViewBounds.size.height/2+10, 50, 50);
_button = [[UIButton alloc] initWithFrame:CGRectIntegral(buttonSize)];
_button.layer.cornerRadius = 25;
_button.backgroundColor = [UIColor colorWithRed:0 green:169.0f/255.0f blue:244.0f/255.0f alpha:1.0f];
_button.userInteractionEnabled = YES;
_button.tag = 102;
//_button.titleLabel.text = #"+";
[_button setTitle:#"+" forState:UIControlStateNormal];
[_button.titleLabel setFont:[UIFont fontWithName:#"Helvetica" size:30.0]];
CALayer *caButtonLayer = _button.layer;
caButtonLayer.frame = _button.frame;
caButtonLayer.shadowRadius = 3.0f;
caButtonLayer.shadowOpacity = 0.2f;
caButtonLayer.shadowOffset = CGSizeMake(0.0f, 3.0f);
caButtonLayer.shouldRasterize = YES;
// retina screen resolution
[caButtonLayer setRasterizationScale:[[UIScreen mainScreen] scale]];
[caButtonLayer setShouldRasterize:YES];
[self.cardView addSubview:_button];
}
- (void)drawLabels {
CGRect titleLabelSize = CGRectMake( 10, _cardViewBounds.size.height-50, _cardViewBounds.size.width-20, 40);
_titleLabel = [[UILabel alloc] initWithFrame:CGRectIntegral(titleLabelSize)];
_titleLabel.backgroundColor = [UIColor clearColor];
_titleLabel.numberOfLines = 2;
_titleLabel.userInteractionEnabled = YES;
_titleLabel.tag = 103;
[_titleLabel setFont:[UIFont fontWithName:#"Helvetica" size:15.0]];
[_cardView addSubview:_titleLabel];
[_cardView sendSubviewToBack:_titleLabel];
}
- (void)prepareForReuse {
[super prepareForReuse];
for (UIView *subView in [self.contentView subviews]) {
[subView removeFromSuperview];
}
}
The code of this app is on this link.
Any ideas to solve this?
Your thoughts and help will be hugely appreciated.

Answer 1

the reason the view misplace is due to the _cardView.frame is CGRectZero when disappear, and I didn't find the solve yet.
you can add those to see the change.
-(void)viewWillLayoutSubviews{
[super viewWillLayoutSubviews];
NSLog(#"viewWillLayoutSubviews cardView %#",NSStringFromCGRect(self.tableCell.cardView.frame));
}
-(void)viewDidLayoutSubviews{
[super viewDidLayoutSubviews];
NSLog(#"viewDidLayoutSubviews cardView %#",NSStringFromCGRect(self.tableCell.cardView.frame));
}
-(void)viewWillDisappear:(BOOL)animated{
[super viewWillDisappear:animated];
NSLog(#"viewWillDisappear cardView %#",NSStringFromCGRect(self.tableCell.cardView.frame));
}
-(void)viewDidDisappear:(BOOL)animated{
[super viewDidDisappear:animated];
NSLog(#"viewDidDisappear cardView %#",NSStringFromCGRect(self.tableCell.cardView.frame));
}
I think you can learn more about life-cycle about viewController and Cell.
LifeCycle
by the way, when I watching your code, I don't know if you want to use xib or only code to programming. Like the code below, this is init from code but you try to get from xib.
just my opinion.
- (id)initWithFrame:(CGRect)frame{
self = [super initWithFrame:frame];
if (self) {
// make self from nib file
UINib *nib = [UINib nibWithNibName:#"HeaderView" bundle:nil];
self = [nib instantiateWithOwner:nil options:nil][0];
self.backgroundColor = [UIColor colorWithRed:0 green:169.0f/255.0f blue:244.0f/255.0f alpha:1.0f];
CGRect frame = CGRectZero;
frame.size.width = [[UIScreen mainScreen] bounds].size.width;
frame.size.height = 200;
[self setFrame:frame];
}
return self;
}