登录 立即注册
金钱:

Code4App-iOS开发-iOS 开源代码库-iOS代码实例搜索-iOS特效示例-iOS代码例子下载-Code4App.com

查看: 154|回复: 6

IOS基础UI之(九) UIPageControl结合UIScrollView实现分页效果

[复制链接]

291

主题

515

帖子

2312

金钱

手工艺人

发表于 2018-1-11 15:14:52 | 显示全部楼层 |阅读模式

        

        上一章已经介绍了UIScrollView,现在使用 UIPageControl结合UIScrollView实现分页效果。话不多说,马上看看!!!

        一: UIPageControl属性和方法

        

[Java] 查看源文件 复制代码
   //一共有多少页
    #property(nonatomic) NSInteger numberOfPages;
    
    //当前显示的页码
    #property(nonatomic) NSInteger currentPage;
    
    //只有一页时,是否需要隐藏页码指示器
    #property(nonatomic) BOOL hidesForSinglePage;
    
    //这个属性如果设置为YES,点击时并不会改变控制器显示的当前页码点,必须手动调用 - (void)updateCurrentPageDisplay;
    //这个方法,才会更新。
    #property(nonatomic) BOOL defersCurrentPageDisplay;
    
    //除当前页码外其他页码指示器的颜色
    #property(nullable, nonatomic,strong) UIColor *pageIndicatorTintColor
    
    //当前页码指示器的颜色
    #property(nullable, nonatomic,strong) UIColor *currentPageIndicatorTintColor
    
    //更新控制器当前页码
    - (void)updateCurrentPageDisplay;
    
    //用于页数会变化的情况下进行大小动态处理
    - (CGSize)sizeForNumberOfPages: (NSInteger)pageCount;



        

        

        

        二、图片轮播例子

        1.导入图片,storyboard布局UIPageControl结合UIScrollView(略)

        

        2.设置UIScrollVIew的内容,尺寸,设置可分页。设置UIPageControl的总页数

        

[Java] 查看源文件 复制代码
#property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
#property (weak, nonatomic) IBOutlet UIPageControl *pageControl;


- (void)viewDidLoad {
    [super viewDidLoad];
    
    
    CGFloat imgY = 0;
    CGFloat width = self.scrollView.frame.size.width;
    CGFloat height = self.scrollView.frame.size.height;
    // 1.添加5张图片到scrollView中    ZXHImageCount图片个数
    for (int i = 0; i[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p][p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p][p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        3.定义定时器[/size][/color][/size][/font][/p][p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        /**
 *  定时器
 */
#property(strong,nonatomic) NSTimer *timer;



/**
 *  定时器
 */
-(void)addTimer{
    self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:#selector(nextImage) userInfo:nil repeats:YES];
}

/**
 *  停止定时器
 */
-(void)stopTimer{
    [self.timer invalidate];
    self.timer = nil;
}

        

        



4.定时器调用显示下一张图片

        

[Java] 查看源文件 复制代码
-(void)nextImage{
    // 1.增加pageControl的页码
    int page = 0;
    if (self.pageControl.currentPage != ZXHImageCount - 1) {
        page = (int)self.pageControl.currentPage + 1;
    }
    
    // 2.计算scrollView滚动的位置
    CGFloat offSetX = page * self.scrollView.frame.size.width;
    CGPoint point =  CGPointMake(offSetX,0);
    //self.scrollView.contentOffset = point;
    [self.scrollView setContentOffset:point animated:YES];
    //线程
    [[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}

        

        5.手动拖拽停止定时器自动翻页,拖拽停止时开始自动翻页。

        

[Java] 查看源文件 复制代码
#pragma mark 代理方法
/**
 *  当scrollView正在滚动就会调用
 *
 *  #param scrollView
 */
-(void)scrollViewDidScroll: (UIScrollView *)scrollView{
    // 根据scrollView的滚动位置决定pageControl显示第几页
    CGFloat imageWidth = self.scrollView.frame.size.width;
    int page = (self.scrollView.contentOffset.x + imageWidth * 0.5)/imageWidth;
    self.pageControl.currentPage = page;
}


/**
 *  开始拖拽的时候调用
 */
-(void)scrollViewWillBeginDragging: (UIScrollView *)scrollView{
    //停止定时器
    [self stopTimer];
}

/**
 *  停止拖拽的时候调用
 */
-(void)scrollViewDidEndDragging: (UIScrollView *)scrollView willDecelerate: (BOOL)decelerate{
    //开启定时器
    [self addTimer];
}

        

        


</pre>                                               

23

主题

7073

帖子

1054

金钱

iOS大神

Rank: 6Rank: 6

分享大神

发表于 2018-1-11 15:15:41 | 显示全部楼层
膜拜大神~

16

主题

7094

帖子

1053

金钱

手工艺人

发表于 2018-1-11 15:17:11 | 显示全部楼层
写的真的很不错

20

主题

7096

帖子

2271

金钱

手工艺人

发表于 2018-1-11 15:18:59 | 显示全部楼层
虽不明,但觉厉...

14

主题

7049

帖子

1413

金钱

手工艺人

发表于 2018-1-11 15:21:39 | 显示全部楼层
学习...学习...

0

主题

7048

帖子

-519

金钱

限制会员

发表于 2018-1-11 15:27:41 | 显示全部楼层
虽不明,但觉厉...

20

主题

7072

帖子

2305

金钱

手工艺人

发表于 2018-1-11 15:31:09 | 显示全部楼层
感谢分享,楼主V5~
*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆

本版积分规则

关闭

每日头条

通过邮件订阅最新 Code4App 信息
上一条 /4 下一条

广告投放| Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )

快速回复 返回顶部 返回列表