CODEWITHSUNDEEP
iosuitableviewuser-interfaceswift
Isuru
Isuru

Reputation: 31283

Laying out subviews in a UITableViewCell dynamically

This is the most complicated UI related problem I've come across yet. I've been trying to find a solution for literally weeks but no avail. Let em explain.

In this app I'm working on, I need to display a certain list. It's actually a schedule. Here's how it should look like,

enter image description here

The fields circled by red circles don't change. To explain what change means I have to show you this.

enter image description here

Its a set of filters which the user can show/hide certain fields and the ones that are circled in the first image are static ones. They can't be toggled on and off.

Now the problem arises with the ones that can be toggled. Here's what it looks like if you turn off the Show Actions flag.

enter image description here

A new label with a blue background replaces the bottom one you can see in the first image.

Here's another one where you disable Show Time option and the time labels are gone (yes it affects only for some. Its expected).

enter image description here

If this filter list were an option list, it would have been easy. Just create a custom cell for each option and you're good to go. But unfortunately the user is able to toggle multiple filters! For example the user can turn off both Show Actions and Show Time and it'd look like the last image but the bottom label would have the blue label in the third image.

To top it all off, the cells' height is dynamic. In iOS 8 creating self resizing cells are easy enough from the IB when you could just add auto layout constraints and done. But it seems to me that creating these cells from the IB isn't an available option to me. Simply because there are way too many filter combinations a user can make. So the cell's subviews need to adjust to it.

My question is how can I create a dynamic cell like that? My best guess is through code, right? I haven't written my UI in code before so I tried creating a test project to familiarize myself with it. But the problems I'm facing is setting fixed frame sizes makes the dynamic nature obsolete. And how can I move a view to fill up a removed view's space (Last image. Time labels are gone so the name and the id labels move to the left to fill that space).

I know this question is a little too broad. I'm not asking for a straight answer either. I'd really appreciate some pointers, or even a better suggestion on how to approach this because I'm truly at the rock bottom on this issue.

Thank you.

Upvotes: 0

Views: 176

Answers (1)

rdelmar
rdelmar

Reputation: 104082

It's hard to give you any precise help since your question is so broad. First, I would recommend watching the 3 videos on Auto Layout from the WWDC 2012 (sessions 202, 228, and 232).

To answer your one example, how to move a view to replace a view that's removed. You would need to make two left edge constraints from the view with the text (Kund Alof...). One with a constant of 0 to the time label with a priority of 1000 (that's the default), and another to the left edge of the cell, also with a constant of 0, but with a lower priority, say 900. As long as the time label is present, the constraint to it will determine the position of the text label, but when it's removed, the lower priority constraint to the left edge will take over and move the label over to the left edge.

Upvotes: 2

Related Questions