Search code examples
iosiphonexcodeswiftuitoolbar

xcode 7.3 swift What UI views make up the structure of this display?

I'm trying to figure out the structure of this iphone app display, but for the life of me I can't work out a convincing structure. I think my understanding of Nav Bars, Views, Toolbars, maybe embedded toolbars, icons, etc is just too weak to figure this layout out.

enter image description here

I've read endless Apple doc, and net tutorials, but none of them address things as pretty (and complex?) as this layout, simple as it looks.

I've spent hours trying to build a stack view for the top bar, with two left/right icon buttons, with an embedded toolbar (+ 3 bar button items) in the middle. But with zero success -- I posted a separate question on why my embedded toolbar with 3 buttons disappears in the stack view with distribution=Fill Proportionately.

Could anyone give me a convincing layout structure that I can try? And how about the dark blue color, with a sunken border around the 3 center buttons, and a darker background for the selected button? (Is the selected button a separate image from it's unselected state?)

And then the second collection -- is it a view with rounded corners behind the controls, or is it something else? How might I space out the left/right arrows with the long date string button in the middle (not with a horizontal stack view, I'm guessing). And the bottom buttons -- could that be a segmented control?

If you could identify the building blocks for me, that would help. Or maybe a tutorial or doc somewhere, or a code project example somewhere that I could study? (Wouldn't it be wonderful if someone had a sample app with this stuff that I could just load and learn from... :-) PS. I've also looked around the net for sample open source apps, and found probably 50, but none that I could recognize as being on target, or in swift.

Many thanks in advance.

Solution

  • The top area is probably a UINavigationBar, and the three things in it are its left bar button item, its title view, and its right bar button item.

    The bottom part is a UITableView in Grouped style. It has two sections. The first section consists of one cell in which is laid out the whole four-subview structure. Then there's another section whose header title is "today" and each of the things after that is a cell.

    The two "make a choice" rectangles, both at the top and in the first cell, are UISegmentedControls.