0

In highschool we're learning how to build User Interfaces with Xcode. As homework we have to pick an existing App and rebuild it only using default controls and the Main.storyboard (no code and custom classes allowed).

I picked Twitter's UI:

enter image description here

As you can see there is a TabBarController on top with three TabBar Items (TOP, MENTIONS, VERIFIED).

According to other threads you can't change the position of a UITabBarController without using Custom Classes or some other code.

What would be an easy work around? I was thinking of using normal buttons instead of UITabBarItems but then I would have to implement code for buttons to react on user interaction.

AamirR
  • 11,672
  • 4
  • 59
  • 73
Lara
  • 84
  • 1
  • 7
  • 30

2 Answers2

0

Twitter is a tricky UI because they do a lot of custom things in it. However, a couple of comments here: 1) The buttons you reference (TOP, MENTIONS, VERIFIED) is not a TabBarController. The bottom bar with the 3 icons (ENGAGE, UNDERSTAND, POSTS) is a TabBarController and that wouldn't be too hard to create.

2) The buttons (TOP, MENTIONS, VERIFIED) could be created using a UISegmentControl. However, they have customized the look of it. By default, it will look something like this:

Apple Docs for SegmentControl

Here is a stackoverflow discussion on changing the look of it:

How to display only bottom border for selected item in UISegmentedControl?

3) The other items on that view could be created using a UITableView but those are custom cells that you'd have to build which sounds like would violate the rules of your assignment.

There are lots of examples out there on how to create and use custom uitableview cells such as this one:

Making Apple Pie

Hope this helps you!!!

Update#2: As you can't use code, creating a tableview is out. You could just drop some controls in the storyboard to minic those tableview cells. For excample, drop UIImageViews (with pictures), UILabels (with text), the icons for reply, retweet, favorite would be UIImageViews as well. The gray lines can be created by dropping a UIView with a height of 1 and background color of grey.

Shawn
  • 406
  • 4
  • 12
0

The 3 UITabBarItem (Engage, Understand, Posts) are on the very bottom. On the top are just 3 regular buttons in a view.

So what you thought will definitely work, use just normal buttons inside a SuperView, you do not need code for this, just use following constraints:

  • SuperView (Top, Leading, Trailing, Height(40-50) constraints)
  • Button-1 (Leading to superview, Width to superview (multiplier 0.33))
  • Button-3 (Trailing to superview, Width to superview (multiplier 0.33))

  • Button-2 (Leading to button-1, trailing to button-3)

  • 2 constraints for all 3 buttons:

    • Top to superview
    • Bottom to superview
AamirR
  • 11,672
  • 4
  • 59
  • 73