Search code examples
swifttvos

Diagonal focussing in tvOS using UIFocusGuide

I have 4 UIButtons in my view:

enter image description here

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
Solution

  • 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:

    enter image description here

    // [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!