How should I approach building this 'my messages' mockup?

Question

I've created a concept for a messaging app that has sliding buttons to filter/scroll messages but I can't work out the best way to achieve this functionality, so after some guidance on the best way to approach this.

I've considered:

• Hacking a tab bar so it sits along the top (to switch between sent/received views etc)
• Using a horizontal scroll view (not sure how to jump between the views using a button)
• Using buttons to show and remove views programatically

I'm thinking of showing the individual message tiles using a collection view rather than a table view.

I'm also wondering if the design I've came up with is actually completely wrong as I can't seem to find any UI elements that behave in the way I expected (like the slider switches on my mock) and if I should completely rethink the layout. I'm open to that option if that's the case.

Answer 1

You're asking a lot of questions - your post should focus on one task. Review How to Ask

But, to give you a couple ideas...

Take a look at UISegmentedControl. Here's an example only slightly customized:

A little searching will show you how to do that, or how to customize it even more (making the round-ends appear more like your mockup).

Below those, you could put two table views in a horizontal UIStackView. When you select a "Received / Sent" segment, animate the stack view to show the corresponding table view.

When you select a segment on the lower control, filter your data and reload the table view.

What you want to do, though, is just get started on it.

• Begin with learning about UISegmentedControl and how to customize the appearance.
• Then work on putting two views side-by-side and learn about animating their positions.
• Then work on filtering your data source.

At each step along the way, if you run into a specific problem/question, come back and make a new post about that issue.