如何在 SwiftUI 中实现 PageView？

问题描述 投票：0回答：7

我是 SwiftUI 新手。我有三个视图，我希望它们位于页面视图中。我想像页面浏览一样通过滑动来移动每个视图，并且我希望小点指示我所在的视图。

ios swift swiftui
7个回答
112
投票

iOS 15+

在 iOS 15 中，我们现在可以轻松设置页面样式：

TabView {
    FirstView()
    SecondView()
    ThirdView()
}
.tabViewStyle(.page)

我们还可以设置索引的可见性：

.tabViewStyle(.page(indexDisplayMode: .always))

iOS 14+

现在 SwiftUI 2 / iOS 14 中有一个相当于 

UIPageViewController
的原生版本。

要创建分页视图，请将 

.tabViewStyle
修饰符添加到 
TabView
并传递 
PageTabViewStyle
。

@main
struct TestApp: App {
    var body: some Scene {
        WindowGroup {
            TabView {
                FirstView()
                SecondView()
                ThirdView()
            }
            .tabViewStyle(PageTabViewStyle())
        }
    }
}

您还可以控制分页点的显示方式：

// hide paging dots
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))

您可以在此链接中找到更详细的解释：

垂直变体

TabView {
    Group {
        FirstView()
        SecondView()
        ThirdView()
    }
    .rotationEffect(Angle(degrees: -90))
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
.rotationEffect(Angle(degrees: 90))

自定义组件

如果您厌倦了每次都通过

tabViewStyle
，您可以创建自己的
PageView
：

注意： iOS 14.0 中的 TabView 选择工作方式不同，这就是为什么我使用两个 

Binding
属性：
selectionInternal
和 
selectionExternal
。从 iOS 14.3 开始，它似乎只支持一个 
Binding
。但是，您仍然可以从修订历史记录中访问原始代码。

struct PageView<SelectionValue, Content>: View where SelectionValue: Hashable, Content: View {
    @Binding private var selection: SelectionValue
    private let indexDisplayMode: PageTabViewStyle.IndexDisplayMode
    private let indexBackgroundDisplayMode: PageIndexViewStyle.BackgroundDisplayMode
    private let content: () -> Content

    init(
        selection: Binding<SelectionValue>,
        indexDisplayMode: PageTabViewStyle.IndexDisplayMode = .automatic,
        indexBackgroundDisplayMode: PageIndexViewStyle.BackgroundDisplayMode = .automatic,
        @ViewBuilder content: @escaping () -> Content
    ) {
        self._selection = selection
        self.indexDisplayMode = indexDisplayMode
        self.indexBackgroundDisplayMode = indexBackgroundDisplayMode
        self.content = content
    }

    var body: some View {
        TabView(selection: $selection) {
            content()
        }
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: indexDisplayMode))
        .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: indexBackgroundDisplayMode))
    }
}

extension PageView where SelectionValue == Int {
    init(
        indexDisplayMode: PageTabViewStyle.IndexDisplayMode = .automatic,
        indexBackgroundDisplayMode: PageIndexViewStyle.BackgroundDisplayMode = .automatic,
        @ViewBuilder content: @escaping () -> Content
    ) {
        self._selection = .constant(0)
        self.indexDisplayMode = indexDisplayMode
        self.indexBackgroundDisplayMode = indexBackgroundDisplayMode
        self.content = content
    }
}

现在你有一个默认的

PageView
：

PageView {
    FirstView()
    SecondView()
    ThirdView()
}

可定制：

PageView(indexDisplayMode: .always, indexBackgroundDisplayMode: .always) { ... }

或提供 

selection
:

struct ContentView: View {
    @State var selection = 1

    var body: some View {
        VStack {
            Text("Selection: \(selection)")
            PageView(selection: $selection, indexBackgroundDisplayMode: .always) {
                ForEach(0 ..< 3, id: \.self) {
                    Text("Page \($0)")
                        .tag($0)
                }
            }
        }
    }
}
34
投票

页面控制

struct PageControl: UIViewRepresentable {
    var numberOfPages: Int
    @Binding var currentPage: Int
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    func makeUIView(context: Context) -> UIPageControl {
        let control = UIPageControl()
        control.numberOfPages = numberOfPages
        control.pageIndicatorTintColor = UIColor.lightGray
        control.currentPageIndicatorTintColor = UIColor.darkGray
        control.addTarget(
            context.coordinator,
            action: #selector(Coordinator.updateCurrentPage(sender:)),
            for: .valueChanged)

        return control
    }

    func updateUIView(_ uiView: UIPageControl, context: Context) {
        uiView.currentPage = currentPage
    }

    class Coordinator: NSObject {
        var control: PageControl

        init(_ control: PageControl) {
            self.control = control
        }
        @objc
        func updateCurrentPage(sender: UIPageControl) {
            control.currentPage = sender.currentPage
        }
    }
}

您的页面视图

struct PageView<Page: View>: View {
    var viewControllers: [UIHostingController<Page>]
    @State var currentPage = 0
    init(_ views: [Page]) {
        self.viewControllers = views.map { UIHostingController(rootView: $0) }
    }

    var body: some View {
        ZStack(alignment: .bottom) {
            PageViewController(controllers: viewControllers, currentPage: $currentPage)
            PageControl(numberOfPages: viewControllers.count, currentPage: $currentPage)
        }
    }
}

您的页面视图控制器


struct PageViewController: UIViewControllerRepresentable {
    var controllers: [UIViewController]
    @Binding var currentPage: Int
    @State private var previousPage = 0

    init(controllers: [UIViewController],
         currentPage: Binding<Int>)
    {
        self.controllers = controllers
        self._currentPage = currentPage
        self.previousPage = currentPage.wrappedValue
    }

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    func makeUIViewController(context: Context) -> UIPageViewController {
        let pageViewController = UIPageViewController(
            transitionStyle: .scroll,
            navigationOrientation: .horizontal)
        pageViewController.dataSource = context.coordinator
        pageViewController.delegate = context.coordinator

        return pageViewController
    }

    func updateUIViewController(_ pageViewController: UIPageViewController, context: Context) {
        guard !controllers.isEmpty else {
            return
        }
        let direction: UIPageViewController.NavigationDirection = previousPage < currentPage ? .forward : .reverse
        context.coordinator.parent = self
        pageViewController.setViewControllers(
            [controllers[currentPage]], direction: direction, animated: true) { _ in {
            previousPage = currentPage
        }
    }

    class Coordinator: NSObject, UIPageViewControllerDataSource, UIPageViewControllerDelegate {
        var parent: PageViewController

        init(_ pageViewController: PageViewController) {
            self.parent = pageViewController
        }

        func pageViewController(
            _ pageViewController: UIPageViewController,
            viewControllerBefore viewController: UIViewController) -> UIViewController? {
            guard let index = parent.controllers.firstIndex(of: viewController) else {
                return nil
            }
            if index == 0 {
                return parent.controllers.last
            }
            return parent.controllers[index - 1]
        }

        func pageViewController(
            _ pageViewController: UIPageViewController,
            viewControllerAfter viewController: UIViewController) -> UIViewController? {
            guard let index = parent.controllers.firstIndex(of: viewController) else {
                return nil
            }
            if index + 1 == parent.controllers.count {
                return parent.controllers.first
            }
            return parent.controllers[index + 1]
        }

        func pageViewController(_ pageViewController: UIPageViewController, didFinishAnimating finished: Bool, previousViewControllers: [UIViewController], transitionCompleted completed: Bool) {
            if completed,
                let visibleViewController = pageViewController.viewControllers?.first,
                let index = parent.controllers.firstIndex(of: visibleViewController) {
                parent.currentPage = index
            }
        }
    }
}

假设您有这样的观点

struct CardView: View {
    var album: Album
    var body: some View {
        URLImage(URL(string: album.albumArtWork)!)
            .resizable()
            .aspectRatio(3 / 2, contentMode: .fit)
    }
}

您可以像这样在主 SwiftUI 视图中使用此组件。

PageView(vM.Albums.map { CardView(album: $0) }).frame(height: 250)
4
投票

斯威夫特5

要在 swiftUI 中实现页面视图，只需使用具有页面样式的 

TabView
即可，非常非常简单。我喜欢它

struct OnBoarding: View {
    var body: some View {
        TabView {
            Page(text:"Page 1")
            Page(text:"Page 2")
        }
        .tabViewStyle(.page(indexDisplayMode: .always))
        .ignoresSafeArea()
    }
}
3
投票

iOS 13+（私有API）

警告：以下答案使用不公开可见的私有 SwiftUI 方法（如果您知道在哪里看，您仍然可以访问它们）。但是，它们没有正确记录并且可能不稳定。使用它们需要您自担风险。

在浏览 SwiftUI 文件时，我偶然发现了 

_PagingView
，它似乎自 iOS 13 以来就可用：

@available(iOS 13.0, OSX 10.15, tvOS 13.0, watchOS 6.0, *)
public struct _PagingView<Views> : SwiftUI.View where Views : Swift.RandomAccessCollection, Views.Element : SwiftUI.View, Views.Index : Swift.Hashable

此视图有两个初始化器：

public init(config: SwiftUI._PagingViewConfig = _PagingViewConfig(), page: SwiftUI.Binding<Views.Index>? = nil, views: Views)

public init(direction: SwiftUI._PagingViewConfig.Direction, page: SwiftUI.Binding<Views.Index>? = nil, views: Views)

我们还有

_PagingViewConfig
：

@available(iOS 13.0, OSX 10.15, tvOS 13.0, watchOS 6.0, *)
public struct _PagingViewConfig : Swift.Equatable {
  public enum Direction {
    case vertical
    case horizontal
    public static func == (a: SwiftUI._PagingViewConfig.Direction, b: SwiftUI._PagingViewConfig.Direction) -> Swift.Bool
    public var hashValue: Swift.Int {
      get
    }
    public func hash(into hasher: inout Swift.Hasher)
  }
  public var direction: SwiftUI._PagingViewConfig.Direction
  public var size: CoreGraphics.CGFloat?
  public var margin: CoreGraphics.CGFloat
  public var spacing: CoreGraphics.CGFloat
  public var constrainedDeceleration: Swift.Bool
  public init(direction: SwiftUI._PagingViewConfig.Direction = .horizontal, size: CoreGraphics.CGFloat? = nil, margin: CoreGraphics.CGFloat = 0, spacing: CoreGraphics.CGFloat = 0, constrainedDeceleration: Swift.Bool = true)
  public static func == (a: SwiftUI._PagingViewConfig, b: SwiftUI._PagingViewConfig) -> Swift.Bool
}

现在，我们可以创建一个简单的

_PagingView
：

_PagingView(direction: .horizontal, views: [
    AnyView(Color.red),
    AnyView(Text("Hello world")),
    AnyView(Rectangle().frame(width: 100, height: 100))
])

这是另一个更定制的示例：

struct ContentView: View {
    @State private var selection = 1
    
    var body: some View {
        _PagingView(
            config: _PagingViewConfig(
                direction: .vertical,
                size: nil,
                margin: 10,
                spacing: 10,
                constrainedDeceleration: false
            ),
            page: $selection,
            views: [
                AnyView(Color.red),
                AnyView(Text("Hello world")),
                AnyView(Rectangle().frame(width: 100, height: 100))
            ]
        )
    }
}
2
投票

对于面向 iOS 14 及更高版本的应用程序，@pawello2222 建议的答案应被视为正确的答案。我现在已经在两个应用程序中尝试过，效果很好，只需很少的代码。

我已将提议的概念包装在一个结构中，该结构可以提供两种视图以及项目列表和视图生成器。可以在这里找到。代码如下所示：

@available(iOS 14.0, *)
public struct MultiPageView: View {
    
    public init<PageType: View>(
        pages: [PageType],
        indexDisplayMode: PageTabViewStyle.IndexDisplayMode = .automatic,
        currentPageIndex: Binding<Int>) {
        self.pages = pages.map { AnyView($0) }
        self.indexDisplayMode = indexDisplayMode
        self.currentPageIndex = currentPageIndex
    }
    
    public init<Model, ViewType: View>(
        items: [Model],
        indexDisplayMode: PageTabViewStyle.IndexDisplayMode = .automatic,
        currentPageIndex: Binding<Int>,
        pageBuilder: (Model) -> ViewType) {
        self.pages = items.map { AnyView(pageBuilder($0)) }
        self.indexDisplayMode = indexDisplayMode
        self.currentPageIndex = currentPageIndex
    }
    
    private let pages: [AnyView]
    private let indexDisplayMode: PageTabViewStyle.IndexDisplayMode
    private var currentPageIndex: Binding<Int>
    
    public var body: some View {
        TabView(selection: currentPageIndex) {
            ForEach(Array(pages.enumerated()), id: \.offset) {
                $0.element.tag($0.offset)
            }
        }
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: indexDisplayMode))
    }
}
1
投票

首先添加包https://github.com/xmartlabs/PagerTabStripView 然后

import SwiftUI
import PagerTabStripView

struct MyPagerView: View {

    var body: some View {
   
        PagerTabStripView() {
            FirstView()
                .frame(width: UIScreen.main.bounds.width)
                .pagerTabItem {
                    TitleNavBarItem(title: "ACCOUNT", systomIcon: "character.bubble.fill")
                       
                }
            ContentView()
                .frame(width: UIScreen.main.bounds.width)
                .pagerTabItem {
                    TitleNavBarItem(title: "PROFILE", systomIcon: "person.circle.fill")
                }
         
              NewsAPIView()
                .frame(width: UIScreen.main.bounds.width)
                    .pagerTabItem {
                        TitleNavBarItem(title: "PASSWORD", systomIcon: "lock.fill")
                    }   
        }   
        .pagerTabStripViewStyle(.barButton(indicatorBarHeight: 4, indicatorBarColor: .black, tabItemSpacing: 0, tabItemHeight: 90))
          
 }
   
}

struct TitleNavBarItem: View {
    let title: String
   let systomIcon: String
    var body: some View {
        VStack {
            Image(systemName: systomIcon)
             .foregroundColor( .white)
             .font(.title)
    
             Text( title)
                .font(.system(size: 22))
                .bold()
                .foregroundColor(.white)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.orange)
    }
}
-1
投票

最简单的方法是通过 iPages。

import SwiftUI
import iPages

struct ContentView: View {
    @State var currentPage = 0
    var body: some View {
        iPages(currentPage: $currentPage) {
            Text("😋")
            Color.pink
        }
    }
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.