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

本文介绍了如何使用UIPageControl和UIScrollView实现轮播效果。通过Objective-C和Swift两种语言的示例代码,展示了如何设置页面指示器的颜色及数量,并监听UIScrollView滚动事件来更新当前页面。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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.
    }
}
最新SWIFT 4.0版自定义PageControl,椭圆,空心圆,图片点 刚开始做swift项目,可用资源少而且每个swift版本变化太大,以前的都不能拿来直接用,现在我参考一个object-C的PageControl自己做了一个swift版的, 参考OC资源链接:https://github.com/hackxhj/EllipsePageControl, 非常感谢原作者。 本项目在原OC的功能基础上进行的改进,增加了自定义点的宽度,点的layer,不是当前点的图片等功能 基本能满足大部分的需求,写的很简单,大家一看就懂,欢迎大家使用 由于水平有限,项目中有改进之处忘各位大神给与指点,以求不断完善 本人联系方式:wei287030375@sina.com 如果觉得还可以的话给个star吧,也是对以后进行创作的一种鼓励,谢谢 效果图: image 以下是部分代码: class WEIPageControl: UIControl { var localNumberOfPages = NSInteger()//分页数量 var localCurrentPage = NSInteger()//当前点所在下标 var localPointSize = CGSize()//点的大小 var localPointSpace = CGFloat()//点之间的间距 var localOtherColor = UIColor()//未选中点的颜色 var localCurrentColor = UIColor()//当前点的颜色 var localOtherImage: UIImage?//未选中点的图片 var localCurrentImage: UIImage?//当前点的图片 var localIsSquare = Bool()//是否是方形点 var localCurrentWidthMultiple = CGFloat()//当前选中点宽度与未选中点的宽度的倍数 var localOtherBorderColor: UIColor?//未选中点的layerColor var localOtherBorderWidth: CGFloat?//未选中点的layer宽度 var localCurrentBorderColor: UIColor?//未选中点的layerColor var localCurrentBorderWidth: CGFloat?//未选中点的layer宽度 var clickIndex: ((_ result: NSInteger?) -> ())? 在ViewController中使用 //方形点举例 class ViewController: UIViewController, UIScrollViewDelegate { pageC pageControl3.frame = CGRect.init(x: left, y: scrollView3.frame.maxY, width: width, height: 20) pageControl3.numberOfPages = pageCount//总页数 pageControl3.isSquare = true//设置为方型点 pageControl3.currentWidthMultiple = 2.5//当前点的宽度为其他点的2.5倍 pageControl3.currentColor = UIColor.red pageControl3.otherColor = UIColor.blue pageControl3.pointSize = CGSize.init(width: 14, height: 6)//方点的size pageControl3.clickPoint { (index) in//方点的点击事件 self.scrollView3.setContentOffset(CGPoint.init(x: width * CGFloat(index!), y: 0), animated: true) } self.view.addSubview(pageControl3) 代码用起来就是这么简单,欢迎大家使用, 本项目github地址:https://github.com/wei287030375/WEIPageControl
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值