How to setup a constraint to a tvOS focused element

Question

I have a UICollectionView in my tvOS app that has a image and a caption text. I've setup a constraint to pin the caption text just under the image.

When the cell is focused and the images grows, the text does not move and stays over the image. Is there a way to set a constraint that takes in account the focused image size?

I am not understand what you say. You want focus move to image, at that time the label come bottom of image or over the image. — Sankalap Yaduraj Singh, Feb 15 '16 at 07:52
I want to specify the a vertical spacing between the label and the image when it is focused. Currently I'm able to specify this spacing only when the image is not focused — Jan, Feb 15 '16 at 08:17

score 8 · Answer 1 · answered Feb 25 '16 at 21:23

You can use a UIImageView property focusedFrameGuide for that. It returns a UILayoutGuide object, which unfortunately can't be used in Interface Builder, but you can create constraints with it in code. Note that this constraint makes sense only when the view is focused, so you have to set its active property according to the self.focused property.

First create the constraint on view initialization:

self.focusedSpacingConstraint = NSLayoutConstraint(item: imageView.focusedFrameGuide, attribute: .BottomMargin, relatedBy: .Equal, toItem: label, attribute: .Top, multiplier: 1, constant: 0)
//add it to the view and set active to false

Then activate either this constraint or the default one depending on the focus:

override func didUpdateFocusInContext(context: UIFocusUpdateContext, withAnimationCoordinator coordinator: UIFocusAnimationCoordinator) {
    coordinator.addCoordinatedAnimations({
  self.focusedSpacingConstraint.active = self.focused
  self.spacingConstraint.active = !self.focused

  //set label's transform and animate layout changes
}

You can also use the focusedFrameGuide to set label's height (as a percentage of image's height).

The advantage of this approach is that you don't have to change the (hardcoded) constant whenever the image size changes.

score 3 · Answer 2 · answered Feb 15 '16 at 10:25

I ended up setting a @IBOutlet to my spacing constraint and I update it in the didUpdateFocusInContext method. To add some effect, I also transform the label.

In my collection cell:

override func didUpdateFocusInContext(context: UIFocusUpdateContext, withAnimationCoordinator coordinator: UIFocusAnimationCoordinator) {
    coordinator.addCoordinatedAnimations({
        if self.focused {
            self.spacingConstraint.constant = 30
            UIView.animateWithDuration(0.3) {
                self.label.transform = CGAffineTransformMakeScale(1.15, 1.15)
                self.layoutIfNeeded()

            }
        }
        else {
            self.spacingConstraint.constant = 0
            UIView.animateWithDuration(0.3) {
                self.label.transform = CGAffineTransformMakeScale(1, 1)
                self.layoutIfNeeded()

            }
        }
        }, completion: nil)
}

Sankalap Yaduraj Singh · Answer 3 · 2016-02-15T10:14:29.033

Use this code, I hope it help you. This code write into the custom cell class.

override func didUpdateFocusInContext(context: UIFocusUpdateContext, withAnimationCoordinator coordinator: UIFocusAnimationCoordinator) {
if (self.focused) {
   self.custom_ImageView.adjustsImageWhenAncestorFocused = true
   self.custom_LabelView1.frame = CGRectMake(0, 279, 548, 29)
}
else {
   self.custom_ImageView.adjustsImageWhenAncestorFocused = false
   self.custom_LabelView1.frame = CGRectMake(0, 259, 548, 29)
}
}

How to setup a constraint to a tvOS focused element

3 Answers3