iOS UI入门学习之Objective-C和Swift下UIPageControl的使用讲解

UIPageControl就是我们常说的小白点，常用于轮播图，与UIScrollView一起使用。效果如图：

Objective-C代码：

#import "ViewController.h"

@interface ViewController ()

@property(nonatomic,strong) UIScrollView * scrollView;
@property(nonatomic,strong) UIPageControl * pageControl;

@end

@implementation ViewController

- (void)viewDidLoad {
 [super viewDidLoad];
 // Do any additional setup after loading the view, typically from a nib.
 self.view.backgroundColor = [UIColor whiteColor];
 [self setupView];
}

-(void)setupView{

 [self.view addSubview:self.scrollView];
 [self.view addSubview:self.pageControl];
 for (int i = 0; i < 4; i ++) {
  UIView * view = [[UIView alloc] initWithFrame:CGRectMake(self.view.frame.size.width*i, 0, self.view.frame.size.width, self.view.frame.size.height)];
  if (i == 0) {
view.backgroundColor = [UIColor orangeColor];
  }else if (i == 1){
view.backgroundColor = [UIColor yellowColor];
  }else if (i == 2){
view.backgroundColor = [UIColor magentaColor];
  }else{
view.backgroundColor = [UIColor cyanColor];
  }
  [self.scrollView addSubview:view];
 }
}

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
 //设置当前显示的小点的索引
 self.pageControl.currentPage = scrollView.contentOffset.x/self.view.frame.size.width;
}

-(UIScrollView *)scrollView{
 if (!_scrollView) {
  _scrollView = [[UIScrollView alloc] initWithFrame:self.view.frame];
  _scrollView.contentSize = CGSizeMake(self.view.frame.size.width*4, self.view.frame.size.height);
  _scrollView.showsHorizontalScrollIndicator = NO;
  _scrollView.pagingEnabled = YES;
  _scrollView.delegate = self;
 }
 return _scrollView;
}

-(UIPageControl *)pageControl{
 if (!_pageControl) {
  //初始化
  _pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, self.view.frame.size.height - 80, self.view.frame.size.width, 20)];
  //设置总数量，一般与ScrollView的页数相同
  _pageControl.numberOfPages = 4;
  //设置不是当前页的小点颜色
  _pageControl.pageIndicatorTintColor = [UIColor whiteColor];
  //设置当前页的小点颜色
  _pageControl.currentPageIndicatorTintColor = [UIColor redColor];
 }
 return _pageControl;
}

- (void)didReceiveMemoryWarning {
 [super didReceiveMemoryWarning];
 // Dispose of any resources that can be recreated.
}

@end

Swift代码：

import UIKit

class ViewController: UIViewController,UIScrollViewDelegate {

 override func viewDidLoad() {
  super.viewDidLoad()
  // Do any additional setup after loading the view, typically from a nib.
  self.setupView()
 }

 func setupView() {
  self.view.addSubview(self.scrollView)
  self.view.addSubview(self.pageControl)
  let viewSize = self.view.frame.size

  for i in 0...3 {
let view = UIView.init(frame: CGRect.init(x:viewSize.width*CGFloat(i), y: 0, width: viewSize.width, height: viewSize.height))
if i == 0{
 view.backgroundColor = UIColor.orange
}else if i == 1{
 view.backgroundColor = UIColor.yellow
}else if i == 2{
 view.backgroundColor = UIColor.magenta
}else{
 view.backgroundColor = UIColor.cyan
}
self.scrollView.addSubview(view)
  }
 }

 func scrollViewDidScroll(_ scrollView: UIScrollView) {
  //设置当前显示的小点的索引
  self.pageControl.currentPage = Int(self.scrollView.contentOffset.x/self.view.frame.size.width)
 }

 lazy var scrollView: UIScrollView = {
  let sc = UIScrollView.init(frame: self.view.frame)
  sc.contentSize = CGSize.init(width: self.view.frame.size.width*4, height: self.view.frame.size.height)
  sc.showsHorizontalScrollIndicator = false
  sc.isPagingEnabled = true
  sc.delegate = self
  return sc
 }()

 lazy var pageControl: UIPageControl = {
  //初始化
  let page = UIPageControl.init(frame: CGRect.init(x: 0, y: self.view.frame.size.height - 80, width: self.view.frame.size.width, height: 20))
  //设置总数量，一般与ScrollView的页数相同
  page.numberOfPages = 4
  //设置不是当前页的小点颜色
  page.pageIndicatorTintColor = UIColor.white
  //设置当前页的小点颜色
  page.currentPageIndicatorTintColor = UIColor.red
  return page
 }()

 override func didReceiveMemoryWarning() {
  super.didReceiveMemoryWarning()
  // Dispose of any resources that can be recreated.
 }
}