問題描述
在情節提要中為“平鋪”創建更大的反面視圖 (Creating a larger flip-side view for 'tile' in storyboard)
I currently have a Container View Controller which is home to a button. When this is pressed, I want the view to flip and grow, similar to iTunes on the iPad.
Main View Controller Layout:
Flipping the Container:
When the flip button is pressed, I intend to use this code (Inside the container view's View Controller) to flip the container:
FrontVC *cb = [[FrontVC alloc]initWithFrame:CGRectMake(0, 0, 92, 65)];
FlipVC *cf = [[FlipVC alloc]initWithFrame:CGRectMake(0, 0, 92, 65)];
[UIView transitionWithView:self.view
duration:1
options:UIViewAnimationOptionTransitionFlipFromLeft
animations:^{
// Remove last view
for (UIView *subview in self.view.subviews) {
[subview removeFromSuperview];
}
[self.view addSubview:(displayingPrimary ? cb: cf)];
}
completion:^(BOOL finished) {
if (finished) {
displayingPrimary = !displayingPrimary;
}
}];
This works well if the two views are the same size, and I can lay out the views using code. FrontVC and FlipVC are sub-classes of UIView.
I was thinking about doing something like this to move the view to the centre of the screen, but I'm stuck from there. Hey, I don't even know if this would work! Is there a better way to do this?
if (!displayingPrimary) {
self.view.center = CGPointMake(320.0f, 480.0f);
cb.center = CGPointMake(320.0f, 480.0f);
}
else
{
self.view.center = CGPointMake(59, 324);
}
What I Am Aiming For:
Ideally, I would like to be able to design the flip view in storyboard, and have the 'tile' grow, similar to iTunes:
Whereas in my example I would like it to look like this:
How would I be able to design this in storyboard? If I try to make a view controller, I am unable to resize it to the size that I would like the flip size view controller to be.
參考解法
方法 1:
The FlipView project is quite polished and looks exactly as the iTunes flip does. I used two imageViews for the demo project. The actual flip code is as follows:
- (IBAction)flip
{
UIView *fromView, *toView;
CGPoint pt;
CGSize size;
CGFloat sense;
if(showingView == a) {
fromView = a;
toView = b;
pt = BORIGIN;
size = BRECT.size;
sense = -1;
} else {
fromView = b;
toView = a;
pt = AORIGIN;
size = ARECT.size;
sense = 1;
}
[UIView animateWithDuration:TIME/2 animations:^
{
CATransform3D t = CATransform3DIdentity;
t.m34 = M34;
t = CATransform3DRotate(t, M_PI_2*sense, 0, 1, 0);
containerView.layer.transform = t;
containerView.frame = CRECT; // midpoint
NSLog(@"Container MID Frame %@", NSStringFromCGRect(containerView.frame));
}
completion:^(BOOL isFinished)
{
toView.layer.transform = CATransform3DMakeRotation(M_PI*sense, 0, 1, 0);
[UIView animateWithDuration:TIME/2 animations:^
{
[fromView removeFromSuperview];
[containerView addSubview:toView];
CATransform3D t = CATransform3DIdentity;
t.m34 = M34;
t = CATransform3DRotate(t, M_PI*sense, 0, 1, 0);
containerView.layer.transform = t; //finish the flip
containerView.frame = (CGRect){ pt, size};
} completion:^(BOOL isFinished)
{
NSLog(@"Container Frame %@", NSStringFromCGRect(containerView.frame));
NSLog(@"A Frame %@", NSStringFromCGRect(b.frame));
NSLog(@"B Frame %@", NSStringFromCGRect(b.frame));
toView.layer.transform = CATransform3DIdentity;
containerView.layer.transform = CATransform3DIdentity;
showingView = showingView == a ? b : a;
}];
}];
}
http://dl.dropbox.com/u/60414145/FlipView.zip
EDIT: One way to work around the resizing a real view with real controls in it might have is to take a snapshot of that view, use the snapshot while zooming/flipping, and in the final completion block switch out the image for the real view. That is:
- create a UIImage of your current small view when the user taps the image
- create a UIImage of the final view, rendered into a context as its natural size
- use the two images in the container view, for the animation
- in the final completion block, remove your imageView from view and put the second view now in self.view subviews
方法 2:
I did a rough code (not at all perfect) on this (hope it is what you are looking for). Have a look into it. I created a baseView and two flip views, after the first flip, I increased the frame size of baseView and added the second flip view on it.I am not an expert of Story Board, so I havent used it here.
FlipTest
-anoop
(by Alex Godbehere、David H、anoop4real)