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_01
  3. Add the TableView Datasource as shown in the below code:
    Xamarin_tvOS_TableView_with_Horizontal_and_Vertical_Scrolling_02
  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_03
  5. Create the TableView Delegate class as below:
    Xamarin_tvOS_TableView_with_Horizontal_and_Vertical_Scrolling_04
  6. Create the CollectionView Datasource class as below:
    Xamarin_tvOS_TableView_with_Horizontal_and_Vertical_Scrolling_05
  7. Create the CollectionViewCell and define the UI structure of the cell as shown below:
    Xamarin_tvOS_TableView_with_Horizontal_and_Vertical_Scrolling_06
  8. Now, create the CollectionView Delegate to define user interactions:
    Xamarin_tvOS_TableView_with_Horizontal_and_Vertical_Scrolling_07
  9. At last, add the DataModel as below:
    Xamarin_tvOS_TableView_with_Horizontal_and_Vertical_Scrolling_08
  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_09

Request a quote