How to customize a UITableViewCell so the text doesn't overlap

Question

Any idea how to move the UITableViewCell text over so that it doesn't overlap the small image on the left hand side?

here's a screenshot:

thanks for any help

here's my TableCell code:

- (UITableViewCell *)tableView:(UITableView *)tableView1 cellForRowAtIndexPath:(NSIndexPath *)indexPath{ 
    UILabel* nameLb;
    UILabel* detailsLb; 

    UITableViewCell *cell = [tableView1 dequeueReusableCellWithIdentifier:@"log-cell"]; 
    if (cell == nil){
        cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:@"log-cell"] autorelease];        

        UIImage* img = [ImgUtil image:[NSString stringWithFormat:@"butList3_%d.png", [[SelectCategory instance] select] + 1 ]];
        UIImageView* bgImage = [[[UIImageView alloc] initWithImage:img ]autorelease];
        [cell addSubview:bgImage ];
        [cell sendSubviewToBack:bgImage ];


        nameLb = [[[UILabel alloc] initWithFrame:CGRectMake(5, 5, 250, 40)] autorelease];
        [nameLb setNumberOfLines:4];
        [nameLb setBackgroundColor:[UIColor clearColor]];
        [nameLb setTextColor:[UIColor whiteColor]];
        [nameLb setTag:NAME_TEXT];
        [nameLb setFont:[UIFont fontWithName:@"Helvetica-Bold" size:15]];
        [nameLb setMinimumFontSize:10];

        [cell addSubview:nameLb];

        //add UIImage
        cell.imageView.image = [UIImage imageNamed:@"shop.png"];

        detailsLb = [[[UILabel alloc] initWithFrame:CGRectMake(5, 45, 250, 20)] autorelease];
        [detailsLb setBackgroundColor:[UIColor clearColor]];
        [detailsLb setTextColor:[UIColor whiteColor]];
        [detailsLb setTag:DETAILS_TEXT];
        [detailsLb setFont:[UIFont fontWithName:@"Helvetica" size:12]];
        [cell addSubview:detailsLb];


    }else {

        nameLb = (UILabel*)[cell viewWithTag:NAME_TEXT];
        detailsLb = (UILabel*)[cell viewWithTag:DETAILS_TEXT];

    }


    ObjectInfo* obj = [myList objectAtIndex:indexPath.row ] ;
    nameLb.text = [obj name];
//    cell.textLabel.textColor = [UIColor whiteColor];
//    cell.textLabel.font = [UIFont boldSystemFontOfSize:17];

    double distance = [ProjUtil getDistanceWithLat1:currentLocation.latitude long1:currentLocation.longitude lat2:obj.location.latitude long2:obj.location.longitude];
    detailsLb.text = [NSString stringWithFormat:@"%.2f miles", [ProjUtil kmToMi:distance]];
//    cell.detailTextLabel.textColor = [UIColor whiteColor];
//    cell.detailTextLabel.font = [UIFont systemFontOfSize:15];

    [cell setSelectionStyle:UITableViewCellSelectionStyleNone];
    [cell setBackgroundColor:[UIColor clearColor]];

    ///[cell setAccessoryType:UITableViewCellAccessoryDisclosureIndicator];
    return cell;
} 

Answer 1

When generating your cell in cellForRowAtIndexPath, update your creation of the labels with this code to set the frames correctly

nameLb = [[[UILabel alloc] initWithFrame:CGRectMake(bgImage.frame.origin.x + bgImage.frame.size.width + 5, 5, 250, 40)] autorelease];
detailsLb = [[[UILabel alloc] initWithFrame:CGRectMake(bgImage.frame.origin.x + bgImage.frame.size.width + 5, 5, 250, 40)] autorelease];

That will dynamically create your custom rows text to the right of the image.

Answer 2

When you create the label you are positioning them with this line:

detailsLb = [[[UILabel alloc] initWithFrame:CGRectMake(5, 45, 250, 20)] autorelease];

This sets the frame of your label. CGRectMake is a function that gives you a CGRect, in this case with origin (5,45), width 250 and height 20.

If you want to move the labels over to the right, increase the x value of your frame (the 5 in the CGRectMake call above).

Answer 3

(Givin one of my code ,widout modifying sry)

I am not able to see the image but you should create a custom cell and you can set the frames of your controls of cell in method:-

-(void)layoutSubviews
{

}

sample code :-

#import <UIKit/UIKit.h>


@interface CustomizedCellProductDetails : UITableViewCell {

    UILabel *sNO;
    UILabel *abcWine;
    UILabel *redWine;
    UILabel *two;
    UILabel *hundred;
    UILabel *fourTwo;
    UILabel *twoOne;
    UIImageView *imgView;

    UILabel *itemNo;
    UILabel *itemName;
    UILabel *itemDesc;
    UILabel *department;
    UILabel *qtyAvailable;

    UIButton *check;

}

@property (nonatomic , retain) UILabel *sNO;
@property (nonatomic , retain) UILabel *abcWine;
@property (nonatomic , retain) UILabel *redWine;
@property (nonatomic , retain) UILabel *two;
@property (nonatomic , retain) UILabel *hundred;
@property (nonatomic , retain) UILabel *fourTwo;
@property (nonatomic , retain) UILabel *twoOne;
@property (nonatomic , retain) UIImageView *imgView;

@property (nonatomic , retain) UILabel *itemNo;
@property (nonatomic , retain) UILabel *itemName;
@property (nonatomic , retain) UILabel *itemDesc;
@property (nonatomic , retain) UILabel *department;
@property (nonatomic , retain) UILabel *qtyAvailable;
@property (nonatomic , retain) UIButton *check;

-(void) clicked;
@end


#import "CustomizedCellProductDetails.h"


@implementation CustomizedCellProductDetails
@synthesize sNO,abcWine,redWine,two,hundred,fourTwo,twoOne,imgView,itemNo,itemName,itemDesc,department,qtyAvailable,check;


- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {

    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        sNO=[[UILabel alloc] init];
        abcWine=[[UILabel alloc] init];
        redWine=[[UILabel alloc] init];
        two=[[UILabel alloc] init];
        hundred=[[UILabel alloc] init];
        fourTwo=[[UILabel alloc] init];
        twoOne=[[UILabel alloc] init];
        imgView=[[UIImageView alloc] init];

        itemNo=[[UILabel alloc] init];
        itemName=[[UILabel alloc] init];
        itemDesc=[[UILabel alloc] init];
        department=[[UILabel alloc]init];
        qtyAvailable=[[UILabel alloc] init];

        check=[UIButton buttonWithType:UIButtonTypeCustom];
        [check addTarget:self action:@selector(clicked) forControlEvents:UIControlEventTouchUpInside];
        [check setTitle:@"Check" forState:UIControlStateNormal];

        [self.contentView addSubview:sNO];
        [self.contentView addSubview:abcWine];
        [self.contentView addSubview:redWine];
        [self.contentView addSubview:two];
        [self.contentView addSubview:hundred];
        [self.contentView addSubview:fourTwo];
        [self.contentView addSubview:twoOne];
        [self.contentView addSubview:itemNo];
        [self.contentView addSubview:itemName];
        [self.contentView addSubview:itemDesc];
        [self.contentView addSubview:department];
        [self.contentView addSubview:qtyAvailable];
        [self.contentView addSubview:check];

    }
    return self;
}

- (void)layoutSubviews {

    [super layoutSubviews];

    CGRect contentRect = self.contentView.bounds;

    CGFloat boundsX = contentRect.origin.x;

    CGRect frame;

    frame=CGRectMake(boundsX+10, 0, 50, 40);

    sNO.frame = frame;

    frame= CGRectMake(boundsX+70 ,0, 150, 40);

    abcWine.frame = frame;

    frame= CGRectMake(boundsX+230 ,0, 150, 40);

    redWine.frame = frame;

    frame= CGRectMake(boundsX+390 ,0, 50, 40);

    two.frame = frame;

    frame= CGRectMake(boundsX+450 ,0, 50, 40);

    hundred.frame = frame;

    frame= CGRectMake(boundsX+510 ,0, 50, 40);

    fourTwo.frame = frame;

    frame= CGRectMake(boundsX+570 ,0, 50, 40);

    twoOne.frame = frame;

    /************************                      ***********************/

    frame= CGRectMake(boundsX+10 ,50, 100, 200);

    imgView.frame = frame;

    }

-(void) clicked
{

}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {

    [super setSelected:selected animated:animated];

    // Configure the view for the selected state.
}


- (void)dealloc {
    [super dealloc];
}


@end

also change the height in cellForRowAtIndexPath delegate method of uitableviewcell.