iOS仿滴滴打车广告弹窗

今天分享一下仿滴滴打车的广告弹窗，效果图如下：

效果图

实现的思路：自定义ADAlertView（继承自UIView），然后添加scrollView，scrollView上布局五个自定义的小view（ADItemView）来支持滑动，然后再添加pageControl和关闭按钮。

代码下载链接已经在底部贴出来，可以去github下载。

下面主要就代码中的一些细节做一些描述。 

广告弹窗视图ADAlertView初始化方法

+(ADAlertView *)showInView:(UIView *)view theDelegate:(id)delegate theADInfo: (NSArray *)dataList placeHolderImage: (NSString *)placeHolderStr;

需要注意一点，广告框是加载到keyWindow上的

[[[UIApplication sharedApplication].windows objectAtIndex:0] addSubview:self];

广告点击事件是通过添加点击手势来实现如下方法

-(void)tapContentImgView:(UITapGestureRecognizer *)gesture

然后通过代理方法实现跳转url广告链接。

-(void)clickAlertViewAtIndex:(NSInteger)index;

ADItemView为广告图片控件，对其layer层操作实现圆角效果

ADModel为数据源模型，通过点击不同的index来调用数据源对象，实现跳转。

滑动scrollView的时候更改index，调用pageControl的代理方法。

#pragma mark - UIScrollViewDelegate  滑动scrollView 切换pageContrl

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{

NSInteger index        = scrollView.contentOffset.x/ScreenWidth;

pageControl.currentPage = index;

}

在pageControl代理方法中实现scrollView分页滑动效果。

/// 当pageControl改变的时候，判断scrollView偏移

-(void)pageValueChange:(UIPageControl*)page{

[UIView animateWithDuration:.35 animations:^{

_scrollView.contentOffset = CGPointMake(page.currentPage*ScreenWidth, 0);

}];

}

点击移除广告弹框是通过手势调用如下方法

-(void)removeFromCurrentView:(UIGestureRecognizer *)gesture；

移除弹窗方法如下

/// 移除广告

- (void)removeSelfFromSuperview

{

[UIView animateWithDuration:0.2 animations:^{

self.alpha = 0;

} completion:^(BOOL finished) {

[self removeFromSuperview];

}];

}

为了更好的用户提样，在弹处广告框的时候添加一个透明度过渡动画。

/// 透明度动画

- (void)showAlertAnimation

{

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"opacity"];

animation.fromValue        = [NSNumber numberWithFloat:0];

animation.toValue          = [NSNumber numberWithFloat:1];

animation.duration          = 0.5;

animation.timingFunction    = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

[self.layer addAnimation:animation forKey:@"opacity"];

}

github下载链接：https://github.com/IT-iOS-xie/didiAdAlertView.git