iOS UITableView Cell Indentation - ios

I am setting up a UITableView programmatically. I would like the content of the cell to span the entire width of the screen. I have successfully set the cell to span the width of the screen, but the content and separators are still inset significantly (iPad screenshot below).
Here is the tableview layout setup in my view controller implementation:
- (void) viewDidLoad {
[super viewDidLoad];
// table layout
self.tableView.rowHeight = 192;
UILayoutGuide *margins = [self.view layoutMarginsGuide];
[self.tableView.leadingAnchor constraintEqualToAnchor:margins.leadingAnchor] ;
[self.tableView.trailingAnchor constraintEqualToAnchor:margins.trailingAnchor];
self.tableView.contentInset = UIEdgeInsetsMake(0, 0, 0, 0);
CGRect tableRect = self.view.frame;
self.tableView.frame = tableRect;
// table colors
self.tableView.backgroundColor = [UIColor grayColor];
self.tableView.separatorColor = [UIColor grayColor];
UIView *backView = [[UIView alloc] init];
[backView setBackgroundColor:[UIColor grayColor]];
[self.tableView setBackgroundView:backView];
}
Then I set the cell's content:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell* cell = [super tableView:tableView cellForRowAtIndexPath:indexPath];
cell.backgroundColor = [UIColor blueColor];
cell.indentationWidth = 0;
cell.indentationLevel = 0;
cell.layoutMargins = UIEdgeInsetsMake(0, 0, 0, 0);
cell.contentView.backgroundColor = [UIColor purpleColor];
return cell;
}
The cell background is blue, and it spans the width of the screen. The purple area in my screenshot is the contentView, and as you can see, it doesn't stretch to the right edge of the screen, and the cell text is inset at the left. The separator is also inset at left and right.

I discovered the issue thanks to the comment on my question by #technerd. Thank you!
I was testing my app on iOS 9.2, and I neglected to account for the new iOS9+ cell property cellLayoutMarginsFollowReadableWidth, which adjusts the cell layout by default.
To turn the auto-resizing off, you'll need to check the iOS version and then disable the property, as #technerd demonstrates:
Objective C
- (void)viewDidLoad {
[super viewDidLoad];
//For iOS 9 and Above
if ([[[UIDevice currentDevice]systemVersion]floatValue] >= 9.0) {
self.tableView.cellLayoutMarginsFollowReadableWidth = NO;
}
}
Swift
override func viewDidLoad() {
super.viewDidLoad()
//For iOS 9 and Above
if #available(iOS 9, *) {
tableView.cellLayoutMarginsFollowReadableWidth = false
}
}
Hope this helps others.

The above solution doesn't really work perfectly anymore. Although, all you need to do now is:
tableView.separatorInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
This will make your separator run throughout the width of the table view.

Related

How to do large tableView header?

I want to do a large tableView header like in Health app in iOS 11. I added a screenshot to show this element in red text. How to do large a tableView header?
If I understand your question correctly (and unfortunately the screenshot is gone), you can do that using the prefersLargeTitles property. This works on iOS 11 and higher only.
For instance:
if (#available(iOS 11.0, *)) {
self.navigationController.navigationBar.prefersLargeTitles = YES;
self.navigationItem.largeTitleDisplayMode = UINavigationItemLargeTitleDisplayModeAlways;
} else {
// Fallback on earlier versions
}
You can call this code in viewDidLoad or viewWillAppear of your UITableViewController.
Just set the frame property of the tableHeaderView.
No recorded Data is table view header. you can customize the tableview header with viewForHeaderInSection method of tableview. Your question is already answered in this link. Changing Font Size For UITableView Section Headers
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
UILabel *TESTLabel = [[UILabel alloc] init];
TESTLabel .frame = CGRectMake(20, 8, 320, 40);
TESTLabel .font = [UIFont boldSystemFontOfSize:18];
TESTLabel .text = [self tableView:tableView titleForHeaderInSection:section];
UIView *headerView = [[UIView alloc] init];
[headerView addSubview: TESTLabel];
return headerView;
}
TRY THIS

UITableViewCell width is not adjusting dynamically based on ios device type

My tableview cells are created entirely programmatically (I'm trying to learn to build an app from scratch without using storyboards) and the width of the cells is getting messed up.
Here is a screen shot http://imgur.com/ki6txqg of what the cell looks like in an iPhone 6 Plus. I'm trying to set the cell so that the UIView in the cell(self.view) gets adjusted automatically so that it fills the entire screen. I'm not sure why the width is staying static. Any advice would be greatly appreciated.
-(instancetype)initWithTweet:(PCRTweet *)tweet reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super init];
if (self) {
_tweet = tweet;
reuse = reuseIdentifier;
CGSize cellSize = self.contentView.frame.size;
CGRect backgroundView = CGRectMake(10.f, 5.f, (cellSize.width-20.f), (cellSize.height + 90.f));
self.view = [[UIView alloc] initWithFrame:backgroundView];
self.view.backgroundColor = [UIColor whiteColor];
self.view.layer.cornerRadius = 8;
self.view.layer.masksToBounds = YES;
self.view.layer.borderWidth = 1.0f;
self.view.layer.borderColor = background_color_gray.CGColor;
self.view.layer.masksToBounds = NO;
[self.contentView addSubview:self.view];
CGRect picView = CGRectMake(0.f, 0.f, 65.f, 65.f);
self.contentView.backgroundColor = background_color_gray;
}
return self;
}
Please read the points on following checklist to ensure you doing it all right:
-[ ] Have you checked that your contentView is dynamically changing?
-[ ] Have you tried putting constraints programatically?
-[ ] Try using constraints on the largest view : will auto adjust the relative views
Apart from it, you can auto-resizing for your frame.
You try this two UITableView Delegate method in table view class
For Dynamic Height
#pragma mark - UITableView Delegates
-(CGFloat)tableView:(UITableView )tableView estimatedHeightForRowAtIndexPath:(NSIndexPath )indexPath {
return 44.0;
}
-(CGFloat)tableView:(UITableView )tableView heightForRowAtIndexPath:(NSIndexPath )indexPath {
return UITableViewAutomaticDimension;
}
For Width (Get view controller width and take to backgroundView)
CGSize viewWidth = self.contentView.superview.superview.superview.superview.frame.size;
// self.contentView.superview -> return UITableViewCell
// self.contentView.superview.superview -> return UITableViewWrapperView
// self.contentView.superview.superview.superview -> return UITableView
// self.contentView.superview.superview.superview.superview -> return View Controller
CGRect backgroundView = CGRectMake(10.f, 5.f, (viewWidth.width-20.f), (cellSize.height + 90.f));
Try to use auto-resizing for your view.
self.view.autoresizingMask = UIViewAutoresizingFlexibleWidth;

iOS - Facebook POP: slide tableview cell to bottom right corner

Maybe you can help me with a problem.
I'm using the new Facebook POP animation framework in an iOS (7) app.
I have a tableview with a "+ button" in each cell. I want that if a user clicks on a button in the cell, that the cell (a copy of that cell) slides to the bottom right corner (in the last tabbar item) from alpha 1 to 0. Like a "add to cart" button. So the user knows that the row is added to the cart.
Does anyone know how I can accomplish that with the Facebook POP framework? Or can you point me in the right direction?
I think it's not so difficult, but I can't figure it out.
Many thanks in advance!
Assuming you refer to a UITableView inside a UIViewController which is assigned as a tab of a UITabBarController, first you duplicate the selected cell into a UIView and then you perform basic POP animation as follows:
#import <math.h>
#import "POPAnimation.h"
#import "POPBasicAnimation.h"
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
UIView *view = [self duplicateCell:cell
ContentOffset:tableView.contentOffset
Row:indexPath.row];
[self.view addSubview:view];
NSUInteger numberOfTabs = 3;
CGFloat tabWidth = self.view.frame.size.width / numberOfTabs;
[self fadeOutView:view WhileMoveTo:CGRectMake(self.view.frame.size.width - tabWidth,
tableView.frame.size.height,
tabWidth,
view.frame.size.height)];
}
- (UIView*)duplicateCell:(UITableViewCell*)cell ContentOffset:(CGPoint)offset Row:(NSInteger)row
{
CGFloat cellHeight = cell.frame.size.height;
CGFloat topVisibleCellRow = (int)(offset.y / cellHeight) ;
CGFloat delta = fmodf(offset.y, cellHeight);
CGRect frame = cell.frame;
frame.origin.y = (row - topVisibleCellRow)*cellHeight - delta;
UIView *view = [[UIView alloc] initWithFrame:frame];
view.backgroundColor = [UIColor yellowColor];
UILabel *label = [[UILabel alloc] initWithFrame:cell.textLabel.frame];
label.textColor = [UIColor blackColor];
label.text = cell.textLabel.text;
label.contentMode = UIViewContentModeScaleAspectFit;
[view addSubview:label];
return view;
}
- (void)fadeOutView:(UIView*)view WhileMoveTo:(CGRect)rect
{
[view pop_removeAllAnimations];
POPBasicAnimation *animFrame = [POPBasicAnimation animationWithPropertyNamed:kPOPViewFrame];
POPBasicAnimation *animAlpha = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];
CGFloat fDuration = 1.5f;
animFrame.toValue = [NSValue valueWithCGRect:rect];
animFrame.duration = fDuration;
animAlpha.toValue = #(0.0);
animAlpha.duration = fDuration;
[view pop_addAnimation:animFrame forKey:#"animateFrame"];
[view pop_addAnimation:animAlpha forKey:#"animateAlpha"];
}
This example is based on a basic UITableViewCell but you can adapt the cell duplication to any custom cell scheme.

strage uitableview cell behavior: view moves inside cell

I am having some strange uitableview behavior- my customs cells have a little extra space around them that I cannot fix. I can also move the cells in that space. I have attached a couple of pictures as my English is not letting me to explain better. Any ideas on what might the issue be? I can post my code for my custom cell but it even happens with admob add cell, so I am not sure it is related to the custom cell.
EDIT: Added code for heights
EDIT2: I changed the scroll view alloc to
scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.bounds.size.width,self.bounds.size.height)];
And it fixed the moving of the cell. But that white line is still there.
Table View
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
// return (self.tableViewHome.bounds.size.height-49-6-self.tableViewHome.tableHeaderView.bounds.size.height-self.tableViewHome.tableFooterView.bounds.size.height-GAD_SIZE_320x50.height)/3;
float height = self.tableViewHome.frame.size.height-self.tableViewHome.tableHeaderView.bounds.size.height-30.0;
if (indexPath.item==5)
{
height=kGADAdSizeBanner.size.height;
}
else
{
if (indexPath.item==1 || indexPath.item==3)
{
height=15.0;
}
else
{
if (indexPath.item==0 || indexPath.item==2 || indexPath.item==4)
{
height=(height-kGADAdSizeBanner.size.height)/3;
}
}
}
NSLog(#"Height:%f",height);
return height;
}
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
return 0.1;
}
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section
{
return 0.1;
}
Custom Cell
-(id) initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self)
{
scrollView = [[UIScrollView alloc] initWithFrame:self.bounds];
scrollView.autoresizingMask = UIViewAutoresizingFlexibleHeight;
[scrollView setShowsHorizontalScrollIndicator:NO];
[scrollView setShowsVerticalScrollIndicator:NO];
// NSInteger viewcount= 3;
// for(int i = 0; i< viewcount; i++) {
// CGFloat x = 2 * self.bounds.size.width;
todayView = [HomeTodayView homeTodayView];
todayView.frame = CGRectMake(0, 0,self.bounds.size.width, self.bounds.size.height);
todayView.backgroundColor = [UIColor redColor];
avgView = [HomeAvgView homeAvgView];
avgView.frame = CGRectMake(self.bounds.size.width, 0, self.bounds.size.width, self.bounds.size.height);
// [[HomeTodayView alloc] initWithFrame:
todayView.autoresizingMask = UIViewAutoresizingFlexibleHeight;
avgView.autoresizingMask = UIViewAutoresizingFlexibleHeight;
[scrollView addSubview:todayView];
[scrollView addSubview:avgView];
scrollView.contentSize = CGSizeMake(self.bounds.size.width *2, self.bounds.size.height+100);
scrollView.pagingEnabled = YES;
scrollView.bounces = NO;
[self addSubview:scrollView];
}
return self;
}
Try This:
[table setSeparatorStyle:UITableViewCellSeparatorStyleNone];
NOTE:- table = your tableview name.
If this does not work then please check that your custom cell height and the row height of tableView are same?

How to change custom viewForHeaderInSection width after rotation

I have to build a custom tableViewHeader in which at least two labels should be displayed, viz. a projectName and projectDescription. The contents of these two labels vary (i.e. in terms of string-length).
I managed to get a working version for the default device orientation (portrait) but if the user rotates the device to landscape the width of my custom headerView is not adjusted, and the user will see unused white space to the right.
The following code fragment is being used:
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
return 50.0f;
}
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
CGFloat wd = tableView.bounds.size.width;
CGFloat ht = tableView.bounds.size.height;
UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0., 0., wd, ht)];
headerView.contentMode = UIViewContentModeScaleToFill;
// Add project name/description as labels to the headerView.
UILabel *projName = [[UILabel alloc] initWithFrame:CGRectMake(5., 5., wd, 20)];
UILabel *projDesc = [[UILabel alloc] initWithFrame:CGRectMake(5., 25., wd, 20)];
projName.text = #"Project: this project is about an interesting ..";
projDesc.text = #"Description: a very long description should be more readable when your device is in landscape mode!";
[headerView addSubview:projName];
[headerView addSubview:projDesc];
return headerView;
}
I noticed that the tableView:viewForHeaderInSection: will only be called once after viewDidLoad, but not after a device orientation change.
Should I implement the willRotateToInterfaceOrientation: method with something like:
- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation
duration:(NSTimeInterval)duration
{
[self.tableView reloadSections:nil withRowAnimation:UITableViewRowAnimationNone];
}
I cannot figure out how to get the reloadSections: to work, forcing a recalculation of my customView.
If you use autoresizingMask the header adjusts correctly on rotation. No need to override anything else. I would set the automasks at the end of the code just before returning the view:
[headerView addSubview:projName];
[headerView addSubview:projDesc];
projName.autoresizingMask = UIViewAutoresizingFlexibleRightMargin;
projDesc.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin;
headerView.autoresizingMask = UIViewAutoresizingFlexibleWidth;
return headerView;

Resources