带有 Peeking 的 UIPageViewController
Posted
技术标签:
【中文标题】带有 Peeking 的 UIPageViewController【英文标题】:UIPageViewController with Peeking 【发布时间】:2014-07-31 12:38:55 【问题描述】:我正在尝试通过在 Interface Builder 中使用 UIPageViewController
创建一个页面浏览器,它允许显示相邻页面的一部分(也就是偷看)。我一直在关注http://www.appcoda.com/uipageviewcontroller-storyboard-tutorial/ 的教程(并将其移植到 Swift 中),这非常简单,但我不太清楚要在 UIPageViewController 中显示比屏幕小的页面(和居中),并让相邻页面部分显示在屏幕左右两侧。
我尝试在 IB 中使用代码调整页面内容视图控制器的大小,但页面视图控制器仍会填满整个屏幕。
是否有人知道涵盖此功能的教程或获得所需效果的好方法?
下面这张来自 Bamboo Paper 的屏幕截图显示了我正在努力实现的目标......
【问题讨论】:
你这里有成功吗? @Pramod 在下面看到我的回答 【参考方案1】:就像@davew 所说,偷看视图需要使用UIScrollView
。我也搜索了使用UIPageViewController
的方法,但找不到任何资源。
使用UIScrollView
制作这个功能没有我想象的那么痛苦。
这里是一个简单的例子,可以看到基本的控制。
首先:创建一个UIViewController
,然后在viewDidLoad
方法中,添加如下代码:
float pad = 20;
NSArray* items = @[@"One", @"Two", @"Three", @"Four"];
self.view.backgroundColor = [UIColor greenColor];
UIScrollView* pageScrollView = [[UIScrollView alloc] initWithFrame:self.view.frame];
pageScrollView.opaque = NO;
pageScrollView.showsHorizontalScrollIndicator = NO;
pageScrollView.clipsToBounds = NO;
pageScrollView.pagingEnabled = YES;
adjustFrame(pageScrollView, pad, deviceH()/4, -pad*3, -deviceH()/2);
[self.view addSubview: pageScrollView];
float w = pageScrollView.frame.size.width;
for(int i = 0; i < [items count]; i++)
UIView* view = [[UIView alloc] initWithFrame:pageScrollView.bounds];
view.backgroundColor = [UIColor blueColor];
setFrameX(view, (i*w)+pad);
setFrameW(view, w-(pad*1));
[pageScrollView addSubview:view];
pageScrollView.contentSize = CGSizeMake(w*[items count], pageScrollView.frame.size.height);
仅供参考,我使用这些util functions 来调整视图框架的大小;我厌倦了用 3 行以上的代码手动更改它们。
更新
我已经将这段代码封装在一个简单的 ViewController 中并放在 GitHub 上
https://github.com/kjantzer/peek-page-view-controller
这绝不是完整的,但它是一个工作的开始。
【讨论】:
如果我们有不同高度的视图,这将如何工作?【参考方案2】:我只是在为相同的功能寻找一个好的解决方案。我在 Ray Wenderlich 的网站上找到了一个不错的教程,标题为 "How To Use UIScrollView to Scroll and Zoom Content"。它说明了您可以使用UIScrollView
执行的多项操作。第四个也是最后一个是“查看上一页/下一页”,这是您的“查看”功能。
我还没有实现这个,但关键步骤似乎是:
创建一个比屏幕窄的UIScrollView
开启Paging Enabled
关闭Clip Subviews
并排填写UIScrollView
与您的页面
将UIScrollView
嵌入到填充屏幕宽度的UIView
中,以便您可以在滚动视图之外捕获和传递触摸
【讨论】:
【参考方案3】:我在 swift 4 中重写了 Kevin Jantzer 的答案,它的工作原理!
override func viewDidLoad()
super.viewDidLoad()
let pad: CGFloat = 20
let items: [UIColor] = [.blue, .yellow, .red, .green]
self.view.backgroundColor = .white
var pageScrollView = UIScrollView(frame: self.view.frame)
pageScrollView.isOpaque = false
pageScrollView.showsHorizontalScrollIndicator = false
pageScrollView.clipsToBounds = false
pageScrollView.isPagingEnabled = true
adjustFrame(myView: pageScrollView, x: pad, y: UIScreen.main.bounds.height / 4, w: -pad * 3, h: -UIScreen.main.bounds.height/2)
self.view.addSubview(pageScrollView)
let w = pageScrollView.frame.size.width
for (i, item) in items.enumerated()
let myView = UIView(frame: pageScrollView.bounds)
myView.backgroundColor = item
setFrameX(myView: myView, x: (CGFloat(i) * w) + pad);
setFrameW(myView: myView, w: w-(pad*1));
pageScrollView.addSubview(myView)
pageScrollView.contentSize = CGSize(width: w * CGFloat(items.count), height: pageScrollView.frame.size.height);
func setFrame(myView: UIView, x: CGFloat?, y: CGFloat?, w: CGFloat?, h: CGFloat?)
var f = myView.frame
if let safeX = x
f.origin = CGPoint(x: safeX, y: f.origin.y)
if let safeY = y
f.origin = CGPoint(x: f.origin.x, y: safeY)
if let safeW = w
f.size.width = safeW
if let safeH = h
f.size.height = safeH
myView.frame = f
func setFrameX(myView: UIView, x: CGFloat)
setFrame(myView: myView, x: x, y: nil, w: nil, h: nil)
func setFrameY(myView: UIView, y: CGFloat)
setFrame(myView: myView, x: nil, y: y, w: nil, h: nil)
func setFrameW(myView: UIView, w: CGFloat)
setFrame(myView: myView, x: nil, y: nil, w: w, h: nil)
func setFrameH(myView: UIView, h: CGFloat)
setFrame(myView: myView, x: nil, y: nil, w: nil, h: h)
func adjustFrame(f: CGRect, x: CGFloat?, y: CGFloat?, w: CGFloat?, h: CGFloat?) -> CGRect
var rect = f
if let safeX = x
rect.origin = CGPoint(x: rect.origin.x + safeX, y: f.origin.y)
if let safeY = y
rect.origin = CGPoint(x: f.origin.x, y: rect.origin.y + safeY)
if let safeW = w
rect.size.width = safeW + rect.size.width
if let safeH = h
rect.size.height = safeH + rect.size.height
return rect
func adjustFrame(myView: UIView, x: CGFloat, y: CGFloat, w: CGFloat, h: CGFloat)
myView.frame = adjustFrame(f: myView.frame, x: x, y: y, w: w, h: h);
【讨论】:
以上是关于带有 Peeking 的 UIPageViewController的主要内容,如果未能解决你的问题,请参考以下文章
java 284. Peeking Iterator.java
java 284. Peeking Iterator.java
java 284. Peeking Iterator.java
java 284. Peeking Iterator.java