Skip to main content

Custom Grid View

Introduction​

The GridView class provided in Dyte's iOS UIKit allows you to create custom grid views to display content in a structured layout. This guide will walk you through the process of understanding, customizing, and utilizing the GridView class to create your custom grid views.

Step 1: Understanding the GridView Class​

The GridView class is a customizable UIView subclass designed to display a grid of views. It provides properties and methods to manage the arrangement and presentation of child views within the grid.

Key Components:​

  • Properties Needed to manage GridView:

    • maxItems: Maximum number of items the grid can contain.
    • currentVisibleItem: Number of items currently visible in the grid.
    • scrollView: UIScrollView for enabling scrolling if the grid overflows.
    • views: Array holding the child views of the grid.

Example Usage:​

let tile = DyteParticipantTileView(mobileClient: meeting,
                                    participant: participant,
                                    isForLocalUser: false,
                                    showScreenShareVideoView: false)

These tiles stored in views array can be rendered in scrollView and currentVisibleItem, maxItems can manage state of grid to show/hide certain tiles if pagination is needed.

Remove tile from view using tileView?.removeFromSuperview()

Integrating Participant Tile Views​

To display video views within the GridView, you can utilize the DyteParticipantTileContainerView and DyteParticipantTileView classes provided by Dyte's iOS UIKit. These classes encapsulate the logic for rendering video streams of meeting participants.

DyteParticipantTileContainerView​

The DyteParticipantTileContainerView is a UIView subclass designed to contain a single DyteParticipantTileView. It provides methods for preparing the view for reuse and setting the participant whose video stream should be displayed.

Example Usage:​

let tileContainerView = DyteParticipantTileContainerView()
tileContainerView.setParticipant(meeting: myMeetingClient,
                             participant: meetingParticipant)

DyteParticipantTileView​

The DyteParticipantTileView class represents a single tile within the grid view, displaying the video stream of a meeting participant. It manages the layout and presentation of the participant's video view, along with additional features such as participant name tags and pin indicators.

You can add instances of DyteParticipantTileView to the GridView to render multiple video streams within the grid, providing a comprehensive view of meeting participants during video conferences.