Make UILabel Focusable and Custom (tvOS)

Question

I am trying to implement a 6-line description shortcut, and I want this to be focused. Ideally, this would mean extending the UILabel class to create a custom component. I tried this by implementing canBecomeFocused and didUpdateFocusInContext , but my UILabel does not seem to focus.

I also tried replacing UILabel with UIButton, but the buttons are not really optimized for this kind of thing. In addition, this would mean that I would need to change buttonType to focus from user to regular. And buttonType seems ready.

In fact, I would like to have the exact text label implemented by Apple in the Apple TV Movies app. To describe the movie, they have a text label that displays several lines of text and more. When focusing, it looks like a button (shadows around) and changes the background color. When clicked, this opens a modal window with the entire description of the film.

Any suggestions? Or maybe someone has already implemented this custom control for tvOS? Or the event is better - there is a component from Apple that does this, and I'm missing something.

PS: A quick fix is ​​welcome :)

Answer 1

Ok, answering my question :)

Thus, it seems that some of the types are “tuned” to tvOS out of the box, and others should be instructed about this.

Finally, I ended up using a UITextView that has a selectable property, but if not one of these focus views by default. TextView editing must be disabled to make it look like UILabel . In addition, there is currently an error that prevents the use of the selectable property in Interface Builder, but works with code.

Naturally, canBecomeFocused() and didUpdateFocusInContext were also implemented. You also need to pass a UIViewController because a UITextView cannot present a modal view controller. Bellow is what I created.

 class FocusableText: UITextView { var data: String? var parentView: UIViewController? override func awakeFromNib() { super.awakeFromNib() let tap = UITapGestureRecognizer(target: self, action: "tapped:") tap.allowedPressTypes = [NSNumber(integer: UIPressType.Select.rawValue)] self.addGestureRecognizer(tap) } func tapped(gesture: UITapGestureRecognizer) { let storyboard = UIStoryboard(name: "Main", bundle: nil) if let descriptionView = storyboard.instantiateViewControllerWithIdentifier("descriptionView") as? DescriptionViewController { if let view = parentView { if let show = show { descriptionView.descriptionText = self.data view.modalPresentationStyle = UIModalPresentationStyle.OverFullScreen view.presentViewController(descriptionView, animated: true, completion: nil) } } } } override func canBecomeFocused() -> Bool { return true } override func didUpdateFocusInContext(context: UIFocusUpdateContext, withAnimationCoordinator coordinator: UIFocusAnimationCoordinator) { if context.nextFocusedView == self { coordinator.addCoordinatedAnimations({ () -> Void in self.layer.backgroundColor = UIColor.blackColor().colorWithAlphaComponent(0.2).CGColor }, completion: nil) } else if context.previouslyFocusedView == self { coordinator.addCoordinatedAnimations({ () -> Void in self.layer.backgroundColor = UIColor.clearColor().CGColor }, completion: nil) } } } 

Answer 2

Use a collection view with only one cell and add a transform to the cell and change the background color of the cell in the doUpdateFocusInContext file when the focus moves to the cell.

 override func didUpdateFocusInContext(context: UIFocusUpdateContext, withAnimationCoordinator coordinator: UIFocusAnimationCoordinator) { coordinator.addCoordinatedAnimations({ if self.focused { self.transform = CGAffineTransformMakeScale(1.01, 1.01) self.backgroundColor = UIColor.whiteColor() self.textLabel.textColor = .blackColor() } else { self.transform = CGAffineTransformMakeScale(1, 1) self.backgroundColor = UIColor.clearColor() self.textLabel.textColor = .whiteColor() } }, completion: nil) } 

As an additional step, you can try to extract the color of the image if you use the image as a background, such as iTunes, and use it to view visual effects behind the cell.

You can also apply the transformation to the View collection in the video controller to make it look like it is in focus.

Answer 3

You can use the system button and set the background image in the storyboard to an image that contains the color you would like