美文网首页demo111学无止境
iOS仿滴滴打车广告弹窗

iOS仿滴滴打车广告弹窗

作者: iOS谢先森 | 来源:发表于2017-08-15 14:08 被阅读249次

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

效果图

实现的思路:自定义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

相关文章

  • iOS仿滴滴打车广告弹窗

    今天分享一下仿滴滴打车的广告弹窗,效果图如下: 实现的思路:自定义ADAlertView(继承自UIView),然...

  • 滴滴打车风靡柳州,出租车客户被抢

    去年五月,打车软件滴滴公司正式上线滴滴快车功能,主打“便宜”。柳州人民也慢慢地通过广告宣传接触了滴滴打车,现在,滴...

  • Android 仿iOS弹窗

    仿iOS弹窗 一、先上效果图 二、GitHub地址 GitHub地址 https://github.com/MNX...

  • SwiftUI iOS 提示组件之 仿Xcode图标图片提示框A

    实战需求 SwiftUI iOS 提示组件之 仿Xcode图标图片提示框Alert Toast弹窗(教程含源码) ...

  • 3个步骤彻底清除电脑广告弹窗!!

    你是否也被电脑广告、弹窗烦到炸裂? 腾讯QQ弹窗!搜狗输入法弹窗!搜狐新闻弹窗!网页广告弹窗!360资讯弹窗!!一...

  • 滴滴打车

    听说滴滴又出事了,8月24日下午,浙江温州乐清市女孩赵某在虹桥镇乘坐滴滴顺风车前往永嘉县,在向朋友发送“救命”讯息...

  • 滴滴打车

    最近滴滴又出事了,还在整改期,又有一个年轻貌美的女孩子,就这么香消玉殒。并且在全国几个滴滴司机群里都有辱骂这个受害...

  • 滴滴打车~

    好多滴滴女乘客遇害之前,自己都已经发现苗头不对了,但是大多时候她只是发微信把情况告诉了远在天边的朋友亲属求救,远水...

  • 滴滴打车

    我叫了一辆滴滴,带着几分慌张,在心里演习着。 "哔哔哔",车子来了,居然多了一个人! "哎,老哥,迁就一下吧。" ...

  • 滴滴打车

    在这个洋溢节日的气氛中,我和老爸一起去东郊,在车站寒风瑟瑟中等待800路的到来,等呀,等呀! 听同事讲滴滴打车方便...

网友评论

  • b4081cdf1398:如果把UIScrollView改成UICollectionView是不是会更好?
    iOS谢先森:@读尘 可以 ,这个广告弹框的实现思路跟轮播图类似,scrollView,tableView,collectionView都可以实现

本文标题:iOS仿滴滴打车广告弹窗

本文链接:https://www.haomeiwen.com/subject/onnmrxtx.html