How to set corner radius for both header and related cell in ios

Question

Hi i am beginner in ios and in my project i have created one Expandable list view

when i click on header then cell will expand and here cell height is automatically increase based on text size

And here my requirement is when i click on header then cell will expand and i want to set corner radius like below first image

But according to my code screen is coming like second image i want screen exactly like first image

One one more thing when we expand the cell header height should be "60"

and when we collapse the cell header height should be "75" this is also i need to settle please help me some one

my code:-

//
//  ViewController3.m
//  matyExpandableTableView
//
//  Created by Venkat on 11/13/15.
//  Copyright (c) 2015 Maitrayee Ghosh. All rights reserved.
//

#import "ViewController3.h"

@interface ViewController3 ()
{

    UITableView * tableList;

    UILabel * TripIdLable;
    UILabel * TRipDateLabel;
    UILabel * LocationLabel;

    UILabel * PickUpAdressLabel;
    UILabel * DRopOutAdressLabel;

    UILabel * AppointMentDate;
    UILabel * CurrentStatus;

    UITextView * PickUpAdress;
    UITextView * DropDownAdress;

    UIButton * Accept;
    UIButton * Deny;
    BOOL collapsed;
    CGFloat height;
}
@end

@implementation ViewController3

- (void)viewDidLoad{

    [super viewDidLoad];

    collapsed = YES;

    tableList = [[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStyleGrouped];
    tableList.translatesAutoresizingMaskIntoConstraints = NO;
    tableList.dataSource=self;
    tableList.delegate=self;
    tableList.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
    tableList.tableFooterView = [[UIView alloc] initWithFrame:CGRectZero];
    tableList.backgroundColor = [UIColor lightGrayColor];
    self.view.backgroundColor = [UIColor lightGrayColor];
    tableList.separatorStyle = UITableViewCellSeparatorStyleNone;
    tableList.tableFooterView = [[UIView alloc] initWithFrame:CGRectZero];
    [tableList registerClass:[UITableViewCell class] forCellReuseIdentifier:@"Cell"];

    tableList.estimatedRowHeight = 40.0;
    tableList.rowHeight = UITableViewAutomaticDimension;

    [self.view addSubview:tableList];

    NSDictionary * views = NSDictionaryOfVariableBindings(tableList);

    NSArray * horizentalConstraint = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[tableList]-10-|" options:0 metrics:nil views:views];

    NSArray * verticalConstraint = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-10-[tableList]-0-|"options:0 metrics:nil views:views];

    [self.view addConstraints:horizentalConstraint];
    [self.view addConstraints:verticalConstraint];

    arrayForBool=[[NSMutableArray alloc]init];
    TripsArray=[[NSArray alloc]initWithObjects:
                @"1000",
                @"1111",
                @"2222",
                @"3333",
                @"4444",
                @"5555",
                @"6666",
                @"7777",
                nil];

    for (int i=0; i<[TripsArray count]; i++) {

        [arrayForBool addObject:[NSNumber numberWithBool:NO]];
    }
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    if ([[arrayForBool objectAtIndex:section] boolValue]) {

        return 1;
    }

    else
        return 0;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *cellIdentifier = @"Cell";

    UITableViewCell *cell =[tableView dequeueReusableCellWithIdentifier:cellIdentifier];

    cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];

    BOOL manyCells  = [[arrayForBool objectAtIndex:indexPath.section] boolValue];

    /********** If the section supposed to be closed *******************/
    if(!manyCells)
    {
        cell.backgroundColor=[UIColor clearColor];

        cell.textLabel.text=@"";
    }
    /********** If the section supposed to be Opened *******************/

    else
    {

        PickUpAdress = [self createTextView];
        [cell.contentView addSubview: PickUpAdress];

        //Applying autolayouts for Labels;

        NSDictionary * viewsDic = NSDictionaryOfVariableBindings(PickUpAdress);

        [cell.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:[NSString stringWithFormat:@"H:|-10-[PickUpAdress]-10-|"]
                                                                                 options:0
                                                                                 metrics:nil
                                                                                   views:viewsDic]];

        [cell.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:[NSString stringWithFormat:@"V:|-10-[PickUpAdress]-10-|"]
                                                                                 options:0
                                                                                 metrics:nil
                                                                                   views:viewsDic]];

        cell.layer.cornerRadius = 5.0;
        cell.layer.masksToBounds = YES;
    }

    return cell;
}

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

    return UITableViewAutomaticDimension;
}

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{

    return [TripsArray count];
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    /*************** Close the section, once the data is selected ***********************************/
    [arrayForBool replaceObjectAtIndex:indexPath.section withObject:[NSNumber numberWithBool:NO]];

    [tableList reloadSections:[NSIndexSet indexSetWithIndex:indexPath.section] withRowAnimation:UITableViewRowAnimationAutomatic];

}

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 75;
}

#pragma mark - Creating View for TableView Section

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{

    UIView *sectionView=[[UIView alloc]initWithFrame:CGRectMake(0, 0, tableList.frame.size.width,75)];
    sectionView.tag=section;

    TripIdLable = [self createLabelWithText1];
    TripIdLable.text=[NSString stringWithFormat:@"Trip# %@",[TripsArray objectAtIndex:section]];
    [sectionView addSubview: TripIdLable];


    NSDictionary * HeaderDictionary = NSDictionaryOfVariableBindings(TripIdLable);

    [sectionView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:[NSString stringWithFormat:@"H:|-10-[TripIdLable(100)]-10-|"]
                                                                        options:0
                                                                        metrics:nil
                                                                          views:HeaderDictionary]];

    [sectionView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:[NSString stringWithFormat:@"V:|-10-[TripIdLable(30)]"]
                                                                        options:0
                                                                        metrics:nil
                                                                          views:HeaderDictionary]];

    CAShapeLayer * maskLayer = [CAShapeLayer layer];
    UIRectCorner corners = UIRectCornerTopLeft | UIRectCornerTopRight;
    if(![[arrayForBool objectAtIndex:section] boolValue])
        corners |= UIRectCornerBottomLeft | UIRectCornerBottomRight;
    maskLayer.path = [UIBezierPath bezierPathWithRoundedRect:sectionView.bounds byRoundingCorners:corners cornerRadii:CGSizeMake(5, 5)].CGPath;
    sectionView.layer.mask = maskLayer;

    /********** Add UITapGestureRecognizer to SectionView   **************/

    UITapGestureRecognizer  *headerTapped   = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(sectionHeaderTapped:)];
    [sectionView addGestureRecognizer:headerTapped];


    return  sectionView;
}

-(UILabel *)createLabelWithText1{

    UILabel * label = [[UILabel alloc] init];
    label.textAlignment = NSTextAlignmentLeft;
    label.backgroundColor=[UIColor clearColor];
    label.textColor=[UIColor blackColor];
    label.translatesAutoresizingMaskIntoConstraints = NO;
    return label;
}

-(UITextView *)createTextView{

    UITextView *  textview = [[UITextView alloc]init];
    textview.font = [UIFont systemFontOfSize:17.0];
    textview.translatesAutoresizingMaskIntoConstraints = NO;
    textview.layer.cornerRadius = 3.0;
    textview.layer.borderColor = [UIColor orangeColor].CGColor;
    textview.text = @"WYSONG DAVID K\n1055 MARINER DR\nWARSAW,IN - 46582\nWYSONG DAVID K\n1055 MARINER DR\nWARSAW,IN - 46582\nWYSONG DAVID K";
    textview.scrollEnabled = NO;

    return textview;
}

- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)sectio
{       // anil
    UIView *footerView;

    if (tableView == tableList) {

        footerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, tableList.frame.size.width, 10)];
        footerView.backgroundColor = [UIColor lightGrayColor];
    }else {

    }
    return footerView;
}
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section{

    return 10 ;
}

#pragma mark - Table header gesture tapped
- (void)sectionHeaderTapped:(UITapGestureRecognizer *)gestureRecognizer{

    NSIndexPath *indexPath = [NSIndexPath indexPathForRow:0 inSection:gestureRecognizer.view.tag];
    if (indexPath.row == 0) {

        collapsed  = [[arrayForBool objectAtIndex:indexPath.section] boolValue];
        collapsed       = !collapsed;
        [arrayForBool replaceObjectAtIndex:indexPath.section withObject:[NSNumber numberWithBool:collapsed]];

        //reload specific section animated
        NSRange range   = NSMakeRange(indexPath.section, 1);
        NSIndexSet *sectionToReload = [NSIndexSet indexSetWithIndexesInRange:range];
        [tableList reloadSections:sectionToReload withRowAnimation:UITableViewRowAnimationFade];
    }
}

@end

image1:-

image2:- -------

score 0 · Answer 1 · edited May 23 '17 at 12:01

0

Instead of always using cornerRadius, you can adapt this answer (how to set cornerRadius for only top-left and top-right corner of a UIView?) to only have top rounded corners for the header and bottom rounded corners for the cell when the section is opened.

edited May 23 '17 at 12:01

Community

1
1

answered Nov 13 '15 at 14:18

Cyril

1,649
1
17
32

Did you set the header view and the cell content view bounds to be clipped? (clipToBounds = YES) – Cyril Nov 13 '15 at 14:41
why not i have already set corner radius for header only i need to set corner radius for tablelist cell as like my first image – Nov 13 '15 at 14:47

score 0 · Answer 2 · answered Nov 13 '15 at 14:52

First - you can play with maskToBounds to make rounded cell's top corners NOT visible or you can play with -drawInRect method like this:

- (void) drawRect:(CGRect)rect {

    [super drawRect:rect];

    //Create shape which we will draw. 
    CGRect rectangle = CGRectMake(2, 
                                  2, 
                                  rect.size.width - 4,
                                  rect.size.height - 4);

    //Create BezierPath with round corners
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:rectangle 
                                                   byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight 
                                                         cornerRadii:CGSizeMake(10.0, 10.0)];

    //Set path width
    [maskPath setLineWidth:2];

    //Set color
    [[UIColor redColor] setStroke];

    //Draw BezierPath to see it
    [maskPath stroke];
}

But from the design point of view not sure if it's a good idea. What if there are more then 1 cell? Imagine your design.

I'd rather keep rounded cells apart from header

try to put this code "-drawInRect" to your custom cell implementation — Injectios, Nov 13 '15 at 14:59

How to set corner radius for both header and related cell in ios

my code:-

image1:-

2 Answers2