首页广告弹框

现在软件的更新也是日新月异,最近发现APP打开后都会在根视图上面弹出一个小广告,点击进去跳入新的界面,点击取消主界面讲可以响应图片 11.gif

简介

为了达到广告推广的效果,让用户 100 % 看到广告,有些 app
在进入的时候会提示一个全屏的弹框广告,例如下面这种:

图片 2

图片

前段时间由于公司项目需要加入广告弹框,上网找了一圈没有找到什么比较好的,最后用qiankai同学这个弹框改的这个。
项目里的代码真的很垃圾:

//

//

咱们可以创建一个测试的demo工程.一.创建一个UITabBarController然后root两个视图控制器,并把UITabBarController控制器作为window的根视图

实现

  1. 定义布局文件:

    主要有三个图片元素,广告图,竖线,关闭✘号,按照位置显示出来就好

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/rl_dialog_ad"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    
        <ImageView
            android:id="@+id/iv_alert_ad_content"
            android:layout_width="260dp"
            android:layout_height="300dp"
            android:layout_centerInParent="true"
            android:scaleType="fitXY"
            android:src="@mipmap/ic_alert_content"/>
    
        <ImageView
            android:id="@+id/iv_alert_ad_line"
            android:layout_width="0.5dp"
            android:layout_height="20dp"
            android:layout_above="@id/iv_alert_ad_content"
            android:layout_alignRight="@id/iv_alert_ad_content"
            android:layout_marginRight="20dp"
            android:scaleType="fitXY"
            android:src="@mipmap/ic_alert_line"/>
    
        <ImageView
            android:id="@+id/iv_alert_ad_close"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_above="@id/iv_alert_ad_line"
            android:layout_alignRight="@id/iv_alert_ad_content"
            android:layout_marginRight="10dp"
            android:scaleType="fitXY"
            android:src="@mipmap/ic_alert_close"/>
    
    </RelativeLayout>
    
  2. 显示

    显示的方式是显示一个全局的 AlertDialog ,这个里面也是有一些坑的

    private void showAlertAdDialg(final AdvertisementResponse.Advertisement advertisement) {
            final Dialog dialog = new Dialog(this, R.style.fullscreen_dialog);
            View dialogView = LayoutInflater.from(this).inflate(R.layout.dialog_alert_ad, null, false);
            View ivClose = dialogView.findViewById(R.id.iv_alert_ad_close);
            ImageView ivOpenAd = (ImageView) dialogView.findViewById(R.id.iv_alert_ad_content);
            if (!TextUtils.isEmpty(advertisement.getPictureUrl())) {
                Glide.with(this)
                        .load(advertisement.getPictureUrl())
                        .into(ivOpenAd);
            }
            dialogView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    dialog.dismiss();
                }
            });
            ivClose.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    dialog.dismiss();
                }
            });
            ivOpenAd.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Intent intent = new Intent(mContext, ComWebActivity.class);
                    intent.putExtra(INTENT_KEY_HTML_TITLE, advertisement.getDetailTitle());
                    intent.putExtra(INTENT_KEY_HTML_URL, advertisement.getDetailUrl());
                    MainActivity.this.startActivity(intent);
                }
            });
            dialog.setContentView(dialogView);
            dialog.getWindow().setGravity(Gravity.CENTER);
            dialog.setCanceledOnTouchOutside(true);
            dialog.setCancelable(true);
            WindowManager.LayoutParams lp = dialog.getWindow().getAttributes();
            lp.width = WindowManager.LayoutParams.MATCH_PARENT;
            lp.height = WindowManager.LayoutParams.MATCH_PARENT;
            dialog.getWindow().setAttributes(lp);
            dialog.show();
        }
    

    上面这段方法主要做了几件事情:

    1. 创建了一个全屏背景半透明的 Dialog,这个全屏主要是通过样式和设置
      Dialog 的 WindowAttribute实现的

      样式:

      <style name="fullscreen_dialog">
              <item name="android:windowFullscreen">true</item>
              <item name="android:windowNoTitle">true</item>
              <item name="android:windowIsFloating">true</item><!--是否浮现在activity之上-->
              <item name="android:windowIsTranslucent">false</item><!--透明-->
              <item name="android:windowBackground">@android:color/transparent</item><!--背景半透明-->
              <item name="android:backgroundDimEnabled">true</item><!--模糊-->
      </style>
      

      设置为全屏大小:

      WindowManager.LayoutParams lp = dialog.getWindow().getAttributes();
      lp.width = WindowManager.LayoutParams.MATCH_PARENT;
      lp.height = WindowManager.LayoutParams.MATCH_PARENT;
      dialog.getWindow().setAttributes(lp);
      
    2. 加载布局,加载图片到 ImageView ,并设置到 Dialog 内

    3. 显示 Dialog

判断广告时间:

图片 3

屏幕快照 2016-10-21 下午3.00.31.png

//  ViewController.m

//  ViewController.m

在AppDelegate.m里

判断下载广告图片和时候弹出广告:

图片 4

屏幕快照 2016-10-21 下午3.02.30.png

//  tankuang

//  弹框

 self.window = [[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds]; self.window.rootViewController = [[MainTabBarVC alloc]init]; [self.window makeKeyAndVisible];
获取广告数据:

图片 5

屏幕快照 2016-10-21 下午3.04.27.png

啊。。。看着真的不爽,这TM什么东西!也怪自己当时水平有限!
Swift是什么?一门精致,简单,而不缺少思想的语言!
能把代码写成这个样子,真是很惭愧啊,然后就各种学习,什么函数式编程,面向接口编程,烧脑体操,函数式Swift。
突然有一天,哈哈,我看到了这篇关于转场的文章,突然脑子里就想到了,广告弹框,这可好像可以做广告弹框哦!但是当时并没有做,只是把代码下载下来看了一遍,然后就放在那里了。

//

//

在MainTabBarVC.m里

几个转场库

1、https://github.com/applidium/ADTransitionController
2、https://github.com/DianQK/TransitionTreasury
3、https://github.com/ColinEberhardt/VCTransitionsLibrary
最近,公司没有什么事情,上午学习函数式Swift,下午就上github
trending搜罗一些库。前天突然有看到了那段恶心的代码,随后又想起了那篇转场的文章,那就写一个吧!这样的库应该大家用得还是比较频繁的,毕竟广告能赚钱!
就拿着那个转场的demo改了一下,有个初步模样,然后新加了几种效果(其实就是在原来的基础上修改而已),今天下午差不多搞好了,但是没有做cocoapods
和Carthage,准备之后搞!

//  Created by lanouhn on 16/7/13.

//  Created by lanou on 16/7/13.

 FirstViewController *firstVC = [FirstViewController new]; SecondViewController *secondVC= [SecondViewController new]; firstVC.title = @"首页"; secondVC.title = @"好友"; [self addChildViewController:firstVC]; [self addChildViewController:secondVC];

效果

图片 6

bottomToTop.gif

图片 7

overlayHorizontal.gif

//  Copyright

//  Copyright © 2016年 lanou. All rights reserved.

二.我们可以自定义View或者控制器来显示这个弹出的界面,这里我们选择使用自定义View不带XIB,在这个View中自定义两个控件,一个是ImageView,另一个是Button

代码

图片 8

屏幕快照 2016-10-21 下午3.48.36.png

是不是相比较之前优雅很多,废话也不多说,也没有什么特别的难点,就是用人家的demo修改出来的。直接说说遇到的坑!

2016年 lanouhn. All rights reserved.

//

图片 92.png三.在自定义View中进行控件的封装,这个我们要重写两个方法1.重写- (instancetype)initWithFrame方法,此方法创建并添加子控件2.重写- layoutSubviews方法,此方法中设置子控件的frame,在方法尾部要调用[super layoutSubviews]代码如下:

遇到的坑

因为广告弹框,其实有点像系统自带的alert,用转场做的,只是重写了转场动画而已。当转场的controller的view上什么也没有加的时候,之前的动画完全没有问题的,但是当加上需要显示内容的一个bannerView后,view的效果就被banner给挡住了,因为这段代码

override public func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = UIColor.white
        bannerView.set(images: images)
        bannerView.handleBack = selectedHandel
        bannerView.showPageControl = isShowPageControl
        view.addSubview(bannerView)
    }

是在controller,他是先于这个代理的

UIViewControllerAnimatedTransitioning

所以当bannerView加上去之后就会挡住在上面那个代理里面对view做的动画,试了几种,调透明,延时动画什么的,效果都不太好!又想起来之前做过的collection的cell移动,其实就是长按后,将按住的cell生成一张图片,障眼法而已。似乎用到这里也是可以的哦!果断把代码贴过来

func getSnap(targetView: UIView) -> UIImageView {
        UIGraphicsBeginImageContextWithOptions(targetView.bounds.size, false, 0.0)
        targetView.layer.render(in: UIGraphicsGetCurrentContext()!)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return UIImageView(image: image)
    }

记住要把view调透明,依然是在上面那个代理里面做,里面有fromView和toView,这两个是相对的,看看代码,相信不难理解!
然后就是说上面截图的方法其实是在关闭广告的时候用到的,因为刚打开的时候,图片是传进来的,可以直接拿到!就是这么多,没有多少难得!
但我发现

//

//UITextField: 
怎么获取UITextField的文本,怎么设置输入框键盘类型,设置占位字符串,密文输入

- (instancetype)initWithFrame:frame { if (self = [super initWithFrame:frame]) { UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"1"]]; self.imageView = imageView; [self addSubview:self.imageView]; self.imageView.userInteractionEnabled = YES; UITapGestureRecognizer * ImageViewTap=[[UITapGestureRecognizer alloc]initWithTarget:self action:@selector]; ImageViewTap.numberOfTouchesRequired = 1; //手指数 ImageViewTap.numberOfTapsRequired = 1; //tap次数 self.imageView.contentMode = UIViewContentModeScaleToFill; [self.imageView addGestureRecognizer:ImageViewTap]; UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; [button setBackgroundImage:[UIImage imageNamed:@"delete"] forState:UIControlStateNormal]; self.button = button; [button addTarget:self action:@selector(buttonClick) forControlEvents:UIControlEventTouchDown]; [self addSubview:self.self.button]; } return self;}- layoutSubviews{ self.imageView.frame = CGRectMake(100, 100, 200, 200); self.button.frame = CGRectMake(180, 350, 50, 50); [super layoutSubviews];}

bouds frame的一个区别

之前我只知道bounds的origin总是为CGPoint.zero,frame是相对他的,还有横屏的时候,需要改变bouds,但是做第二个动画的时候,我发现,你去改变bounds.size的时候,他是往中间变化的,frame.size是靠x=0和y=0的方向变化的

// uiTextFiled:怎么获取UITextFiled的文本,怎么设置输入框键盘类型,设置占位字符串,密文输入

#import “ViewController.h”

注:这里我们给ImageView添加手势,Button这里咱们也要addTarget添加事件,一会儿会实现点击事件的触发.

项目地址

ADController
我有什么说错的,或者没说明白的请留意,我会尽快改正

#import “ViewController.h”

 

四.现在需要考虑如何添加这个自定义View,也就是在什么时机添加这个自定义View.这里我们选择AppDelegate.m中的在应用程序载入后执行的- application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions方法

@interface ViewController ()

@interface ViewController ()

 MyView *view = [[MyView alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width,[UIScreen mainScreen].bounds.size.height)]; [self.window addSubview:view];

@end

 

五.下面实现以下自定义View中的ImageView和Button所触发的事件方法1.点击ImageView,这里我们触发手势事件,所执行的事件就是跳转到相应界面,这里我们的场景就是自定义View里的ImageView手势事件实现控制器的modal首先拿到主窗口控制器,用根控制器进行modal需要的modal的控制器

@implementation ViewController

@end

 ThirdViewController *third = [[ThirdViewController alloc]init]; UIViewController *VC = [UIApplication sharedApplication].keyWindow.rootViewController; [VC presentViewController:third animated:YES completion:nil]; [self removeFromSuperview];

– (void)viewDidLoad {

 

注:这里在跳转界面后我们要移除视图2.点击Button时这里我们只需要移除视图就可以了,当然我这里为了好看也给了个动画效果

[super viewDidLoad];

@implementation ViewController

-  buttonClick { [UIView animateWithDuration:0.5 delay:0.3 options:UIViewAnimationOptionCurveEaseOut animations:^{ self.transform = CGAffineTransformMakeScale; self.alpha = 0.0; } completion:^(BOOL finished) { [self removeFromSuperview]; }];}

}

 

六.在ThirdViewController.m我们简单使用一下WKWebView加载一个网页

– (IBAction)alertAction:(id)sender {

– (void)viewDidLoad {

#import "ThirdViewController.h"#import <WebKit/WebKit.h>@interface ThirdViewController ()<WKNavigationDelegate>@end@implementation ThirdViewController- viewDidLoad { [super viewDidLoad]; //创建NSURL NSURL *url = [NSURL URLWithString:@"http://www.baidu.com"]; //创建NSURLRequest NSURLRequest *request = [NSURLRequest requestWithURL:url]; //创建WKWebView对象,添加到界面(storyboard没有控件) WKWebView *webView = [[WKWebView alloc]initWithFrame:self.view.frame]; [self.view addSubview:webView]; //设置代理 webView.navigationDelegate = self; //加载请求 [webView loadRequest:request];}@end

// 弹框:UIAlertController/UIAlertview

    [super viewDidLoad];

七.设置一下自定义View的背景颜色在MyView.m类中的- (instancetype)initWithFrame:frame方法中是现实

//Title 大标题

}

 self.backgroundColor = [[UIColor blackColor]; self.alpha = 0.5;

//message 小标题

– (IBAction)alertAction:(id)sender {

图片 103.jpeg

//preferredStyle 弹框样式

    //弹框:UIAlertController

这里写完后运行程序我们可以看到View中的ImageView和Button上的图片都被覆盖了颜色,这样与预期效果不符,那么我们另辟蹊径,使用self.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.5];方法就可以完美解决这个问题了

UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@”你有病” message:@”你可以去吃药了” preferredStyle:(UIAlertControllerStyleAlert)];

    //Title:大标题

图片 114.jpeg

UIAlertAction *okAction = [UIAlertAction actionWithTitle:@”确定” style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {

    //message:小标题

百度网盘地址: 密码: ie2j

//        按钮按下要做的事情

    //preferredStyle:弹框样式

NSLog(@”淮南师范学院”);

    UIAlertController *alertController = [UIAlertController
alertControllerWithTitle:@”你有病” message:@”你可以去吃药了”
preferredStyle:UIAlertControllerStyleAlert];

}];

    UIAlertAction *okAction = [UIAlertAction actionWithTitle:@”确定”
style:UIAlertActionStyleDestructive handler:^(UIAlertAction * _Nonnull
action) {

UIAlertAction *canceAction = [UIAlertAction actionWithTitle:@”取消” style:(UIAlertActionStyleCancel) handler:nil];

        //按钮按下要做的事情

//给弹框添加行为

        NSLog(@”淮南师范学院”);

[alertController addAction:okAction];

    }];

[alertController addAction:canceAction];

    //取消

[self presentViewController:alertController animated:YES completion:nil];

    UIAlertAction *cancelAction = [UIAlertAction
actionWithTitle:@”取消” style:(UIAlertActionStyleCancel) handler:nil];

}

    //给弹框添加行为

– (void)didReceiveMemoryWarning {

    [alertController addAction:okAction];

[super didReceiveMemoryWarning];

    [alertController addAction:cancelAction];

// Dispose of any resources that can be recreated.

   

}

    [self presentViewController:alertController animated:YES
completion:nil];

@end

}

 

 

– (void)didReceiveMemoryWarning {

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

 

@end

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注