Custom Cell with lots of objects ?

4 posts, 0 answers
  1. Tony
    Tony avatar
    6 posts
    Member since:
    Jan 2014

    Posted 04 Dec 2015 Link to this post

    I have looked thru the documentation and examples, so find an example of the ListView control, having its entirely custom cell.

     It could for example with 3 TextBox controls, 2 ImageViews and other stuff.

     How do I accomplish that ?

  2. Yoanna
    Admin
    Yoanna avatar
    44 posts

    Posted 07 Dec 2015 Link to this post

    Hey Tony, 

    thank you for contacting us.

    In order to achieve the described scenario you need to create a custom cell that inherits from TKListViewCell like below:
    public class ImageWithTextListViewCell : TKListViewCell
        {
            public UILabel Label;
            public ImageWithTextListViewCell(IntPtr ptr) : base(ptr)
            {
                this.ContentView.BackgroundColor = new UIColor (0.91f, 0.91f, 0.91f, 1.0f);
                this.TextLabel.BackgroundColor = new UIColor (0.91f, 0.91f, 0.91f, 1.0f);
                this.TextLabel.Lines = 0;
                this.TextLabel.LineBreakMode = UILineBreakMode.WordWrap;
                this.TextLabel.TextAlignment = UITextAlignment.Center;
                this.TextLabel.Font = UIFont.FromName ("Optima-Regular", 16);
                this.TextLabel.Layer.CornerRadius = 3;
                this.TextLabel.Layer.MasksToBounds = true;
                this.Label = new UILabel ();
                this.Label.Text = "TEXT";
                this.AddSubview (Label);
            }
     
            public override void LayoutSubviews ()
            {
                base.LayoutSubviews ();
                this.Label.Frame = new CGRect (20, 20, 50, 50);
                this.ImageView.Frame = new CGRect (15, 0, 120, 150);
                this.TextLabel.Frame = new CGRect (0, this.ImageView.Frame.Size.Height, this.Frame.Size.Width, 60);
            }
        }

    Please note that the property called Label is added to this custom cell. You can add as many controls as you wish this way and position them by your taste. 

    Once you have prepared a custom cell you should register it in list view so it would be used :
    listView.RegisterClassForCell (new Class(typeof(ImageWithTextListViewCell)), "cell");

    Then all you need to do is setup the cell in the CellForItem method of TKListViewDataSource and return it:
    class ListViewDataSource : TKListViewDataSource
    {

    public
    override TKListViewCell CellForItem (TKListView listView, NSIndexPath indexPath)
                {
                    ImageWithTextListViewCell cell = (ImageWithTextListViewCell)listView.DequeueReusableCell ("cell", indexPath);
                    
                    cell.ImageView.Image = new UIImage (imageName);
                    cell.TextLabel.Text = "Existing label";
                    cell.Label.Text = "Additional label";
                    return cell;
                }
    }

    Make sure you assign your ListViewDataSource class to TKListView data source property:

    this.listViewDataSource = new ListViewDataSource (this);
    listView.DataSource =
    this.listViewDataSource;


    I hope this points you in the right direction. If you need further assistance do not hesitate to contact us. 

    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. Ngo Dinh
    Ngo Dinh avatar
    1 posts
    Member since:
    Nov 2015

    Posted 23 May Link to this post

    Yoanna. My English skill is low level, I creat a view file (.xib), delete default UIView and drap and drop 3 lable in tool box and add name lb1,lb2,lb3, I add class CustomCell  for it.

    partial class CustomCell : TKListViewCell
        {
            
            public CellInvoice(IntPtr handle) : base(handle)
            {
            }

            public override void LayoutSubviews()
            {
                base.LayoutSubviews();
                
            }

            public void UpdateCell(string text1, string text2, string text3)
            {
                lb1.Text = text1;

                lb2.Text = text2;

                lb3.Text = text3;
            }
        }

    I add class  public class CustomTableSource : TKListViewDataSource

    {

      public override TKListViewCell CellForItem(TKListView listView, NSIndexPath indexPath)
            {
                 listView.RegisterNib(UINib.FromName(_cellIdentifier, null), _cellIdentifier);
                var cell = listView.DequeueReusableCell(_cellIdentifier, indexPath) as CellInvoice ?? new CellInvoice(indexPath.Handle);
                cell.UpdateCell("1","2","3");
                return cell;
            }

    }

     

    There must be the right way

  5. Adrian
    Admin
    Adrian avatar
    167 posts

    Posted 26 May Link to this post

    Hello, Ngo Dinh Tung,

    Registering the list view to use your custom cell should not be done in the data source. More appropriate place to do this is the ViewDidLoad method of your UIViewController. Consider the code below:
    public override void ViewDidLoad ()
    {
        base.ViewDidLoad ();
        listView.RegisterNib(UINib.FromName(_cellIdentifier, null), _cellIdentifier);
    }


    Regards,
    Adrian
    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
Back to Top
DevCraft banner