0

I am studying the BBC news App for Apple watch. Here is how the glance looks like:

enter image description here

However, when I look into the storyboard for the Glance controller I can see only these options available for the top part of the glance:

enter image description here

The one that looks more similar to the BBC news app is the following option:

enter image description here

I thought that they could be changing the size of the group on the left and adding an image representing a red bar. However, when I tried to replicate this, I wasn't able to resize the group.

How do you think they achieved this?

mm24
  • 9,280
  • 12
  • 75
  • 170

2 Answers2

1

I think the only way to pull this off is to choose the first arrangement. Within the single group, you would:

  • Add a new group with a fixed width and a relative height of 1. Set its background color to red.
  • After the new group, add a multi-line label (lines = 0) so that the title flows across multiple lines.

Update: Just tried this technique in Xcode, and with a few spacing tweaks, I was able to achieve this:

enter image description here

Mike Swanson
  • 3,337
  • 1
  • 17
  • 15
  • Good answer. For the left side bar, I would use the **Separator**. What do you think, Mike? – Lucas Huang May 26 '15 at 16:26
  • `WKInterfaceSeparator` is horizontal only, so it wouldn't work in this situation. The common technique is to use a group with a background color. You can also set the corner radius to "round" the edges, though it doesn't appear that the BBC app does this. – Mike Swanson May 26 '15 at 17:00
  • You are right. But, I can put it to vertical. I just tried it. – Lucas Huang May 26 '15 at 19:00
  • But **separator** might be too small in some cases? You're welcome. lol – Lucas Huang May 27 '15 at 05:54
0

First of all, I think you should understand how we layout the watch app compared to the normal iPhone app. The layout in watch app is just like Android. You have to specify orientation of UI elements instead of dragging around freely. For example, the default Glance has two groups and their orientation is horizontal.

For your question, I think you can achieve it using the default template. You can drag the Separator to be the left side bar and change it to the red color. Then, drag the Label to fit the rest the space.

Lucas Huang
  • 3,998
  • 3
  • 20
  • 29