Diagonal focussing in tvOS using UIFocusGuide

Question

I have 4 UIButtons in my view:

All four are UIButtons with two UIButtons on the left side and another two on the right side. Focus is going from the top button to the bottom button when I select down arrow. I want focus to navigate through all four buttons from top to bottom and again from bottom to top when I press the down arrow and up arrow. I also want to change the background color of the UIBUtton when it is highlighted(Currently white is coming by default).

I tried below code to navigate the focus but I couldn't get what I wanted.

let focusGuide = UIFocusGuide()
view.addLayoutGuide(focusGuide!) 
focusGuide!.rightAnchor.constraintEqualToAnchor(self.btnPlay.rightAnchor).active = true
focusGuide!.topAnchor.constraintEqualToAnchor(self.switchFirst.topAnchor).active = true
focusGuide!.widthAnchor.constraintEqualToAnchor(self.btnPlay.widthAnchor).active = true
focusGuide!.heightAnchor.constraintEqualToAnchor(self.switchFirst.heightAnchor).active = true
focusGuide!.preferredFocusedView = self.switchFirst

in viewdidLoad and

Below code in didUpdateFocusInContext

    guard let nextFocusedView = context.nextFocusedView else { return }

    switch nextFocusedView {
    case self.switchFirst:
        self.focusGuide!.preferredFocusedView = self.btnPlay

    case self.btnPlay:
        self.focusGuide!.preferredFocusedView = self.switchFirst

    case self.switchAudioType:
        self.focusGuide!.preferredFocusedView = self.btnAdd

    case self.btnAddToWishList:
        self.focusGuide!.preferredFocusedView = self.switchSecond

Without any type of label under the play button (explaining what the switch does), some users may expect that swiping down from play would move to add. Perhaps you should also let users swipe left or right to move between the play/add buttons and the switches? [User Experience](http://ux.stackexchange.com) may have some useful suggestion about the UI which could simplify how the Focus Engine would move between your controls. — , Jan 06 '16 at 08:54

score 3 · Accepted Answer · edited Jun 07 '16 at 11:58

Well one simple approach would be to use 4 different focus guides. I've included a very basic image of where they would be. Focus Guide Placement:

// [1] in viewDidLoad
let firstFocusGuide = UIFocusGuide()
view.addLayoutGuide(firstFocusGuide)
firstFocusGuide.leftAnchor.constraintEqualToAnchor(self.btnPlay.leftAnchor).active = true
firstFocusGuide.topAnchor.constraintEqualToAnchor(self.btnPlay.bottomAnchor).active = true
firstFocusGuide.heightAnchor.constraintEqualToAnchor(self.btnPlay.heightAnchor).active = true
firstFocusGuide.widthAnchor.constraintEqualToAnchor(self.switchFirst.widthAnchor).active = true

firstFocusGuide.preferredFocusedView = self.switchFirst

let secondFocusGuide = UIFocusGuide()
view.addLayoutGuide(secondFocusGuide)
secondFocusGuide.rightAnchor.constraintEqualToAnchor(self.switchFirst.rightAnchor).active = true
secondFocusGuide.bottomAnchor.constraintEqualToAnchor(self.switchFirst.topAnchor).active = true
secondFocusGuide.heightAnchor.constraintEqualToAnchor(self.switchFirst.heightAnchor).active = true
secondFocusGuide.widthAnchor.constraintEqualToAnchor(self.switchFirst.widthAnchor).active = true

secondFocusGuide.preferredFocusedView = self.btnPlay

let thirdFocusGuide = UIFocusGuide()
view.addLayoutGuide(thirdFocusGuide)
thirdFocusGuide.leftAnchor.constraintEqualToAnchor(self.btnAdd.leftAnchor).active = true
thirdFocusGuide.bottomAnchor.constraintEqualToAnchor(self.btnAdd.topAnchor).active = true
thirdFocusGuide.heightAnchor.constraintEqualToAnchor(self.btnAdd.heightAnchor).active = true
thirdFocusGuide.widthAnchor.constraintEqualToAnchor(self.switchSecond.widthAnchor).active = true

thirdFocusGuide.preferredFocusedView = self.switchSecond

let fourthFocusGuide = UIFocusGuide()
view.addLayoutGuide(fourthFocusGuide)
fourthFocusGuide.rightAnchor.constraintEqualToAnchor(self.switchSecond.rightAnchor).active = true
fourthFocusGuide.topAnchor.constraintEqualToAnchor(self.switchSecond.bottomAnchor).active = true
fourthFocusGuide.heightAnchor.constraintEqualToAnchor(self.switchSecond.heightAnchor).active = true
fourthFocusGuide.widthAnchor.constraintEqualToAnchor(self.switchSecond.widthAnchor).active = true

fourthFocusGuide.preferredFocusedView = self.btnAdd

Please keep in mind, this will only allow for the Up & Down movements between the four buttons. Not to mention it is a little tedious...Hope that helps!

if I change all UIbuttons type to Custom and add CGAffineTransformMakeScale to get System button like animation(as I am not able to change the white background of System button when focussed) again the order of Focus is altered. — Enmud, Jan 07 '16 at 11:06
Could you clarify what you mean by the "Focus is altered?" If you refer back to this [answer](http://stackoverflow.com/questions/34643387/in-swift-tvos-how-do-you-change-a-uibuttons-highlight-and-focus-colors/34644673#34644673) (not a shameless plug, expanding on it here haha) you can add the code: `var transform = CATransform3DIdentity` `if context.nextFocusedView == self {` `transform = CATransform3DScale(transform, sx, sy, sz)` `} else {` `transform = CATransform3DScale(transform, sx, sy, sz)` `}` In the first statement, you can change the background colors, text colors, etc — Yoseob Lee, Jan 07 '16 at 15:47
What an appalling pile of boilerplate to have to write just to move between controls. And no way to do it in a storyboard, so whenever you change your layout it involves heaps of code changes too. Come on, Apple, give us a break. — Echelon, Aug 24 '16 at 17:04

Diagonal focussing in tvOS using UIFocusGuide

1 Answers1

Linked