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

最新推荐文章于 2022-05-05 17:02:00 发布

WMIII

最新推荐文章于 2022-05-05 17:02:00 发布

阅读量1k

点赞数 2

分类专栏： swift 文章标签： ios swift

本文链接：https://blog.csdn.net/weixin_46068920/article/details/115406957

版权

swift 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

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

瞎扯
不想看我瞎扯可以直接跳到这
需求
源码
思路分析

瞎扯

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

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

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

需求

为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&amp;hei=1112&amp;fmt=jpeg&amp;qlt=80&amp;.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&amp;hei=1112&amp;fmt=jpeg&amp;qlt=80&amp;.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)

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

WMIII

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
SwiftUI应用开屏广告界面项目（一）

SwiftUI应用开屏广告界面（3秒跳转）瞎扯不想看我瞎扯可以直接跳到这需求源码思路分析页面跳转计时远程图片获取瞎扯最近开始玩Swift试试macOS和iOS开发我都快忘了我是啥专业的了不想看我瞎扯可以直接跳到这需求模拟开屏广告的模式，为应用做一个开屏活动页，远端提供活动页图片；图片经过3s倒计时后消失，用户可以点击“跳过”按钮提前结束；源码废话不多说，先直接上源码。工程中只修改了ContentView.swift文件，所以这里只放ContentView.swift的代码：////
复制链接

扫一扫