瞎扯

最近开始玩Swift试试macOS和iOS开发

我都快忘了我是啥专业的了

不想看我瞎扯可以直接跳到这

需求

为iOS应用模拟开屏广告的模式，为应用做一个开屏活动页，远端提供活动页图片；
图片经过3s倒计时后消失，用户可以点击“跳过”按钮提前结束；

源码

废话不多说，先直接上源码。
工程中只修改了ContentView.swift文件，所以这里只放ContentView.swift的代码：

//
//  ContentView.swift
//  iOSTest
//
//  Created by WMIII on 2021/3/21.
//import SwiftUI
import UIKit
import Combineclass TimeHelp {var canceller: AnyCancellable?//每次都新建一个计时器func start(receiveValue: @escaping (() -> Void)) {let timerPublisher = Timer.publish(every: 1, on: .main, in: .common).autoconnect()self.canceller = timerPublisher.sink { date inreceiveValue()}}//暂停销毁计时器func stop() {canceller?.cancel()canceller = nil}
}struct ContentView: View {@State private var remoteImage :UIImage? = nil@State var isPresented = falselet placeholderOne = UIImage(named: "Image1")// 这里的Image1为工程资源文件夹中的图片资源名，自己随便创建一个就行let timer = Timer.publish(every: 1, on: .main, in: .common)@State private var second = 5private let timeHelper = TimeHelp()@State private var end = truevar body: some View {ZStack{Button("跳过 \(second)"){self.isPresented = true}.position(x: UIScreen.main.bounds.width - 45, y: 10.0).onAppear(){guard self.end else {return}self.end = falseself.second = 3self.timeHelper.start {// print(second)if self.second > 1 {_ = self.second -= 1}else{//暂停self.end = trueself.timeHelper.stop()self.isPresented = true}}}.fullScreenCover(isPresented: $isPresented) {print("消失")} content: {DetailView(message: "I'm missing you")}Image(uiImage: self.remoteImage ?? placeholderOne!)// Image(uiImage: self.placeholderOne!).resizable().scaledToFit()// .aspectRatio(contentMode: .fill).onAppear(perform: fetchRemoteImg)}}func fetchRemoteImg(){guard let url = URL(string: "https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/iphone-12-pro-family-hero?wid=940&amp;hei=1112&amp;fmt=jpeg&amp;qlt=80&amp;.v=1604021663000") else {return}URLSession.shared.dataTask(with: url){(data, response, error) inif let img = UIImage(data: data!){self.remoteImage = img}else{print(error ?? "1")}}.resume()}
}struct DetailView: View{let message: Stringvar body: some View {VStack{Text(message)}}
}struct ContentView_Previews: PreviewProvider {static var previews: some View {ContentView()}
}

思路分析

由于我刚入门Swift，学艺不精，而且目前SwiftUI的教程比较少，所以有些地方的代码我是直接借（c）鉴（v）别处的，并且我也不能很好的理解。

页面跳转

从开屏广告页回到应用界面的思路，我找到两种：将广告界面贴在主界面上，然后删除；或者通过页面跳转。

虽说贴界面可以通过ZStack，但是我并不会在SwiftUI中删除页面，所以我选择页面跳转的方式。

目前各大博客平台能搜索到的SwiftUI界面跳转方法都是用NavigationView，NavigationLink等方式；虽说简单，但是这种方式不符合我的需求：通过以上方式跳转到的界面左上角会自带一个“返回”按钮，而且页面还会有页眉。

找来找去，发现一个通过fullScreenCover来进行页面跳转的方式。
参考：https://blog.csdn.net/u011146511/article/details/113763403

目前我并没有找到解释fullScreenCover的(中文)API文档；并且这名字听起来貌似也是将一个页面覆盖在原页面上…

// ContentView.swift
import SwiftUIstruct ContentView:View {@State var isPresented = falsevar body: some View{Button("present"){self.isPresented = true}.fullScreenCover(isPresented: $isPresented) {} content: {DetailView()}}
}struct DetailView: View{var body: some View {VStack{Text("It's a beautiful night.")}}
}struct ContentView_Previews: PreviewProvider {static var previews: some View {ContentView()}
}

点击时将isPresented置为true，然后fullScreenCover就将content中的DetailView展现在界面中。

计时

要求中需要3s的倒计时，所以需要用到SwiftUI中的Timer，所以我们把定时器添加到前面的代码中，同时将本地的一个测试图片显示到界面中，并做一些排版。

参考：https://www.jianshu.com/p/66b9ad87695c

// ContentView.swift
import SwiftUI
import UIKit
import Combineclass TimeHelp {var canceller: AnyCancellable?//每次都新建一个计时器func start(receiveValue: @escaping (() -> Void)) {let timerPublisher = Timer.publish(every: 1, on: .main, in: .common).autoconnect()self.canceller = timerPublisher.sink { date inreceiveValue()}}//暂停销毁计时器func stop() {canceller?.cancel()canceller = nil}
}struct ContentView: View {@State var isPresented = falselet placeholderOne = UIImage(named: "Image1")let timer = Timer.publish(every: 1, on: .main, in: .common)@State private var second = 5private let timeHelper = TimeHelp()@State private var end = truevar body: some View {ZStack{Button("跳过 \(second)"){self.isPresented = true}.position(x: UIScreen.main.bounds.width - 45, y: 10.0).onAppear(){guard self.end else {return}self.end = falseself.second = 3self.timeHelper.start {// print(second)if self.second > 1 {_ = self.second -= 1}else{//暂停self.end = trueself.timeHelper.stop()self.isPresented = true}}}.fullScreenCover(isPresented: $isPresented) {} content: {DetailView()}Image(uiImage:placeholderOne!).resizable().scaledToFit().onAppear(perform: fetchRemoteImg)}}
}struct DetailView: View{var body: some View {VStack{Text("It's a beautiful night.")}}
}struct ContentView_Previews: PreviewProvider {static var previews: some View {ContentView()}
}

远程图片获取

在ContentView中添加如下函数：

func fetchRemoteImg(){guard let url = URL(string: "https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/iphone-12-pro-family-hero?wid=940&amp;hei=1112&amp;fmt=jpeg&amp;qlt=80&amp;.v=1604021663000") else {return}// 这里的string为图片的地址，这里我用的是Apple官网商店的图片URLSession.shared.dataTask(with: url){(data, response, error) inif let img = UIImage(data: data!){self.remoteImage = img}else{print(error ?? "1")}}.resume()}

在ContentView中添加一行属性：

@State private var remoteImage :UIImage? = nil

同时将ContentView中的Image控件更改为：

// 如果未获取到远端图片，则显示本地默认图片
Image(uiImage: self.remoteImage ?? placeholderOne!).resizable().scaledToFit().onAppear(perform: fetchRemoteImg)

更改完成之后就可以实现需求功能了。

SwiftUI应用开屏广告界面项目（一）相关推荐

如何在我的应用启动界面实现「开屏广告」？
什么是开屏广告开屏广告是一种在应用启动时且在应用主界面显示之前需要被展示的广告.一般是5s展示时间,广告展示时间结束后自动进入应用,用户可以点击跳过按钮直接进入主界面. 开屏广告示例开屏广告的优势 ...
SwiftUI接入穿山甲开屏广告
研究了一下SwiftUI怎么接入穿山甲. 基于穿山甲sdk版本 4.7.0.8 例子地址 1. 首先要先注册一个账号,穿山甲地址在广告变现->流量->应用中创建一个应用并记录下应用ID. ...
android多类型启动广告,如何在我的应用启动界面实现「开屏广告」？
什么是开屏广告开屏广告是一种在应用启动时且在应用主界面显示之前需要被展示的广告.一般是5s展示时间,广告展示时间结束后自动进入应用,用户可以点击跳过按钮直接进入主界面. 开屏广告示例开屏广告的优势 ...
iOS开屏广告弹窗浮层解决方案
转载至:https://my.oschina.net/zhxx/blog/910836 开屏广告作为app启动时映入用户眼帘的第一界面,其重要性不言而喻. 因项目中开屏广告插件中业务越来越多,原来的的 ...
ubuntu 自动加载ko_开屏广告太烦人？用这个只有 2M 的 App，助你自动跳过 5 秒等待...
手机上的什么按钮会让你不假思索点击?除了抢红包,恐怕就是应用启动页的「跳过广告」了.「跳过广告」会这么容易被叉掉吗?显然,如果不够快准狠,连戳几次没反应不说,还有可能在戳偏后继续忍受广告跳转--掐指算 ...
android 开屏广告动画,Android 开屏广告
上一篇说了 ios 的开屏广告,这次把 Android 的也发下.逻辑,界面和 ios一致. 需求:广告不是一成不变,要随时更换图片,上下架时间,以及要启动就展示,需要先存到本地,以及点击跳转等问题. ...
微信小程序开屏广告实现
微信小程序开屏广告即打开微信小程序后全屏展示的广告图片.用户可点击"跳过"按钮跳过广告,或者广告展示一段时间过后进入微信小程序.并可以显示广告的剩余时间.效果图如下(背景图是网图, ...
app开屏广告实现——借助webview和原生fetch请求实现
app开屏广告实现1 全局加载,仅app打开时弹出,借助webview和原生fetch请求实现. app.vue的onLaunch生命周期,在整个app运行期间,仅会执行一次,所以广告就达到了只有打开 ...
AdMob广告变现：新增开屏广告
国内开发者对于开屏广告都不陌生,出海之后发现谷歌并没有此功能.现在它来了!2020年9月底AdMob上线开屏广告Beta版,对于主要通过广告赚取收益的开发者确实是利好消息. 当用户打开或切换回你的应用 ...

SwiftUI应用开屏广告界面项目（一）

SwiftUI iOS应用开屏广告界面项目（一）

瞎扯

不想看我瞎扯可以直接跳到这

需求

源码

思路分析

页面跳转

计时

远程图片获取

SwiftUI应用开屏广告界面项目（一）相关推荐

最新文章

热门文章