This is a migrated thread and some comments may be shown as answers.

Custom Cell with lots of objects ?

3 Answers 84 Views
ListView - Xamarin.iOS
This is a migrated thread and some comments may be shown as answers.
Tony
Top achievements
Rank 1
Tony asked on 04 Dec 2015, 03:39 PM

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 ?

3 Answers, 1 is accepted

Sort by
0
Yoanna
Telerik team
answered on 07 Dec 2015, 09:00 AM
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
0
Ngo Dinh
Top achievements
Rank 1
answered on 23 May 2016, 11:03 AM

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

0
Adrian
Telerik team
answered on 26 May 2016, 10:50 AM
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
Tags
ListView - Xamarin.iOS
Asked by
Tony
Top achievements
Rank 1
Answers by
Yoanna
Telerik team
Ngo Dinh
Top achievements
Rank 1
Adrian
Telerik team
Share this question
or