How to adjust a UILabel position in a custom UIView on touchesBegan?

Question

In an iPhone app few "letter tiles" can be dragged around:

app screenshot

Dragging and displaying larger image and fonts are implemented in Tile.m:

- (void)touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event
{
    [_normal setHidden:YES];
    [_dragged setHidden:NO];
    [_letter setFont:[UIFont systemFontOfSize:60]];
    [_value setFont:[UIFont systemFontOfSize:20]];

    [self.superview bringSubviewToFront:self];
}

- (void) touchesMoved:(NSSet*)touches withEvent:(UIEvent*)event
{
    UITouch *touch = [touches anyObject];
    CGPoint location = [touch locationInView:self];
    CGPoint previous = [touch previousLocationInView:self];
    self.frame = CGRectOffset(self.frame,
                              (location.x - previous.x),
                              (location.y - previous.y));
}

- (void)touchesEnded:(NSSet*)touches withEvent:(UIEvent*)event
{
    [_normal setHidden:NO];
    [_dragged setHidden:YES];
    [_letter setFont:[UIFont systemFontOfSize:36]];
    [_value setFont:[UIFont systemFontOfSize:16]];
}

This works quite well except for the smaller UILabel in the bottom right corner (which should display an integer number - the "value" of a letter).

I have tried enabling Autolayout and adding constraints... and also disabling Autolayout in Tile.xib (here fullscreen):

Xcode screenshot

but couldn't find a satisfactory solution yet (the adjusted position doesn't have to be scientifically exact).

As an iOS programming newbie I am not sure of the options I have, can anybody please advise how to fix it best?

Like aligning the baseline of the value label to the bottom line of the letter label + ensure they just touch each other (and not intersect) - is that possible?

TO make sure that the rect does not intersect use the method `CGRectIntersectRect` and whenever this condition satisfies move the frame of intersecting rect to some point accordingly. — Himanshu Joshi, Mar 06 '14 at 06:34

score 1 · Accepted Answer · edited May 23 '17 at 12:28

1

It seems to me that you are dealing with 2 very known states in your system, why don't you simply define the 2 static positional states you need the labels to be within your UIView, and set their positions statically within your code also!

You're already setting the UILabels' sizes, why not their positions also!

It also looks as if you are SCALING the whole red rect as well, you might try this methodology as well:

Scale UIView and all its children

If you scale the whole UIView, then relative positioning and sizing your keep it looking aligned as it was when it was small.

edited May 23 '17 at 12:28

Community

1
1

answered Mar 05 '14 at 20:55

trumpetlicks

7,033
2
19
33

+1 thanks. I didn't know there are "positional states" in Interface Builder (I only know "states" in Apache/Adobe Flex). Do you have a doc or tutorial? Or a screenshot of what you mean? – Alexander Farber Mar 05 '14 at 21:02
@AlexanderFarber - You already have the states as setup with your touchesBegan, touchesMoved, and touchesEnded. When a touchesBegan comes in, simply set the position of your `_letter` and `_value` respectfully, essentially in the same way you are setting self.frame position in touchesMoved, only you will increase size, move letter and number position within touchesBegan and touchesEnded. – trumpetlicks Mar 05 '14 at 21:05
@AlexanderFarber - Personally, I know it will work in source code, Im not sure there is a way to do what I am talking about in IB. – trumpetlicks Mar 05 '14 at 22:37

How to adjust a UILabel position in a custom UIView on touchesBegan?

1 Answers1