其他分享
首页 > 其他分享> > SwiftUI应用开屏广告界面(3秒跳转)

SwiftUI应用开屏广告界面(3秒跳转)

作者:互联网

SwiftUI应用开屏广告界面(3秒跳转)

瞎扯

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

我都快忘了我是啥专业的了
在这里插入图片描述

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

需求

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

源码

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

//
//  ContentView.swift
//  iOSTest
//
//  Created by WMIII on 2021/3/21.
//

import SwiftUI
import UIKit
import Combine

class 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 in
            receiveValue()
        }
    }
    
    //暂停销毁计时器
    func stop() {
        canceller?.cancel()
        canceller = nil
    }
}

struct ContentView: View {
    @State private var remoteImage :UIImage? = nil
    @State var isPresented = false
    let placeholderOne = UIImage(named: "Image1")
    // 这里的Image1为工程资源文件夹中的图片资源名,自己随便创建一个就行
    
    let timer = Timer.publish(every: 1, on: .main, in: .common)
    
    @State private var second = 5
    private let timeHelper = TimeHelp()
    @State private var end = true
                
    var 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 = false
                self.second = 3
                self.timeHelper.start {
                    // print(second)
                    if self.second > 1 {
                        _ = self.second -= 1
                    }else{
                        //暂停
                        self.end = true
                        self.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&hei=1112&fmt=jpeg&qlt=80&.v=1604021663000") else {return}
        
        URLSession.shared.dataTask(with: url)
        {
            (data, response, error) in
            if let img = UIImage(data: data!)
            {
                self.remoteImage = img
            }
            else
            {
                print(error ?? "1")
            }
        }
        .resume()
    }
}


struct DetailView: View{
    let message: String
    
    var 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 SwiftUI
 
struct ContentView:View {
    @State var isPresented = false
    var 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 Combine

class 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 in
            receiveValue()
        }
    }
    
    //暂停销毁计时器
    func stop() {
        canceller?.cancel()
        canceller = nil
    }
}

struct ContentView: View {
    @State var isPresented = false
    let placeholderOne = UIImage(named: "Image1")
    
    let timer = Timer.publish(every: 1, on: .main, in: .common)
    
    @State private var second = 5
    private let timeHelper = TimeHelp()
    @State private var end = true
                
    var 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 = false
                self.second = 3
                self.timeHelper.start {
                    // print(second)
                    if self.second > 1 {
                        _ = self.second -= 1
                    }else{
                        //暂停
                        self.end = true
                        self.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&hei=1112&fmt=jpeg&qlt=80&.v=1604021663000") else {return}
        // 这里的string为图片的地址,这里我用的是Apple官网商店的图片
        URLSession.shared.dataTask(with: url)
        {
            (data, response, error) in
            if 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)

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

标签:ContentView,self,开屏,SwiftUI,跳转,var,let,isPresented,View
来源: https://blog.csdn.net/weixin_46068920/article/details/115406957