如何使UIPageViewController半圆形的底部条形图?

时间:2013-07-22 04:01:30

标签: iphone ios uipageviewcontroller

我正在制作教程,我正试图模仿Path教程的风格,如下所示:

http://www.appcoda.com/wp-content/uploads/2013/06/UIPageViewController-Tutorial-Screen.jpg enter image description here

我的问题是如果将委托方法设置为:

- (NSInteger)presentationCountForPageViewController:(UIPageViewController *)pageViewController {
    // The number of items reflected in the page indicator.
    return 5;
}

然后我在这个点下面得到了这个愚蠢的黑条:

http://i.stack.imgur.com/pUEdh.png enter image description here

有没有办法让这个酒吧半透明的方式类似于将UINavigationBar设置为半透明?

12 个答案:

答案 0 :(得分:46)

很容易让它发挥作用。您只需要使pageviewcontroller更高,并将PageControl放入XIB文件中。 诀窍是将PageControl放在前台(以及所有其他常用控件)的开头,并使用PageViewController更新PageControl的内容。这是代码:

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.

    self.pageController = [[UIPageViewController alloc] initWithTransitionStyle:UIPageViewControllerTransitionStyleScroll navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal options:nil];

    self.pageController.dataSource = self;
    // We need to cover all the control by making the frame taller (+ 37)
    [[self.pageController view] setFrame:CGRectMake(0, 0, [[self view] bounds].size.width, [[self view] bounds].size.height + 37)];

    TutorialPageViewController *initialViewController = [self viewControllerAtIndex:0];

    NSArray *viewControllers = [NSArray arrayWithObject:initialViewController];

    [self.pageController setViewControllers:viewControllers direction:UIPageViewControllerNavigationDirectionForward animated:NO completion:nil];

    [self addChildViewController:self.pageController];
    [[self view] addSubview:[self.pageController view]];
    [self.pageController didMoveToParentViewController:self];

    // Bring the common controls to the foreground (they were hidden since the frame is taller)
    [self.view bringSubviewToFront:self.pcDots];
    [self.view bringSubviewToFront:self.btnSkip];
}

- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerBeforeViewController:(UIViewController *)viewController {

    NSUInteger index = [(TutorialPageViewController *)viewController index];

    [self.pcDots setCurrentPage:index];

    if (index == 0) {
        return nil;
    }

    index--;

    return [self viewControllerAtIndex:index];
}

- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerAfterViewController:(UIViewController *)viewController {

    NSUInteger index = [(TutorialPageViewController *)viewController index];

    [self.pcDots setCurrentPage:index];

    index++;

    if (index == 3) {
        return nil;
    }

    return [self viewControllerAtIndex:index];
}

- (TutorialPageViewController *)viewControllerAtIndex:(NSUInteger)index {

    TutorialPageViewController *childViewController = [[TutorialPageViewController alloc] initWithNibName:@"TutorialPageViewController" bundle:nil];
    childViewController.index = index;

    return childViewController;
}

- (NSInteger)presentationCountForPageViewController:(UIPageViewController *)pageViewController {
    // The number of items reflected in the page indicator.
    NSInteger tutorialSteps = 3;
    [self.pcDots setNumberOfPages:tutorialSteps];

    return tutorialSteps;
}

- (NSInteger)presentationIndexForPageViewController:(UIPageViewController *)pageViewController {
    // The selected item reflected in the page indicator.
    return 0;
}

答案 1 :(得分:18)

只需通过子类化UIPageViewController并覆盖viewDidLayoutSubviews,即可实现相同的效果,如下所示:

-(void)viewDidLayoutSubviews {
    UIView* v = self.view;
    NSArray* subviews = v.subviews;
    // Confirm that the view has the exact expected structure.
    // If you add any custom subviews, you will want to remove this check.
    if( [subviews count] == 2 ) {
        UIScrollView* sv = nil;
        UIPageControl* pc = nil;
        for( UIView* t in subviews ) {
            if( [t isKindOfClass:[UIScrollView class]] ) {
                sv = (UIScrollView*)t;
            } else if( [t isKindOfClass:[UIPageControl class]] ) {
                pc = (UIPageControl*)t;
            }
        }
        if( sv != nil && pc != nil ) {
            // expand scroll view to fit entire view
            sv.frame = v.bounds;
            // put page control in front
            [v bringSubviewToFront:pc];
        }
    }
    [super viewDidLayoutSubviews];
}

然后就不需要维护单独的UIPageControl等。

答案 2 :(得分:8)

Swift 3片段

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    if let scrollView = view.subviews.filter({ $0 is UIScrollView }).first,
        let pageControl = view.subviews.filter({ $0 is UIPageControl }).first {
        scrollView.frame = view.bounds
        view.bringSubview(toFront:pageControl)
    }
}

答案 3 :(得分:5)

这是将Zerotool的解决方案转换为Swift 2.1,尽管可能有更优雅的方式来编写它:

override func viewDidLayoutSubviews() {
    var scrollView: UIScrollView?
    var pageControl: UIPageControl?

    // If you add any custom subviews, you will want to remove this check.
    if (self.view.subviews.count == 2) {
        for view in self.view.subviews {
            if (view.isKindOfClass(UIScrollView)) {
                scrollView = view as? UIScrollView
            } else if (view.isKindOfClass(UIPageControl)) {
                pageControl = view as? UIPageControl
            }
        }
    }

    if let scrollView = scrollView {
        if let pageControl = pageControl {
            scrollView.frame = self.view.bounds
            self.view.bringSubviewToFront(pageControl)
        }
    }

    super.viewDidLayoutSubviews()
}

答案 4 :(得分:3)

我认为你不能改变UIPageViewController的行为,因此Path应用程序似乎可能使用自己的视图控制器。您可以这样做:创建自己的容器视图控制器,使用UIPageControl指示当前页面。

答案 5 :(得分:2)

您可以简单地调整UIPageViewController的UIPageControl的alpha。

首先,您应该从UIPageViewController中检索它,如下所示:

- (UIPageControl *)getPageControlForPageViewController:(UIPageViewController *)pageViewController {
      for (UIView *subview in self.pageViewController.view.subviews) {
        if ([subview isKindOfClass:[UIPageControl class]]) {
          return (UIPageControl *) subview;
        }
      }

      return nil;
    }

接下来,使用该功能。我在我的ViewController上创建了一个名为childPageControl的属性。给它UIPageViewController的UIPageControl:

self.childPageControl = [self getPageControlForPageViewController:self.pageViewController];

接下来,您可以调整alpha以产生半透明效果:

self.childPageControl.alpha = .5;

你在影响UIPageViewController的UIPageControl方面所做的工作非常有限,但你至少可以轻松实现这一目标。

答案 6 :(得分:2)

我今天发现的小黑客......

请参阅以下代码。

enter image description here

self.pageController.dataSource = self;
    CGRect rect = [self.view bounds];
    rect.size.height+=37;
    [[self.pageController view] setFrame:rect];
        NSArray *subviews = self.pageController.view.subviews;
        UIPageControl *thisControl = nil;
        for (int i=0; i<[subviews count]; i++) {
            if ([[subviews objectAtIndex:i] isKindOfClass:[UIPageControl class]]) {
                thisControl = (UIPageControl *)[subviews objectAtIndex:i];
            }
        }

        UIView *tempview = [[UIView alloc] initWithFrame:CGRectMake(0, -30, 320, 40)];
        [tempview addSubview:thisControl];
        thisControl.pageIndicatorTintColor = [UIColor lightGrayColor];
        thisControl.currentPageIndicatorTintColor = [UIColor greenColor];
        [self.view addSubview:tempview];

答案 7 :(得分:1)

我想在我正在处理的应用程序中执行类似的效果 - 我使用了带有单独UIPageControl的UIPageViewController。

这使您可以将UIPageControl放置在视图中的任何位置,包括UIPageViewController的顶部,并通过UIPageViewController委托方法使其活动页面点保持最新:

- (void)pageViewController:(UIPageViewController *)pageViewController
        didFinishAnimating:(BOOL)finished
   previousViewControllers:(NSArray<UIViewController *> *)previousViewControllers
       transitionCompleted:(BOOL)completed {
    if (completed) {
        self.pageControl.currentPage = [self.pageViewControllers indexOfObject:pageViewController.viewControllers.firstObject];
    }
}

无需遍历子视图层次结构,尝试查找内部UIPageViewController页面控件,也无需调整内部scrollview的内容。

希望这有帮助。

答案 8 :(得分:1)

此代码在Swift中 在UIPageViewController中添加以下内容

override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

    for view in self.view.subviews {
        if view.isKindOfClass(UIScrollView) {
            view.frame = UIScreen.mainScreen().bounds
        } else if view.isKindOfClass(UIPageControl) {
            view.backgroundColor = UIColor.clearColor()
        }
    }
}

答案 9 :(得分:1)

我使用此代码解决:

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.


self.namesImage = @[@"page1.png", @"page2.png", @"page3.png", @"page4.png"];

self.pageViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"PageViewController"];
self.pageViewController.dataSource = self;


TutorialContentViewController *startingViewController = [self viewControllerAtIndex:0];
NSArray *viewControllers = @[startingViewController];

[self.pageViewController setViewControllers:viewControllers direction:UIPageViewControllerNavigationDirectionForward animated:NO completion:nil];


[self addChildViewController:self.pageViewController];
[self.view addSubview:self.pageViewController.view];
[self.pageViewController didMoveToParentViewController:self];

[[UIPageControl appearance] setPageIndicatorTintColor:[UIColor grayColor]];
[[UIPageControl appearance] setCurrentPageIndicatorTintColor:[UIColor whiteColor]];
[[UIPageControl appearance] setBackgroundColor: [[UIColor blackColor] colorWithAlphaComponent:0.1f]];
[[UIPageControl appearance] setOpaque:YES];

}

答案 10 :(得分:1)

Swift 5.2

您可以将这段代码用于您的要求

 override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    if let myScrollView = view.subviews.filter({ $0 is UIScrollView }).first,
        let myPageControl = view.subviews.filter({ $0 is UIPageControl }).first {
        myScrollView.frame = view.bounds
        view.bringSubviewToFront(myPageControl)
    }
}

答案 11 :(得分:0)

我找到了另一种更适合我的工作环境。

我重用the code given by zerotool来获取UIPageControl(var称为pageControl)和UIPageViewController使用的UIScrollView(var,称为pageView)。

在viewDidLoad中完成后,我只是阻止了pageView的剪辑子视图,让内容传播到UIPageControl下面。

pageControl位于pageView下方,因此我们必须手动将它放在第一位。

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    if(
       [[[self view] subviews] count] == 2
       )
    {
        UIScrollView* pageView = nil;
        UIPageControl* pageControl = nil;

        UIView* selfView = self.view;
        NSArray* subviews = selfView.subviews;

        for( NSInteger i = 0 ; i < subviews.count && ( pageView == nil || pageControl == nil ) ; i++ )
        {
            UIView* t = subviews[i];
            if( [t isKindOfClass:[UIScrollView class]] )
            {
                pageView = (UIScrollView*)t;
            }
            else if( [t isKindOfClass:[UIPageControl class]] )
            {
                pageControl = (UIPageControl*)t;
            }
        }

        if( pageView != nil && pageControl != nil )
        {
            [pageView setClipsToBounds:NO];
            [selfView bringSubviewToFront:pageControl];
        }
    }
}

一旦我的pageView覆盖了pageControl所占用的空间,但是在pageControl下,我只需要为显示为页面的每个viewController调整nib文件的使用:

  • 基本视图不应剪辑
  • 第一个也是唯一一个子视图:
    • 应该有约束,从superview底部将底部设置为-37(如果需要,则为更多,但是37是pageControl的大小)
    • 应剪辑内容