上拉式弹窗的实现

Posted Mr_tao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了上拉式弹窗的实现相关的知识,希望对你有一定的参考价值。

  有些弹窗如果点击按钮的同时就出现一个弹窗就显得有的突兀,这次实现的效果是点击按钮的同时弹窗由下往上弹出来,添加了动画效果:

1、首先创建一个弹出的View类,

在HTAlertView.h中:

@property (nonatomic, strong) void (^backBtnActionBlock)();

@property (weak, nonatomic) IBOutlet UIView *myView;

@property(nonatomic,strong) UIControl *huiseControl;

- (void)showInView:(UIView *) view;

+ (instancetype)getSimpleView;

2、在HTAlertView.m中:

- (void)awakeFromNib{
    
    _huiseControl=[[UIControl alloc]initWithFrame:CGRectMake(0, 0, UIBounds.size.width, UIBounds.size.height)];
    _huiseControl.backgroundColor=RGBACOLOR(0, 0, 0, 0.4);
    [_huiseControl addTarget:self action:@selector(huiseControlClick) forControlEvents:UIControlEventTouchUpInside];
    _huiseControl.alpha=0;
    self.backgroundColor = [UIColor whiteColor];
}

+ (instancetype)getSimpleView{
    
    NSArray *objs = [[NSBundle mainBundle] loadNibNamed:@"HTAlertView" owner:nil options:nil];
    return [objs lastObject];
}
- (void)showInView:(UIView *) view {

    if (_huiseControl.superview==nil) {
        [view addSubview:_huiseControl];
    }
    [UIView animateWithDuration:0.2 animations:^{
        _huiseControl.alpha=1;
    }];
    CATransition *animation = [CATransition  animation];
    animation.delegate = self;
    animation.duration = 0.2f;
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    animation.type = kCATransitionPush;
    animation.subtype = kCATransitionFromTop;
    [self.layer addAnimation:animation forKey:@"animation1"];
    self.frame = CGRectMake(0,view.frame.size.height - 355, [UIScreen mainScreen].bounds.size.width, 355);
    [view addSubview:self];

}
- (void)hideInView {
    
    self.hidden = YES;
    CATransition *animation = [CATransition  animation];
    animation.delegate = self;
    animation.duration = 0.2f;
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    animation.type = kCATransitionPush;
    animation.subtype = kCATransitionFromBottom;
    [self.layer addAnimation:animation forKey:@"animtion2"];
    [UIView animateWithDuration:0.2 animations:^{
        _huiseControl.alpha=0;
    }completion:^(BOOL finished) {
        [self removeFromSuperview];
        [_huiseControl removeFromSuperview];
    }];
   
}
- (IBAction)btnClick:(UIButton *)sender {
    
    if (self.backBtnActionBlock) {
        
        self.backBtnActionBlock();
    }
}

-(void)huiseControlClick{
    
    [self hideInView];
}

其中

#define UIBounds [[UIScreen mainScreen] bounds] //window外框大小
#define RGBACOLOR(r,g,b,a) [UIColor colorWithRed:(r)/255.0f green:(g)/255.0f blue:(b)/255.0f alpha:a]

最后在viewController中要弹窗的button实现方法即可

- (void)popupButtonClick
{
    HTAlertView *alert = [HTAlertView getSimpleView];
    
    alert.backBtnActionBlock = ^(){
      
        NSLog(@"sdgvet4wfdscx");
    };
    
    [alert showInView:self.view];
}

 其中有代码块可以回调得到View中的按钮触发

以上是关于上拉式弹窗的实现的主要内容,如果未能解决你的问题,请参考以下文章

Kotlin 实现自定义下拉阴影弹窗的功能

Kotlin 实现在Activity中间弹出的List列表弹窗的功能

Kotlin 实现从底部自定义像Activity一样的全屏弹窗的功能

Kotlin 实现从底部弹出带手势拖拽的列表弹窗的功能

WPF 右下角弹窗的简单实现

Kotlin 实现在中间显示带标题内容输入框(带有hint名)和确认取消按钮的弹窗的功能