Ad Code

Responsive Advertisement

Table View in Xamarin iOS - Part 2

Logesh PalaniLogesh Palani December 15, 2019



Introduction 
In this article, we are going take a look into different UITableViewCell built-in styles in given Xamarin.iOS. Before getting started with this post, you should follow the Part 1 article instructions completely. 
Step 1: 

Let's modify the UITableViewCell  and their properties in GetCell Implementation 

 within UITableViewSource class. Here are the properties of building styles.

Subject – Title label string. 
Body – Detailed title label string. 
Image – Set Image 
Depending upon your cell selection, you have to fill in different subviews values. 




Step 2: 
Add profile image file in Assets . To Perform that, open Solution Explorer >> Resources >> Assets >> then, right click to add Image Set >> give the Image Set name, and drag and drop the images. 



Step 3: 

  • Open TableViewSource class and go to GetCell method. All the changes will be made only in GetCell method. 


Sample A: Default Style 

change the constructor of UITableViewCell is UITableViewCellStyle.Default. Both

 UITableViewCellStyle.Default, string are the parameters. Here, we can set cell 

 type as default and string as null. Let's bind the data their properties base on index 

 and your code will look as shown below. 


1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
using System;
using System.Collections.Generic;
using CoreGraphics;
using Foundation;
using UIKit;

namespace TableViewSample
{
    internal class SampleTableViewSource : UITableViewSource
    {
        private IList<ContactModel> data;
        public SampleTableViewSource(List<ContactModel> data)
        {
            this.data = data;
        }

        public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
        {
            var cell = new UITableViewCell(UITableViewCellStyle.Default, null);
            var dataSet = data[indexPath.Row];

            if (dataSet != null)
            {
                cell.TextLabel.Text = dataSet.Name;
                cell.ImageView.Image = UIImage.FromBundle("Phineas_Flynn");
            }

            return cell;
        }

        public override nint RowsInSection(UITableView tableview, nint section)
        {
            return data.Count;
        }
    }
}


Run the application, your output like below. 



Sample B: Subtitle Style 
Next, try with Subtitle style. Just change a piece of code.  
Change cell style type Default into Subtitle, add one more property as Detail and bind the Detail string with this. The code will be shown as given below. 

1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
using System;
using System.Collections.Generic;
using CoreGraphics;
using Foundation;
using UIKit;

namespace TableViewSample
{
    internal class SampleTableViewSource : UITableViewSource
    {
        private IList<ContactModel> data;
        public SampleTableViewSource(List<ContactModel> data)
        {
            this.data = data;
        }

        public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
        {
            var cell = new UITableViewCell(UITableViewCellStyle.Default, null);
            var dataSet = data[indexPath.Row];

            if (dataSet != null)
            {
                cell.TextLabel.Text = dataSet.Name;
                cell.ImageView.Image = UIImage.FromBundle("Phineas_Flynn");
                cell.DetailTextLabel.Text = dataSet.MobileNumber;
            }

            return cell;
        }

        public override nint RowsInSection(UITableView tableview, nint section)
        {
            return data.Count;
        }
    }
}

Run the app to see the output. 



Sample C: Value Style  

Finally, look into Value style type as well as change the cell type and properties. 

Change the type Subtitle into Default: here we have only two label properties. This class code will be as shown below. 


1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
using System;
using System.Collections.Generic;
using CoreGraphics;
using Foundation;
using UIKit;

namespace TableViewSample
{
    internal class SampleTableViewSource : UITableViewSource
    {
        private IList<ContactModel> data;
        public SampleTableViewSource(List<ContactModel> data)
        {
            this.data = data;
        }

        public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
        {
            var cell = new UITableViewCell(UITableViewCellStyle.Default, null);
            var dataSet = data[indexPath.Row];

            if (dataSet != null)
            {
                cell.TextLabel.Text = dataSet.Name;
                cell.DetailTextLabel.Text = dataSet.MobileNumber;
            }

            return cell;
        }

        public override nint RowsInSection(UITableView tableview, nint section)
        {
            return data.Count;
        }
    }
}


Run the app to see the result like below. 





Full source is here 

I believe by now you’d have understood how to use Default Tableview cells. Please share if you have any queries in the comment’s section.  

Reactions

Post a Comment

0 Comments

You're comment here