Adaptive layout with UITableView

In this article , we see how we can use Custom UITableViewcell and  avoid manual calculation of height’s of Cell when  cell structure  is complex by containing variable size  elements like UILabel, UITextView etc.

1.Create a Project AppStoreDemo.

2. Go to Storyboard , Take a UISearchBar and a UITableView. UITableView just below the UISearchBar.

Define Constraints for UISerachBar

Screen Shot 2015-09-09 at 1.11.03 PM

And adjust TableView Position by giving appropriate constraintsScreen Shot 2015-09-09 at 1.11.03 PMScreen Shot 2015-09-09 at 1.11.03 PM

3. Define properties for ViewController’s Components . Connect IBOultlets to Storyboard.

@property (nonatomic,strong) IBOutlet UITableView *tableView;
@property (nonatomic,strong) IBOutlet UISearchBar *searchBar;

4. Add UISearchBar Delegate Methods to ViewController.m file

-(void)searchBarSearchButtonClicked:(UISearchBar *)searchBar{

if (searchBar.text != nil) {
[self searchWithItem:searchBar.text];
}
    
}

And Add a new function in .m file

-(void)searchWithItem:(NSString*)item{

NSString *urlString = [NSString stringWithFormat:@"%@%@&entity=software",self.appStoreBasicUrlString, item];

NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:urlString] ];
NSError *error;

NSDictionary *fetchObjects = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingAllowFragments error:&error];

if (fetchObjects) {
self.searchResult = [fetchObjects objectForKey:@"results"];
[self.tableView reloadData];
}

}

In .m file add two properties

@property (nonatomic, strong) NSMutableArray *searchResult;
@property (nonatomic, strong) NSString *appStoreBasicUrlString;

And in  .m File add  the following code segment in  viewDidLoad

self.appStoreBasicUrlString = @"https://itunes.apple.com/search?term=";

4. Take a TableViewCell  in the TableView from StroyBoard.

Here , four UILabel are taken in this UITableViewCell. We mainly focus on the last Description UILabel. Beacause  Its size varies for every different item . We have to automatically resize this UILabel without Calculating the height and that shoud effect the cell size in tableView .

 

Screen Shot 2015-09-09 at 6.01.27 PM

We set Contraints for Description UILabel   , noOfLines = 0 from StroyBoard and Content Compression Resistance Priority to 1000. And we do not give any fixed height for this Label. 

 

Screen Shot 2015-09-09 at 6.05.54 PM Screen Shot 2015-09-09 at 6.06.09 PM

 

Create a UITableViewCell Class Named AppStoreTableViewCell and add the following properties to  AppStoreTableViewCell.h file

@property (nonatomic, weak) IBOutlet UILabel *appName;
@property (nonatomic, weak) IBOutlet UILabel *releaseDate;
@property (nonatomic, weak) IBOutlet UILabel *category;
@property (nonatomic, weak) IBOutlet UILabel *appDescription;

5. Add  UITableViewDataSource  methods  to .m file

#pragma mark – UITableView DataSource

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{

    return self.searchResult.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
 
    AppStoreTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:kAppStoreTableCellIdenfier];

NSDictionary *app = [self.searchResult objectAtIndex:indexPath.row];

cell.appName.text = [app valueForKey:@"artistName"];
cell.category.text = [app valueForKey:@"kind"];
cell.releaseDate.text = [app valueForKey:@"releaseDate"];
//    cell.appDescription.attributedText = [app valueForKey:@"artistName"];

NSAttributedString *string  =  [[NSAttributedString alloc] initWithData:[[app valueForKey:@"description"] dataUsingEncoding:NSUTF8StringEncoding] options:@{NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType, NSCharacterEncodingDocumentAttribute: [NSNumber numberWithInt:NSUTF8StringEncoding]} documentAttributes:nil error:nil];

return cell;
       
}

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
    
    return 1;
}

6. Now we have to add two   UITableViewDelegate methods  to .m file

-(CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath{

return UITableViewAutomaticDimension;
}

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{

return UITableViewAutomaticDimension;
}

7. Then add the following code segment to viewDidLoad Method in .m file if the delegate are not pointed from the storyboard

self.searchBar.delegate = self;
self.tableView.dataSource = self;
self.tableView.delegate = self;

This will work!

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s