Scrolling UILabel like a marquee in a subview

问题

I have a UILabel in the main view with text - "Very Very long text". The proper width to this would be 142, but i've shortened it to 55.

Basically I want to implement a marquee type scroll, so I wrote code to add it onto a subview and animate it within the bounds of that view.

CODE --

    CGRect tempLblFrame = _lblLongText.frame;
    UIView *lblView = [[UIView alloc] initWithFrame:tempLblFrame];

    //Add label to UIView at 0,0 wrt to new UIView
    tempLblFrame.origin.x = 0;
    tempLblFrame.origin.y = 0;

    [_lblLongText setFrame:tempLblFrame];
    [_lblLongText removeFromSuperview];
    [lblView addSubview:_lblLongText];

    //SetClipToBounds so that if label moves out of bounds of its superview, it wont be displayed
    [lblView setClipsToBounds:YES];
    [lblView setBackgroundColor:[UIColor cyanColor]];
    [self.view addSubview:lblView];

After this I get this output on the simulator -->

The problem occurs when i try the Animation with this code -

    tempLblFrame.origin.x = -_lblLongText.intrinsicContentSize.width;        
    [UIView animateWithDuration:2.0 delay:1.0 options:UIViewAnimationOptionCurveLinear
                     animations:^{
                         [_lblLongText setFrame:tempLblFrame];
                     }
                     completion:^(BOOL finished) {
                         NSLog(@"completed");
                     }];

I was hoping I would see the entire "Very Very long text", rather only "Very..." scrolls from left to right.

To solve this I added one line of code --

    //Add label to UIView at 0,0 wrt to new UIView
    tempLblFrame.origin.x = 0;
    tempLblFrame.origin.y = 0;

    tempLblFrame.size.width = _lblLongText.intrinsicContentSize.width; //THIS LINE WAS ADDED

    [_lblLongText setFrame:tempLblFrame];
    [_lblLongText removeFromSuperview];
    [lblView addSubview:_lblLongText];

I thought the full text will be set inside the newly added UIView and it would scroll properly. But running in the simulator gave me this --

And again, only "Very..." was scrolling from left to right.

What am I doing wrong? Please help!!

EDIT

Apparently the culprit was AutoLayout.

I have no clue why, but once I unchecked "Use Autolayout" for the view in the XIB, everything started working as expected. Setting tempLblFrame.origin.x = -_lblLongText.intrinsicContentSize.width; was working properly and so was the scroll.

Any explanation on this!!?

回答1:

This question is possibly Duplicate of.

Although there is nice code snippet written by Charles Powell for MarqueeLabel,

also take a look at This link.

I hope this will help you and will save your time by giving a desired output.

回答2:

Make the UILabel the width (or longer) of the text and the UIView the scroll area you want to see. Then set the UIView's clipToBounds to YES (which you are doing). Then when you animate left to right you will only see the the text the width of the UIView, since it is cutting any extra subviews. Just make sure you scroll the entire length of the UILabel.

Right now you are setting the view and label's height and width to the same thing. This is why you are getting clipped text, not a clipped label.

回答3:

You add In your view scrollview and add this label in your scroll view .Use this code

 scroll.contentSize =CGSizeMake(100 *[clubArray count],20);
NSString  *bname;
bname=@"";
for(int i = 0; i < [clubArray count];  i++)
{
    bname = [NSString stringWithFormat:@"%@  %@ ,",bname,[[clubArray objectAtIndex:i] objectForKey:@"bottle_name"]];
    [bname retain];

}
UILabel *lbl1 = [[UILabel alloc] init];
[lbl1 setFrame:CGRectMake(0,5,[clubArray count]*100,20)];
lbl1.backgroundColor=[UIColor clearColor];
lbl1.textColor=[UIColor whiteColor];
lbl1.userInteractionEnabled=YES;    
[scroll addSubview:lbl1];
lbl1.text= bname;

This is implemented code.Thanks

回答4:

Apparently the culprit was AutoLayout.

I have no clue why, but once I unchecked "Use Autolayout" for the view in the XIB, everything started working as expected. Setting tempLblFrame.origin.x = -_lblLongText.intrinsicContentSize.width; was working properly and so was the scroll.

Still, a better explanation for this would surely help!!

EDIT: Solution with AutoLayout -

    //Make UIView for Label to sit in
    CGRect tempLblFrame = _lblLongText.frame;
    UIView *lblView = [[UIView alloc] initWithFrame:tempLblFrame];

    //#CHANGE 1 Removing all constraints 
    [_lblLongText removeConstraints:_lblLongText.constraints]; 

    //Add label to UIView at 0,0 wrt to new UIView
    tempLblFrame.origin.x = 0;
    tempLblFrame.origin.y = 0;
    //Set Full length of Label so that complete text shows (else only truncated text will scroll)
    tempLblFrame.size.width = _lblLongText.intrinsicContentSize.width;

    //#CHANGE 2 setting fresh constraints using the frame which was manually set 
    [_lblLongText setTranslatesAutoresizingMaskIntoConstraints :YES];
    [_lblLongText setFrame:tempLblFrame];
    [_lblLongText removeFromSuperview];
    [lblView addSubview:_lblLongText];

来源：https://stackoverflow.com/questions/17296870/scrolling-uilabel-like-a-marquee-in-a-subview

标签

ios

objective-c

cocoa-touch

uilabel