SwiftUI实战-UIPageViewController 轮播图

SwiftUI实战系列

• SwiftUI实战-使用ViewModifier自定义微信TabBar底部导航和NavigationView
• SwiftUI实战-NavigationLink图片和文字显示蓝色或者图片无显示
• SwiftUI实战-去除List分割线
• SwiftUI实战-自定义弹窗
• SwiftUI实战-自定义加载指示器HUD
• SwiftUI实战-广告页、欢迎页
• SwiftUI实战-NavigationView + TabView基本框架搭建
• SwiftUI实战-Pager分页查看器
• SwiftUI实战-隐私政策和用户协议弹窗
• SwiftUI实战-多图、大图图片浏览
• SwiftUI实战-下拉菜单
• SwiftUI实战-系统NavigationView自定义titleView
• SwiftUI实战-WKWebView的使用
• SwiftUI实战-自定义转圈指示器
• SwiftUI实战-自定义TextField搭建登录页面UI
• SwiftUI实战-自定义底部弹窗
• SwiftUI实战-显示星级评分
• SwiftUI实战-类似新闻头条轮播滚动
• SwiftUI实战-仿用户协议确认页面支持点击文字显示协议
• SwiftUI实战-新特性、新版本介绍
• SwiftUI实战-多图选择、图片选择器
• SwiftUI实战-轮播图
• SwiftUI实战-网络请求工具封装
• SwiftUI实战-多级联动地址选择
• SwiftUI实战-使用UIActivityIndicatorView
• SwiftUI实战-Expanded可伸缩的分组列表List
• SwiftUI实战-滚动列表内容返回顶部、底部、指定位置
• SwiftUI实战-List列表内容动态改变更新
• SwiftUI-绘制气泡图
• SwiftUI-仿微信加号Popover气泡弹窗
• SwiftUI实战-单边圆角单个圆角
• SwiftUI实战-StatusBar
• SwiftUI实战-滑动隐藏或显示头部

本章内容

UIPageViewController 实现轮播图
1、支持无限轮播
2、解决UIPageViewController导致导航栏无法隐藏的问题
3、支持拖动暂停定时器，放开继续定时轮播

效果图：

UIPageViewController 实现轮播图.gif

相关源码：
ContentView.swift

import SwiftUI

struct ContentView: View {
    
    @State var currentPage: Int = 0
    
    var body: some View {
        NavigationView {
            VStack {
                //轮播图
                SwiperView(items: ["banner1", "banner2", "banner3", "banner4"].map { string in
                    NavigationLink(destination: Text(string), label: {
                        Image(string).resizable()
                    })
                    .buttonStyle(OriginalButtonStyle())
                    
                }, currentPage: $currentPage)
                .aspectRatio(7/3, contentMode: .fit)
                .cornerRadius(12)
                .padding(.horizontal)
                
                Spacer()
            }
            //.navigationBarHidden(true)
            .navigationTitle("轮播图")
            .navigationBarTitleDisplayMode(.inline)
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

struct OriginalButtonStyle : ButtonStyle{
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
    }
}

SwiperControl.swift

import SwiftUI

struct SwiperControl: UIViewRepresentable {

    var numOfPages:Int
    @Binding var currentPage:Int
    
    func makeUIView(context: Context) -> UIPageControl {
        let control = UIPageControl()
        control.currentPage = 0
        control.numberOfPages = numOfPages
        control.addTarget(context.coordinator, action: #selector(context.coordinator.onChanged(sender:)), for: .valueChanged)
        return control
    }
    
    func updateUIView(_ uiView: UIPageControl, context: Context) {
        uiView.currentPage = currentPage
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject {
        var parent:SwiperControl
        
        init(_ parent: SwiperControl) {
            self.parent = parent
        }
        
        @objc func onChanged(sender: UIPageControl){
            parent.currentPage = sender.currentPage
        }
    }
    
}

SwiperView.swift