Listview with subtitle and stepper

[Polis]

Hello,

Working on a new project in swift (Xcode 7 beta) with TK Listview.

Each ListView cell will represent a restaurant menu item, so I need to have a title (food name), description (ingredients), price, and a numeric stepper. The cell should also be selectable.

Would this be possible with a custom ListViewCell class? Any hints please?

 

Regards,
Polis

[Yoanna]

Hello, Polis.

Thank you for your interest in Telerik UI for iOS.

TKListView is fully customizable component and the scenario you described can be achieved with a few lines of code. By creating custom cell you will be able to add any UI elements to it and position them by your choice.  Below is a quick example how this could be done in code:

@implementation MyListViewCell

-(instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.textLabel.textColor =  [UIColor colorWithRed:0.2 green:0.2 blue:0.2 alpha:1];
        self.textLabel.font = [UIFont fontWithName:@"HelveticaNeue-Italic" size:13];

        self.detailTextLabel.textColor =  [UIColor colorWithRed:0.2 green:0.2 blue:0.2 alpha:1];
        self.detailTextLabel.font = [UIFont fontWithName:@"HelveticaNeue-Medium" size:11];

        //priceLabel is a property of your custom cell added by you
        self.priceLabel = [[UILabel alloc] init];
        self.priceLabel.textColor = [UIColor colorWithRed:0.2 green:0.2 blue:0.2 alpha:1];
        self.priceLabel.font = [UIFont fontWithName:@"HelveticaNeue-Italic" size:13];
        [self addSubview:self.priceLabel];

        //countStepper is a property of your custom cell added by you
        self.countStepper = [[UIStepper alloc] init];
        [self addSubview: self.countStepper];

    }
    return self;
}

-(void)layoutSubviews
{
    [super layoutSubviews];

    self.textLabel.frame = CGRectMake(14, CGRectGetHeight(self.frame) - 10 - 35, CGRectGetWidth(self.frame) - 28, 20);
    self.detailTextLabel.frame = CGRectMake(14, CGRectGetHeight(self.frame) - 15 - 10, CGRectGetWidth(self.frame) - 28, 15);
    self.priceLabel.frame = CGRectMake(160, 0, 60, 60);
    self.countStepper.frame = CGRectMake(220, 10, 60, 40);
    self.countStepper.transform = CGAffineTransformMakeScale(0.75, 0.75);
}

@end

To use the custom cell that you have created you need to register its class:

[listView registerClass:[MyListViewCell class] forCellWithReuseIdentifier:@"cell"];

and use it in the listView:cellForItemAtIndexPath: method of TKListViewDataSource:

-(TKListViewCell *)listView:(TKListView *)listView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    MyListViewCell *cell = [listView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
    cell.textLabel.text = @"Meal title";
    cell.detailTextLabel.text = @"Description(ingredients)";
    cell.priceLabel.text = @"22.40";
    return cell;
}

I hope this helps. If you have any questions I will be glad to assist you.

Regards,
Yoanna
Telerik

[Polis]

This is great stuff Yoanna, thank you.