(616) 371-1037

[email protected]

Expandable UITableView with Xamarin iOS

June 7, 2018 - Valeriy Kovalenko

3 Comments

Expandable UITableViewCells with variable height, beautiful animations and no 3rd party libraries – all with just a few lines of code. Interested? Let me show you how I got all of these.

Let’s start by taking a look at the final result:

There are four animations here to get this effect done. When users tap on an item, the UITableView changes the height of the cell to show the hidden content. A little arrow icon is rotated to indicate that the cell is expanded. And to make it look more natural, the background color of the cell is changed and the hidden content fades-in.

Cell animation

First, we will let the UITableView know that our cells are of variable height.

Now, the most interesting part — the cell itself.

I’m using a little trick with constraints here to get the animation done with no effort. Notice that there are two unbroken chains of constraints here:

  1. Superview — UIImageView — (1)— Superview
  2. Superview — UIImageView — (2)— UILabel — Superview

The priority of Constraint 1 (UIImageView — Superview) is set to 999 (we don’t want to use 1000 here because it’ll be not possible to change it later to a lower value).

The priority of Constraint 2 (UIImageView — UILabelView) is set to 750.

As long as Constraint 1 has a higher priority than Constraint 2 the cell is collapsed. As soon as we change the priority of Constraint 1 to a lower value, the cell will expand.

Since the hidden content might be of a variable length. There are a few properties to set on UILabel as well:

 

Now let’s handle the row selected event. We need just three lines of code to expand/collapse a cell.

Here we’re changing the priority of Constraint 1 from the above to a lower value to expand the cell (or back to the higher value to collapse it). UITableView takes care of everything else, including the animation. Not bad, right?

 

UIImageView Rotation

It’s really simple to rotate an image using built-in animations of UIKit:

Note a small hack here. I multiple Math.PI by -0.99999 to make it rotate counterclockwise.

Background Color

Plain UIKit animation without any hacks:

Fade-in effect

Unfortunately, it’s not possible to use the Animate function to change a text color. So I’m using the Transition function here.

Cell Recycling

The final thing that we need to take care of is the cell recycling. Each time when a user expands/collapses a cell, we need to save the state somewhere and make sure that cells are initialized according to that state.

Here is my cell class:

 

I’m using a view model to persist the cell state. Each time when a cell is initialized I apply the state without animation. When a user interacts with the table, I reuse the same method to expand/collapse the cell with animation.

I hope you’ll find it useful! By the way, here is how I create awesome gradient backgrounds: https://trailheadtechnology.com/gradient-backgrounds-in-xamarin-ios/

Valeriy Kovalenko

3 thoughts on “Expandable UITableView with Xamarin iOS

  • bob

    July 27, 2018 at 10:36 pm

    I’m pretty confused on exactly how you did your constraints, granted I’m newer to using the xcode constraint builder…but I can’t seem to get anything working even remotely like yours.

    Reply
    • Valeriy Kovalenko

      December 7, 2018 at 6:41 am

      Yeah, constraints might be confusing. You need to make sure that you have 2 unbreakable chains of constraints from top to bottom.

      Reply
  • david

    August 17, 2018 at 8:16 am

    nice article

    Reply

Leave a comment

Your email address will not be published. Required fields are marked *