Question

So I have a UIView object (called gauge) on the right hand side that is a vertical bar. I have another label to the left of that bar that I want to display different text at different levels of the vertical bar (navLabel). I want this label to look like it is pinned to some distance (like 10 px) to my vertical bar. My label is left justified. I do this in the different methods where I need to update the label:

        CGSize labelSize = [navLabel.text sizeWithFont:[UIFont fontWithName:@"Arial" size:17.0]];
        CGRect newFrame = CGRectMake(gauge.frame.origin.x - 10 - labelSize.width, FIRST_HEIGHT, navLabel.frame.size.width, navLabel.frame.size.height);
        [UIView animateWithDuration:0.5 animations:^{
            self.navLabel.frame = newFrame;
        }];

In my different methods, I just change to the appropriate height (i.e. #define FIRST_HEIGHT).

My label ends up in the places I want, but the animation looks funny. For example, if my first label was @"label 1", and my second label was @"my much much much longer label", what happens is the label goes to the correct height, but because the labels are different sizes, you see the x-animation as well which makes it look funny. I only want animation in the y-direction. How can I accomplish that?

I also tried right justified, but then my label does not end up the correct distance to my gauge object. It ends up crossing it many times and I’m not sure why that happens.

Answer 1

It’s not clear that this is the behavior you want, but why not just set navLabel.frame to have the correct (new) x-coordinate as its origin before animating, then animate to the new frame that has the correct origin with the new height offset?

Or, set up two animations using these two frames, one that animates the y-direction first and the second that animates the x-direction to the new x-coordinate of the frame origin. Or vice versa.

// This version simply sets the correct origin (and the correct new width), then animates the y-direction
CGSize labelSize = [navLabel.text sizeWithFont:[UIFont fontWithName:@"Arial" size:17.0]];
self.navLabel.frame = CGRectMake(gauge.frame.origin.x-10-labelSize.width, self.navLabel.frame.origin.y,labelSize.width,navLabel.frame.size.height);
// now navLabel's frame has the correct new width (and origin x-coord)
CGRect newFrame = CGRectMake(self.navLabel.origin.x, FIRST_HEIGHT, navLabel.frame.size.width, navLabel.frame.size.height);
// now this animation will cause movement only in the y-direction 
[UIView animateWithDuration:0.5 animations:^{
        self.navLabel.frame = newFrame;
    }];

// This version animates the change in the frame in the x-direction first, then does what it did before
CGSize labelSize = [navLabel.text sizeWithFont:[UIFont fontWithName:@"Arial" size:17.0]];
CGRect newFrame = CGRectMake(gauge.frame.origin.x-10-labelSize.width, self.navLabel.frame.origin.y,labelSize.width,navLabel.frame.size.height);
// this animation will cause movement in the x-direction 
[UIView animateWithDuration:0.5 animations:^{
        self.navLabel.frame = newFrame;
    }];
// now navLabel's frame has the correct new width (and origin x-coord), so set the new y-coord
CGRect newFrame = CGRectMake(self.navLabel.origin.x, FIRST_HEIGHT, navLabel.frame.size.width, navLabel.frame.size.height);
// now this animation will cause movement only in the y-direction 
[UIView animateWithDuration:0.5 animations:^{
        self.navLabel.frame = newFrame;
    }];