I have a UICollectionView which contains 12-13 UICollectionViewCells. I can easily focus on the UICollectionViewCells and everything works. There is a UIButton outside the UICollectionView. If I am on the first cell or the second cell and I swipe up then I can easily focus on the UIButton. When I am on the third cell then I am not able to move the focus to the UIButton. Any ideas what is going on?
5 Answers
You should use a UIFocusGuide that encompasses the UIButton you want to focus. Make the UIFocusGuide as wide as the collectionView and tall enough to cover the button. Make the preferredFocusView the button.
UIFocusGuide *topButtonFocusGuide = [[UIFocusGuide alloc] init];
topButtonFocusGuide.preferredFocusedView = myButton;
[self.view addLayoutGuide:topButtonFocusGuide];
[self.view addConstraints:@[
[topButtonFocusGuide.topAnchor constraintEqualToAnchor:myButton.topAnchor],
[topButtonFocusGuide.bottomAnchor constraintEqualToAnchor:myCollectionView.topAnchor],
[topButtonFocusGuide.leadingAnchor constraintEqualToAnchor:myCollectionView.leadingAnchor],
[topButtonFocusGuide.widthAnchor constraintEqualToAnchor:myCollectionView.widthAnchor],
]];
-
Thanks Jess - this was driving me nuts. Note that if you have a problem using this then it could be because one of your anchor points is embedded in another view. I had a collection view inside a scroll view and using the collection view bottom as my top anchor point didn't work. Changing this to the scroll view bottom worked.– ReefwingCommented Jan 22, 2016 at 4:33
-
Hi Jess, I have another issue. If I have button at right instead of left and if I have only one row collection view I can't able make collection view focusable. Any solution for this ?– IamDevCommented Jun 28, 2016 at 7:40
-
@Vijay_07 that's probably worth opening a new stack question. Not sure off the bat. Commented Jul 1, 2016 at 20:07
Jess Bowers solution is almost there but Xcode says UIButton
s doesn't have topAnchor
property and the solution given by Jess doesn't work for me.
For me, the solution was to create a huge view with the same width as the UICollectionView
on top of it. See picture.
The code will be this:
UIFocusGuide *topButtonFocusGuide = [[UIFocusGuide alloc] init];
topButtonFocusGuide.preferredFocusedView = myButton;
[self.view addLayoutGuide:topButtonFocusGuide];
[self.view addConstraints:@[
[topButtonFocusGuide.topAnchor constraintEqualToAnchor:transparentView.topAnchor],
[topButtonFocusGuide.bottomAnchor constraintEqualToAnchor:transparentView.bottomAnchor],
[topButtonFocusGuide.leadingAnchor constraintEqualToAnchor:transparentView.leadingAnchor],
[topButtonFocusGuide.widthAnchor constraintEqualToAnchor:transparentView.widthAnchor],
]];
-
UIButton is a subclass of UIControl which is a subclass of UIView. developer.apple.com/library/tvos/documentation/UIKit/Reference/… Also look at the Apple sample which uses topAnchor on a button. developer.apple.com/library/prerelease/tvos/samplecode/… Commented Nov 23, 2015 at 13:40
-
Ok but Xcode says buttons have no topAnchor and unfortunately Jess' solution doesn't work for me.– DuckCommented Nov 23, 2015 at 14:13
-
Something else is wrong. I just typed in a name of my button, typed .top and hit escape and the autocomplete showed me topAnchor. Current Xcode. Also, Jess' solution doesn't work for me either. I examine the guide's frame in a breakpoint and it looks right. But it has no effect. Commented Nov 23, 2015 at 14:34
-
-
yeah that's strange. I've used this technique many times. UIButton definitely has a topAnchor. Possibly there is something specific and different about the setup. Might be helpful to post more code in the question and i'd be happy to give feedback. Certain assumptions i made may not be true for your case. UIFocusGuide and layout guide are meant to eliminate the need for dummy views like you've got there. But they do work. Commented Dec 16, 2015 at 19:18
Swift 3.0
Jess Bower's answer was huge help to me & saved a lot of time.
Here's what worked with Swift 3 & tvOS 10. One now has to use preferredFocusEnvironments
. In ViewDidLoad()
self.view.addLayoutGuide(focusGuide)
self.focusGuide.topAnchor.constraint(equalTo: self.buttonAbove.topAnchor).isActive = true
self.focusGuide.bottomAnchor.constraint(equalTo: self.CollectionView.topAnchor).isActive = true
self.focusGuide.leadingAnchor.constraint(equalTo: self.CollectionView.leadingAnchor).isActive = true
self.focusGuide.widthAnchor.constraint(equalTo: self.CollectionView.widthAnchor).isActive = true
self.focusGuide.preferredFocusEnvironments = [self.buttonAbove]
One of the issues I was facing involved using a UINavigationController for the landing pages to push detail ViewControllers onto the stack when an item is selected.
I put a breakpoint inside the UIButton's canBecomeFocused override, and using this quick little extension asked the button why it is not focusable.
extension UIView {
func whyNotFucusable () {
print(self.perform(Selector(("_whyIsThisViewNotFocusable"))).takeUnretainedValue())
}
}
I kept receiving the following error trying to debug....
ISSUE: This view may not be focusable because other views or focus guides are occluding it.
First of all I looked up in the dictionary what the heck occluding meant....
verb, formal, technical
- stop, close up, or obstruct (an opening, orifice, or passage).
The question now was what view is obstructing my UIButton???
I quickly unwrapped the UI in the visual debugger, and there was a clear view on top of my UIButtons. Inspecting the view I found out that Unlike iOS, where the nagivationBar has a default system background color, tvOS's implementation has a clear default color. I realized that I didn't hide the nav bar, and in return it was obstructing my buttons.
I did the following, and it fixed all my issues :)
navController.setNavigationBarHidden(true, animated: false)
Hope this helps!!!
Use :
override weak var preferredFocusedView: UIView? { get { return segmentedControl } }