UIPageViewController与Peeking

时间:2014-07-31 12:38:55

标签: ios cocoa-touch uipageviewcontroller

我正在尝试使用Interface Builder中的UIPageViewController创建一个页面浏览器,它允许显示部分相邻页面(也就是偷看)。我一直在http://www.appcoda.com/uipageviewcontroller-storyboard-tutorial/上关注一个教程(并将其移植到Swift中),这很简单,但是我无法弄清楚在UIPageViewController中显示的页面是否小于屏幕(并居中)并使相邻的页面部分显示在屏幕上左右。

我试图在IB中调整页面内容视图控制器的大小并使用代码,但页面视图控制器仍将填满整个屏幕。

是否有人知道涵盖此功能的教程或获得所需效果的好方法?

以下Bamboo Paper的截图显示了我正在努力实现的目标......

enter image description here

3 个答案:

答案 0 :(得分:5)

像@davew所说,偷看意见需要使用UIScrollView。我也搜索了一种使用UIPageViewController但无法找到任何资源的方法。

使用UIScrollView制作此功能并不像我想象的那么痛苦。

这是一个简单的示例,可以看到实际的基本控件。

Preview

首先:制作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

这绝不是完整的,但它是一个有效的开始。

答案 1 :(得分:3)

我只是在寻找同一功能的好解决方案。我在Ray Wenderlich的网站上找到了一个很好的教程,名为"How To Use UIScrollView to Scroll and Zoom Content"。它说明了使用UIScrollView可以执行的多项操作。第四个也是最后一个是“查看上一页/下一页”,这是你的“窥视”功能。

我还没有实现,但关键步骤似乎是:

  • 创建比屏幕窄的UIScrollView
  • 开启Paging Enabled
  • 关闭Clip Subviews
  • UIScrollView与您的页面并排填充
  • UIScrollView嵌入填充屏幕宽度的UIView内,以便您可以捕捉并传递滚动视图外的触摸

答案 2 :(得分:2)

我在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);
}
}