ios 如何在我的应用程序中使用 UIPageControl？

How do I use UIPageControl in my app?

提问by ZenthyxProgramming

I am making an app where I need some images can be scrolled through using a UIPageControl. Sadly, I don't know how to use a UIPageControl, or a UIScrollView either. A link to a YouTube video or Xcode documentation by Apple would be much appreciated!

我正在制作一个应用程序，我需要一些图像可以使用 UIPageControl 滚动。遗憾的是，我也不知道如何使用 UIPageControl 或 UIScrollView。非常感谢 Apple 提供的指向 YouTube 视频或 Xcode 文档的链接！

Thanks in advance!!

提前致谢！！

回答by Rocker

here is a code which will help you

这是一个可以帮助您的代码

 CGSize size = [[UIScreen mainScreen] bounds].size;
 CGFloat frameX = size.width;
 CGFloat frameY = size.height-30; //padding for UIpageControl

 UIScrollView  *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(offsetX, offsetY, frameX, frameY)];
 scrollView.pagingEnabled = YES;

scrollView.backgroundColor = [UIColor clearColor];
scrollView.contentSize = CGSizeMake(frameX, frameY);


[self.view addSubview: scrollView];

// let say you have array of image in imageArray

// 假设您在 imageArray 中有图像数组

for(int i = 0; i < [imageArray]; i++)
{
   UIImage *image = [UIImage imageNamed:[imageArray objectAtIndex:i]];
   imageView = [[UIImageView alloc] initWithImage:image];
   imageView.frame = CGRectMake(frameX * i, 0.0, frameX, frameY);
   [scrollView addSubview:imageView];
}

scrollView.contentSize = CGSizeMake(frameX*[imageArray count], frameY); 

please declare the variables according to scope of use. i have declared all the variables locally so that might not get confuse and also add the UIPageControl at the bottom of your viewcontroller

请根据使用范围声明变量。我已经在本地声明了所有变量，以免混淆，并在视图控制器的底部添加了 UIPageControl

Implement the delegate method of UIScrollView to the current Page indicator

实现 UIScrollView 的委托方法到当前 Page 指示器

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
  {
     float width = scrollView.frame.size.width;
     float xPos = scrollView.contentOffset.x+10;

     //Calculate the page we are on based on x coordinate position and width of scroll view
     pageControl.currentPage = (int)xPos/width;   
  }

where pageControl is UIPageControl added on bottom your viewcontroller

其中 pageControl 是 UIPageControl 添加在您的视图控制器底部

回答by Cintu

ScrollView:

滚动视图：

ScrollView is used to display the more number views/Objects. We can display those views by horizontal or vertical scrolling. You can handle zooming, panning, scrolling etc.

ScrollView 用于显示更多数量的视图/对象。我们可以通过水平或垂直滚动​​来显示这些视图。您可以处理缩放、平移、滚动等。

You can go through some of these tutorials Are there any good UIScrollView Tutorials on the net?

您可以阅读其中的一些教程 网上有没有好的 UIScrollView 教程？

https://developer.apple.com/library/ios/documentation/windowsviews/conceptual/UIScrollView_pg/CreatingBasicScrollViews/CreatingBasicScrollViews.html

https://developer.apple.com/library/ios/documentation/windowsviews/conceptual/UIScrollView_pg/CreatingBasicScrollViews/CreatingBasicScrollViews.html

Example Code for Scrollview:

滚动视图的示例代码：

UIScrollView *scroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0,self.view.frame.size.width, self.view.frame.size.height)];
//This will create a scrollview of device screen frame

You can enable the scrolling by

您可以通过以下方式启用滚动

    scroll.scrollEnabled = YES;

Example for adding 3 views to scrollview

向滚动视图添加 3 个视图的示例

 NSInteger numberOfViews = 3;
 for (int i = 0; i < numberOfViews; i++) {
      CGFloat xOrigin = i * self.view.frame.size.width;
      UIView *awesomeView = [[UIView alloc] initWithFrame:CGRectMake(xOrigin, 0, self.view.frame.size.width, self.view.frame.size.height)];
      awesomeView.backgroundColor = [UIColor colorWithRed:0.5/i green:0.5 blue:0.5 alpha:1];
      [scroll addSubview:awesomeView];
      [awesomeView release];
 }
 // 3 views added horizontally to the scrollview by using xOrigin.

The most important part in this for is to understand the xOrigin. This will place every UIView exactly where the previous UIView has stopped, in other words, each UIView will start at the end of the previous one. Now we got the scrollview with 3 views added horrizontally.

这其中最重要的部分是了解 xOrigin。这会将每个 UIView 准确地放置在前一个 UIView 停止的位置，换句话说，每个 UIView 都将从前一个 UIView 的末尾开始。现在我们得到了横向添加了 3 个视图的滚动视图。

Set the UIScrollView contentSize

设置 UIScrollView contentSize

scroll.contentSize = CGSizeMake(self.view.frame.size.width * numberOfViews, self.view.frame.size.height);

The contentSize is just the sum of the widths of the three UIViews, if the width of each UIView is 320, and we have three UIViews, your contentSize width will be 920.

contentSize 就是三个 UIView 的宽度之和，如果每个 UIView 的宽度是 320，而我们有三个 UIView，那么你的 contentSize 宽度就是 920。

[self.view addSubview:scroll];
[scroll release];
//Add scrollview to viewcontroller

Page Control:A Page control presents the user with a set of horizontal dots representing pages. The current page is presented as a white dot. The user can go from the current page to the next or to the previous page.

页面控件：页面控件向用户呈现一组代表页面的水平点。当前页面显示为一个白点。用户可以从当前页面转到下一页或上一页。

To enable paging you need to add

要启用分页，您需要添加

scroll.pagingEnabled = YES;
 pageControl = [[UIPageControl alloc] init]; //SET a property of UIPageControl
pageControl.frame = CGRectMake(100,self.view.frame.size.height-100,self.view.frame.size.width-200,100); 
pageControl.numberOfPages = 3; //as we added 3 diff views 
pageControl.currentPage = 0; 

Add delegate method of scrollview to implement the pagecontrol dots while scrolling

添加scrollview的delegate方法，实现滚动时的pagecontrol点

  - (void)scrollViewDidScroll:(UIScrollView *)scrollView {
          CGFloat pageWidth = self.scrollView.frame.size.width;
          int page = floor((self.scrollView.contentOffset.x – pageWidth / 2 ) / pageWidth) + 1; //this provide you the page number
          pageControl.currentPage = page;// this displays the white dot as current page
   }

Now you can see pagecontrol for scrollview. Hope you understand. Refer this too https://developer.apple.com/library/ios/documentation/uikit/reference/UIPageControl_Class/Reference/Reference.html

现在您可以看到滚动视图的页面控制。希望你能理解。也参考这个 https://developer.apple.com/library/ios/documentation/uikit/reference/UIPageControl_Class/Reference/Reference.html

回答by Steph Sharp

This is a very good tutorial by the Ray Wenderlich team on how to set up a paging scrollview: How To Use UIScrollView to Scroll and Zoom Content

这是 Ray Wenderlich 团队关于如何设置分页滚动视图的非常好的教程：How To Use UIScrollView to Scroll and Zoom Content

Apple's documentation also has an example of how to implement a paging scroll view: PhotoScroller

Apple 的文档中还有一个如何实现分页滚动视图的示例：PhotoScroller

My answerto this previous questionmay also be useful to you.

我对上一个问题的回答也可能对您有用。