在 PageTabViewStyle (SwiftUI 2.0) 或 PageViewController/PageView (带有 UIKit 界面) 上显示部分上一个和下一个项目
Posted
技术标签:
【中文标题】在 PageTabViewStyle (SwiftUI 2.0) 或 PageViewController/PageView (带有 UIKit 界面) 上显示部分上一个和下一个项目【英文标题】：Show partial previous and next item on PageTabViewStyle (SwiftUI 2.0) or PageViewController/PageView (with UIKit interface) 【发布时间】：2020-07-25 23:10:51 【问题描述】：我正在使用 SwiftUI 2.0，实际上，我很高兴 Apple 引入了 PageTabViewStyle 来简单地创建一个寻呼机。 但不幸的是，我无法以我想要的方式实现它。 是否可以创建一个显示前一个和下一个项目的一小部分的寻呼机（PageTabViewStyle）？
图片 1：期望的行为
我尝试使用新的 PageTabViewStyle 以及一些填充和/或偏移的组合，并且我还尝试与 UIKit（PageView / PageViewController / PAgeViewControl）进行交互。 但这里的行为相同，我只看到选定的项目，即使它没有覆盖整个宽度。
图 2：当前行为
SwiftUI 2.0 - PageTabViewStyle 集成
以下代码片段是 PageTabViewStyle 的一个非常简单的实现，但是如果您有想法，可以在这个示例中向我展示我可以做些什么来使它工作：
import SwiftUI
struct ContentView: View
let colors: [Color] = [.red, .green, .yellow, .blue]
var body: some View
TabView
ForEach(0..<6) index in
HStack()
Text("Tab \(index)")
.font(.title)
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(colors[index % colors.count])
.cornerRadius(8)
.frame(width: 300, height: 200)
.tabViewStyle(PageTabViewStyle())
UIKit 接口
以下代码来自 Apple 的示例，也许您可以在这里告诉我如何获得所需的行为：
PageViewController
/*
See LICENSE folder for this sample’s licensing information.
Abstract:
A view that wraps a UIPageViewController.
*/
import SwiftUI
import UIKit
struct PageViewController: UIViewControllerRepresentable
var controllers: [UIViewController]
@Binding var currentPage: Int
func makeCoordinator() -> Coordinator
Coordinator(self)
func makeUIViewController(context: Context) -> UIPageViewController
let pageViewController = UIPageViewController(
transitionStyle: .scroll,
navigationOrientation: .horizontal,
options: [UIPageViewController.OptionsKey.interPageSpacing: 5]
)
pageViewController.dataSource = context.coordinator
pageViewController.delegate = context.coordinator
return pageViewController
func updateUIViewController(_ pageViewController: UIPageViewController, context: Context)
pageViewController.setViewControllers(
[controllers[currentPage]], direction: .forward, animated: true)
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
页面视图
/*
See LICENSE folder for this sample’s licensing information.
Abstract:
A view for bridging a UIPageViewController.
*/
import SwiftUI
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: .bottomTrailing)
PageViewController(controllers: viewControllers, currentPage: $currentPage)
PageControl(numberOfPages: viewControllers.count, currentPage: $currentPage)
.padding(.trailing)
谢谢， 塞巴斯蒂安
【问题讨论】：
你找到解决办法了吗？ 嗨@Stone，不幸的是，我没有找到一种方法来直接通过添加配置参数或类似的东西来做到这一点。但是，我能够使用 SwiftUIPager (github.com/fermoya/SwiftUIPager) 获得所需的行为。我也开始自己创建一个模块（有很多事情要考虑，例如之后放慢速度）。我会继续，但目前我采用不同的设计方法。 我真的很喜欢这个主意。如果你需要 SwiftUI 本身不支持的东西，请使用反馈助手应用程序提交反馈建议（这个应用程序已经在你的机器上）。想要这个的开发人员越多，它获得的优先级就越高。我提交了一份（FB9881131）。 【参考方案1】：我没有发现任何开箱即用的东西，所以我在 SwiftUI 中这样实现：
轮播：
import Foundation
import SwiftUI
struct Carousel<Content: View,T: Identifiable>: View
var content: (T) -> Content
var list: [T]
var spacing: CGFloat
var trailingSpace: CGFloat
@Binding var index: Int
init(spacing: CGFloat = 15,trailingSpace: CGFloat = 200,index: Binding<Int>,items: [T],@ViewBuilder content: @escaping (T)->Content)
self.list = items
self.spacing = spacing
self.trailingSpace = trailingSpace
self._index = index
self.content = content
@GestureState var offset: CGFloat = 0
@State var currentIndex: Int = 0
var body: some View
GeometryReaderproxy in
let width = proxy.size.width - (trailingSpace - spacing)
let adjustMentWidth = (trailingSpace / 2) - spacing
HStack(spacing: spacing)
ForEach(list)item in
content(item)
.frame(width: proxy.size.width - trailingSpace, height: 100)
.padding(.horizontal,spacing)
.offset(x: (CGFloat(currentIndex) * -width) + (currentIndex != 0 ? adjustMentWidth : 0) + offset)
.gesture(
DragGesture()
.updating($offset, body: value, out, _ in
out = value.translation.width
)
.onEnded( value in
let offsetX = value.translation.width
let progress = -offsetX / width
let roundIndex = progress.rounded()
currentIndex = max(min(currentIndex + Int(roundIndex), list.count - 1), 0)
currentIndex = index
)
.onChanged( value in
let offsetX = value.translation.width
let progress = -offsetX / width
let roundIndex = progress.rounded()
index = max(min(currentIndex + Int(roundIndex), list.count - 1), 0)
)
)
.animation(.easeInOut, value: offset == 0)
用户（简体）：
import Foundation
import SwiftUI
struct User: Identifiable
var id = UUID().uuidString
var userName: String
var userImage: String
内容视图：
import SwiftUI
struct ContentView: View
@State var currentIndex: Int = 0
@State var users: [User] = []
var body: some View
VStack()
Carousel(index: $currentIndex, items: users) user in
GeometryReaderproxy in
let size = proxy.size
Image(user.userImage)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: size.width)
.cornerRadius(12)
.padding(.vertical,40)
// Indicator dots
HStack(spacing: 10)
ForEach(users.indices,id: \.self)index in
Circle()
.fill(Color.black.opacity(currentIndex == index ? 1 : 0.1))
.frame(width: 10, height: 10)
.scaleEffect(currentIndex == index ? 1.4 : 1)
.animation(.spring(), value: currentIndex == index)
.padding(.bottom,40)
.onAppear
for index in 1...5
users.append(User(userName: "User\(index)", userImage: "user\(index)"))
【讨论】：
以上是关于在 PageTabViewStyle (SwiftUI 2.0) 或 PageViewController/PageView (带有 UIKit 界面) 上显示部分上一个和下一个项目的主要内容，如果未能解决你的问题，请参考以下文章
在 TabView 中设置 SwiftUI PageTabViewStyle 垂直流向
SwiftUI TabView 与 PageTabViewStyle 在设备上的横向与 safeArea 添加奇数前沿插图
带有 PageTabViewStyle 的 TabView 屏幕中的背景不会填满整个可用的垂直空间
在 PageTabViewStyle (SwiftUI 2.0) 或 PageViewController/PageView (带有 UIKit 界面) 上显示部分上一个和下一个项目