使用Interface Builder动态调整UILabel的大小并在其下方重新定位UIViews

Question

I have a UILabel that can contain any number of lines with a constrained width. I have no problem resizing a UILabel to fit the given text, however, I am implementing a 'View More...'/'View Less...' button, which will either increase or decrease the size of the UILabel . Based on this, any UIView's below this UILabel will be affected, and will need to be repositioned on their y-axis accordingly.

I am trying to use the built-in features within the XIB files and am having no luck at all.

Autosizing settings for the UILabel:

Autosizing for all UIViews below the UILabel:

Would anyone be able to point me in the right direction here? So essentially a scenario would be:

1. Screen loads
2. Label is populated with a certain amount of the available text with constrained width
3. UIView's below UILabel are repositioned as the UILabel has increased in height from the one displayed within XIB file
4. User presses 'View More' and the UILabel is resized to fit all the available text and increases in height and all UIView's are repositioned further down the screen accordingly
5. User presses 'View Less' and the UILabel decreases in height, hiding more text and UIView's move back up accordingly.

Thanks, hope this is explained clearly! I'm attempting to do as much in the XIB file as possible to reduce code, but all my UI elements are still accessible via IBOutlets if that proves to be the only solution (I hope not) .

Note: I am required to support iOS4.3 and above, so am unable to use iOS6 auto-layout functionality.

Answer 1

Autoresizing usually only enforces subview layout when you alter the size of the parent view. You can link most of it up through IBOutlets, however, when you tap the view more button you will have to tell your parent view to resize.

If you are willing to, you could use these extensions on UIView: http://glassofcocoa.com/blog/2012/11/14/uiview-extensions/ and you could do it manually quite easily and with an animations - would look something like:

//assume you have a BOOL value wether toggled or not called 'isViewingMore' and a stored startHeight
- (IBAction)didTapViewMore:(id)sender
{
    if (!_isViewingMore)
    {
        _isViewingMore = YES;
        CGSize constraint = CGSizeMake(_myLabel.frame.size.width, CGFLOAT_MAX);
        CGFloat lblheight = [@"" sizeWithFont:[UIFont fontWithName:@"HelveticaNeue-Bold" size:14.0f] constrainedToSize:constraint lineBreakMode:UILineBreakModeWordWrap].height;
        _myLabel.height = lblHeight;
    }
    else
    {
        _isViewingMore = NO;
        myView.height = startHeight
    }
    UIView *lastView = nil;
    for (UIView *view in self.view.subviews)
    {
        if ((id)view != (id)_myLabel)
        {
            if (lastView == nil)
            {
                view.top = _myLabel.bottom;
            }
            else
            {
                view.top = lastView.bottom;
            }
            lastView = view;
        }
    }
}

If you want to take the IB only route, you will need to put your subviews in one parent view and resize the parent view - this should tell the children to update their positioning/size.

Hope this helps.

Answer 2

I was unable to use the autosizing features in the end, so I resolved the issue by creating a UIView that acted as a container for all the subviews that were BELOW the UILabel that expanded.

I was then able to create a helper method that animated the frame adjusting according to the difference between the full size UILabel and the half sized label.

- (void)repositionMoveableViewContainerWithFrame:(CGRect)newFrame animated:(BOOL)animated
{
    CGRect newContainerPosition = self.moveableViewsContainer.frame;
    CGFloat difference = (newFrame.size.height - self.adjustableLabel.frame.size.height);
    newContainerPosition.origin.y = newContainerPosition.origin.y + difference;

    if (animated) {
        // Adjust frame animated
    } else {
        // Adjust frame without animation.
    }    
}