1. 程式人生 > >iOS UI入門——Objective-C和Swift下UIPageControl的使用

iOS UI入門——Objective-C和Swift下UIPageControl的使用

UIPageControl就是我們常說的小白點,常用於輪播圖,與UIScrollView一起使用。效果如圖:
這裡寫圖片描述

Objective-C程式碼:

#import "ViewController.h"

@interface ViewController ()<UIScrollViewDelegate>

@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.
    }
}