Listview with subtitle and stepper

3 posts, 0 answers
  1. Polis
    Polis avatar
    2 posts
    Member since:
    Sep 2015

    Posted 07 Sep 2015 Link to this post

    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

  2. Yoanna
    Admin
    Yoanna avatar
    44 posts

    Posted 09 Sep 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. DevCraft banner
  4. Polis
    Polis avatar
    2 posts
    Member since:
    Sep 2015

    Posted 09 Sep 2015 in reply to Yoanna Link to this post

    This is great stuff Yoanna, thank you.
Back to Top