Xamarin tvOS TableView with Horizontal and Vertical Scrolling

Xamarin tvOS TableView with Horizontal and Vertical Scrolling

01 March 2021

What is TableView?

TableView is the UI component used to display a large amount of data in a single column of scrolling views.

Limitation with TableView

  • Presents data only in a single column
  • Provides one-directional scrolling

To overcome these limitations, we can use the collection view inside the table view cells to get two directional scrolling.

Following are the steps to create the table view with horizontal and vertical scrolling

  1. Create a Xamarin.tvOS project (here single view app used for the example)
  2. Create a view controller class as below:
    Xamarin tvOS TableView with Horizontal and Vertical Scrolling
  3. Add the TableView Datasource as shown in the below code:
    Xamarin tvOS TableView with Horizontal and Vertical Scrolling
  4. Create the TableViewCell as the following code, it will contain the collection view to provide scrolling in another direction.
    Xamarin tvOS TableView with Horizontal and Vertical Scrolling
  5. Create the TableView Delegate class as below:
    Xamarin tvOS TableView with Horizontal and Vertical Scrolling
  6. Create the CollectionView Datasource class as below:
    Xamarin tvOS TableView with Horizontal and Vertical Scrolling
  7. Create the CollectionViewCell and define the UI structure of the cell as shown below:
    Xamarin tvOS TableView with Horizontal and Vertical Scrolling
  8. Now, create the CollectionView Delegate to define user interactions:
    Xamarin tvOS TableView with Horizontal and Vertical Scrolling
  9. At last, add the DataModel as below:
    Xamarin tvOS TableView with Horizontal and Vertical Scrolling
  10. Run the project to get the following output (horizontal and vertical arrow showing the allowed scrolling direction):
    Xamarin tvOS TableView with Horizontal and Vertical Scrolling

search
Blog Categories
Request a quote