What is the best way to implement this scrolling UI in Objective-C?

Question

I'm trying to implement an interface view shown in the image below.

UI Image

This UI is made up of three parts, the blue labels, the arrow labels, and the gray label.

In this UI, there are following requirements to satisfy.

• The label view(the blue one) and the arrow label are shown in turn
• The blue labels can change its positions each other (like UITableView)
• List item can be deleted
• By tapping the gray label, a new blue label appear and append after the last blue label that is already shown in.

At present I think it is good to implement this UI by UITableView and custom table cell. But I'm not sure how to implement it, especially displaying arrow labels between the blue labels, appending new blue label before the gray one.

Is there a good way to implement these feature easily in UITableView? Or, is there another way to do this, like using UIScrollView?

Your thoughts and help will be hugely appreciated.

Answer 1

If you are building for iOS9 you can use UIStackView, very simple to use and fits your requirement.You will have to use UIStackview with a scrollview. For sample you can use the code in the below link.

https://gist.github.com/twostraws/a02d4cc09fc7bc16859c

Answer 2

Don't use UIScrollView. As the number of blue cells gets bigger, you'll use more and more memory. Proper use UITableView ensures that your memory use stays fixed (memory from UI) as the length of the array of cells grows.

You have two fundamental options here:

Multiple sections, or a single section.

With multiple sections, each UITableViewCell is a blue cell. Use UITableViewSectionFooter for the arrow cell. This guarantees that there will always be on arrow cell per blue cell.

With a single section, the number of cells = #ofbluecells * 2. Then, use indexPath.row % 2 to decide whether or not to dequeue a blue cell or arrow cell.

Regardless of which approach you go with, you should use a UITableViewFooterView for the 'add new cell' behavior.

In either approach, you can delete cells by updating the data model (most likely an array) then calling [tableView beginUpdates]; [tableViewDeleteRowsAtIndexPaths:]; [tableView endUpdates];

To insert a new blue cell, same as delete except you add to your array.

In either approach, you don't have to manage a separate array of arrow cells. If tapping on an arrow cell does nothing, I would personally go the route of 1 section per blue cell.