How to crop an UITextView

Question

I would like to have two UITextViews, one in the background and one in the front. Is there any possibility to crop 50% of the one in the foreground so that you can see 50% of the one in the background? I do not want to re-size the UITextView in the front, but merely to hide half of it.

I think an illustration is in place as this might sound rather confusing:

I thought I do this with two view controllers, one hidden, one visible:

// Visible and Hidden View 

VisibleView *visibleController = [[VisibleView alloc] initWithNibName:@"VisibleView" bundle:nil];
self.visibleView = visibleController;
[visibleController release];

HiddenView *hiddenController = [[HiddenView alloc] initWithNibName:@"HiddenView" bundle:nil];
self.hiddenView = hiddenController;
[hiddenController release];

[self.view insertSubview:visibleView.view atIndex:0]; // show visibleView

Ideally, I would like to animate the 'hiding' of the visibleView Controller, so that the hiddenViewController unveils in the background (like a sliding door - sliding in from the right). This is what I've come up so far, but I can't think of any transformation / cropping technique that will do:

[UIView beginAnimations:@"Hide VisibleView" context:nil];
[UIView setAnimationDuration:0.5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];   
[UIView setAnimationTransition: ??
                       forView: self.view
                         cache: YES];
[visibleView.view removeFromSuperview];                 
[self.view insertSubview:hiddenView.view atIndex:0];

[UIView commitAnimations];

I guess this is quite basic, but I'm still a beginner and would be very happy over any suggestions of how to accomplish this.

Answer 1

I usually use to mask view with other views. In your case I'll do something like this:

• both of textviews has its own superview that act as a mask
• animate the frame of each single mask to reveal/hide the children view

Answer 2

I just created a new View-Based Application project and put this code in the viewDidLoad of the viewController to get the screen shown. It shows the theory of what you need to do. The main points to note are the 'clipsToBounds = true' and the negative x-position of textFrameRight.

- (void)viewDidLoad
{
    [super viewDidLoad];

    NSString* text = @"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
    UIFont* font = [UIFont fontWithName:@"Helvetica" size:20.0f];

    CGRect textFrameLeft = CGRectMake(0, 0, 320, 480);

    UITextView* textLeft = [[UITextView alloc] initWithFrame:textFrameLeft];
    textLeft.text = text;
    textLeft.font = font;
    textLeft.textColor = [UIColor blackColor];

    CGRect textFrameRight = textFrameLeft;
    textFrameRight.origin.x -= textFrameRight.size.width/2;

    UITextView* textRight = [[UITextView alloc] initWithFrame:textFrameRight];
    textRight.text = text;
    textRight.font = font;
    textRight.textColor = [UIColor redColor];

    CGRect leftFrame = self.view.frame;
    leftFrame.size.width /= 2;

    UIView* leftView = [[UIView alloc] initWithFrame:leftFrame];
    leftView.clipsToBounds = true;

    CGRect rightFrame = self.view.frame;
    rightFrame.size.width -= leftFrame.size.width;
    rightFrame.origin.x += leftFrame.size.width;

    UIView* rightView = [[UIView alloc] initWithFrame:rightFrame];
    rightView.clipsToBounds = true;

    [self.view addSubview:leftView];
    [leftView addSubview:textLeft];

    [self.view addSubview:rightView];
    [rightView addSubview:textRight];

    [leftView release];
    [textLeft release];
    [rightView release];
    [textRight release];
}

==================================

Realising the OP wanted this to animate; here is a revised version of the above method which does such. There are more hard-coded values in this version; but it serves as an example.

- (void)viewDidLoad
{
    [super viewDidLoad];

    NSString* text = @"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
    UIFont* font = [UIFont fontWithName:@"Helvetica" size:20.0f];

    CGRect leftFrame = CGRectMake(0, 0, 0, 480);
    CGRect textFrameLeft = CGRectMake(0, 0, 0, 480);

    CGRect rightFrame = CGRectMake(0, 0, 320, 480);
    CGRect textFrameRight = CGRectMake(0, 0, 320, 480);

    UITextView* textLeft = [[UITextView alloc] initWithFrame:textFrameLeft];
    textLeft.text = text;
    textLeft.font = font;
    textLeft.textColor = [UIColor redColor];

    UITextView* textRight = [[UITextView alloc] initWithFrame:textFrameRight];
    textRight.text = text;
    textRight.font = font;
    textRight.textColor = [UIColor blackColor];

    UIView* leftView = [[UIView alloc] initWithFrame:leftFrame];
    leftView.clipsToBounds = true;

    UIView* rightView = [[UIView alloc] initWithFrame:rightFrame];
    rightView.clipsToBounds = true;

    [self.view addSubview:leftView];
    [leftView addSubview:textLeft];

    [self.view addSubview:rightView];
    [rightView addSubview:textRight];

    [UIView beginAnimations:@"Hide VisibleView" context:nil];
    [UIView setAnimationDuration:3.0];
    rightView.frame = CGRectMake(320, 0, 0, 480);
    textRight.frame = CGRectMake(-320, 0, 320, 480);
    leftView.frame = CGRectMake(0, 0, 320, 480);
    textLeft.frame = CGRectMake(0, 0, 320, 480);
    [UIView commitAnimations];

    [leftView release];
    [textLeft release];
    [rightView release];
    [textRight release];
}