如何添加滑入式视图效果? [英] How to add a slide-in view effect?

问题描述

如何从底视图效果创建此简单的幻灯片?

How can I create this simple slide-in from the bottom view effect?

*

我有一个动作表方法，我想创建这种视图控制器效果，当我点击动作表按钮之一时，该视图将从屏幕底部滑入，我不需要您解释对我来说，如何添加日期选择器，仅当滑入视图和背景滑动时视图变暗，而关闭时则变淡

I have an action sheet method and i want to create this view controller effect that when i tap on one of the action sheet buttons i will have this view sliding in from the bottom of the screen, i dont need for you to explain to me how to add the date picker, only the effect of the view that sliding in and the background is darker when it slides and get liter when its dismissed

请帮助我做到这一点:))

Please help me do that :))

这是我要在其中执行此操作表方法(而不是模式)的方法:

this is my action sheet method where i want to perform this(instead of the modal):

- (void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex {

    if (buttonIndex == 0) {
        NSLog(@"first button was pressed");
    } else if (buttonIndex == 1) {
        MyViewController *myViewController = [[MyViewController alloc]initWithNibName:@"MyViewController" bundle:nil];
        UINavigationController *navigationController = [[UINavigationController alloc]initWithRootViewController:myViewController];
        [self.navigationController presentViewController:navigationController animated:YES completion:nil];
    }
}

推荐答案

这是一种自动布局方法:

Here's an autolayout approach:

1. 创建一个具有深色透明背景的封面视图"，并对其进行约束以填充窗口.将其插入所有其他视图之上.
2. 创建一个包含日期选择器的视图，并将其添加到封面视图上方的窗口中，并在窗口底部添加一个顶部约束.
3. 在日期选择器视图上调用layoutIfNeeded()以触发自动布局.现在，该视图位于屏幕下方"，用户尚不可见.
4. 删除顶部约束，并在窗口底部添加底部约束.
5. 在动画块内再次调用layoutIfNeeded()，视图将从屏幕底部向上滑动到其最终位置.您还可以淡入淡出动画块中的封面视图.

1. Create a "cover view" with a dark transparent background and constrain it to fill the window. Insert it above all other views.
2. Create the view containing the date picker and add it to the window above the cover view with a top constraint to the bottom of the window.
3. Call layoutIfNeeded() on the date picker view to trigger auto layout. Now the view is positioned "below" the screen and not yet visible to the user.
4. Remove the top constraint and add a bottom constraint to the bottom of the window.
5. Call layoutIfNeeded() again inside an animation block and the view will slide up from the bottom of the screen to its final position. You can also fade in the cover view within the animation block.

这是一个简单的例子.我没有测试过这个确切的代码，但是我已经做了很多次这样的事情，我希望您可以从这种方法中学到一些东西！请注意，这假设MyActionSheet具有有效的intrinsicContentSize.

Here's a quick example. I haven't tested this exact code, but I've done this kind of thing many times and you should be able to get something from this approach I hope! Please note this assumes the MyActionSheet has a valid intrinsicContentSize.

// Create cover view
coverView = [UIView new];
coverView.backgroundColor = [UIColor colorWithWhite:0.0 alpha:0.4];
coverView.alpha = 0.0;

// Add to window
[window addSubview:coverView];
[window bringSubviewToFront:coverView];

// Pin to edges
[window addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[coverView]|" options:kNilOptions metrics:nil views:NSDictionaryOfVariableBindings(coverView)]];
[window addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[coverView]|" options:kNilOptions metrics:nil views:NSDictionaryOfVariableBindings(coverView)]];

// Create action sheet
MyActionSheet *sheet = [MyActionSheet new];
[window insertSubview:sheet aboveSubview:coverView];

// Add horizontal constraints
[window addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[sheet]|" options:kNilOptions metrics:nil views:NSDictionaryOfVariableBindings(sheet)]];

// Pin to starting position
NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:sheet attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:window attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0.0];
[window addConstraint:topConstraint];

// Layout to start
[sheet layoutIfNeeded];

// Pin to final position
[window removeConstraint:topConstraint];
NSLayoutConstraint *bottomConstraint = [NSLayoutConstraint constraintWithItem:sheet attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:window attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0.0];
[window addConstraint:bottomConstraint];

// Animate to final position
[UIView animateWithDuration:0.3 animations:^{
    coverView.alpha = 1.0;
    [sheet layoutIfNeeded];
}];

如果由于某种原因不想使用自动布局，则可以手动调整视图的框架，前提是可以计算操作表的高度.

If you don't want to use auto layout for some reason, you can manually adjust the frames of the views provided you can calculate the height of the action sheet.

这篇关于如何添加滑入式视图效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！