iOS UIScrollView实用之图片轮播 —— HERO博客

原创 2015年11月20日 23:15:37

上一篇简述了UIScrollView的属性及方法,本篇实际应用制作图片轮播效果。

具体属性及方法可以参考上一篇UIScrollView简介:UIScrollView简介

首先看一下效果图:

   

代码如下:

#import "ViewController.h"

#define KWidth 320
#define KHeight 180

@interface ViewController ()<UIScrollViewDelegate>

@property (nonatomic, strong) UIScrollView *scrollView;
@property (nonatomic, weak) UIPageControl *pageControl;
@property (nonatomic, strong) NSTimer *timer;
@property (nonatomic, strong) NSArray *imageArray;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //初始化图片数组,展示4张图片(ABCD),首尾多添加2张(DABCDA)
    self.imageArray =  @[@"04.jpg", @"01.jpg", @"02.jpg", @"03.jpg", @"04.jpg", @"01.jpg"];
    
    //创建scrollView
    [self createScrollView];
    
    //创建pageControl
    [self createPageControl];
    
    //创建定时器
    [self createNSTimer];
}

- (void)createScrollView
{
    //初始化
    UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(28, 50, KWidth, KHeight)];
    //循环添加图片
    for (int i = 0; i < _imageArray.count; i++) {
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(KWidth * i, 0, KWidth, KHeight)];
        imageView.image = [UIImage imageNamed:_imageArray[i]];
        [scrollView addSubview:imageView];
    }
    //设置可以滚动的区域
    scrollView.contentSize = CGSizeMake(KWidth * _imageArray.count, 0);
    //设置当前位置,图片应为第二张
    scrollView.contentOffset = CGPointMake(KWidth, 0);
    //设置代理
    scrollView.delegate = self;
    //整页翻动
    scrollView.pagingEnabled = YES;
    //隐藏水平方向滚动条
    scrollView.showsHorizontalScrollIndicator = NO;
    
    [self.view addSubview:scrollView];
    self.scrollView = scrollView;
}

- (void)createPageControl
{
    //初始化
    UIPageControl *pageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(0, 0, 80, 30)];
    //中心位置
    pageControl.center = CGPointMake([UIScreen mainScreen].bounds.size.width * 0.5, CGRectGetMaxY(self.scrollView.frame) - 10);
    //总页数
    pageControl.numberOfPages = 4;
    //当前页
    pageControl.currentPage = 0;
    //取消交互
    pageControl.userInteractionEnabled = NO;
    
    [self.view addSubview:pageControl];
    self.pageControl = pageControl;
}

- (void)createNSTimer
{
    self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0f target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
    [[NSRunLoop mainRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}

- (void)nextPage
{
    NSInteger currentPage = self.pageControl.currentPage;
    currentPage++;
    if (currentPage == 5) {
        currentPage = 0;
    }
    [self.scrollView setContentOffset:CGPointMake((currentPage + 1) * KWidth, 0) animated:YES];
}

#pragma mark - UIScrollViewDelegate
//滚动时调用
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    int index = scrollView.contentOffset.x / KWidth + 0.5;
    
    if (index > 0 && index < 5) {
        _pageControl.currentPage = index - 1;
        
    }else if (scrollView.contentOffset.x == KWidth * 5) {
        _pageControl.currentPage = 0;
        scrollView.contentOffset = CGPointMake(KWidth, 0);
        
    }else if (scrollView.contentOffset.x == 0) {
        _pageControl.currentPage = 3;
        scrollView.contentOffset = CGPointMake(KWidth * 4, 0);
    }
}
//开始拖拽视图调用
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    [self.timer invalidate];
    self.timer = nil;
}
//完成拖拽调用
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    [self createNSTimer];
}


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

iOS UICollectionView实现图片轮播 —— HERO博客

iOS UICollectionView实现图片轮播。

ios图片轮播 (基础篇——UIScrollView实现方式)

人生不发返程的车票,一旦出发了,决不能返回。         人生只有一次,无悔的人生才是成功的人生,不要期待与奢望 “下一次” 如何。       &...

iOS开发UI篇—UIScrollView控件实现图片轮播

iOS开发UI篇—UIScrollView控件实现图片轮播 一、实现效果 实现图片的自动轮播            二、实现代码 storyboard中布局 ...

iOS开发UI篇—UIScrollView控件实现图片轮播

一、实现效果 实现图片的自动轮播            二、实现代码 storyboard中布局 代码: 1 #import "YYViewController.h" ...

iOS控件封装-(UIScrollView)图片轮播器

首先看一下效果吧: 文件一:PictureCarouselView.himport define SELF_WIDTH self.scrollView.frame.siz...

iOS开发UI基础—29UIScrollView控件实现图片轮播

iOS开发UI篇—UIScrollView控件实现图片轮播 一、实现效果 实现图片的自动轮播            二、实现代码 storyboard中布局 代码: ...

iOS UIScrollView实现图片轮播器注意点

UIScrollView实现图片轮播器注意点 具体代码如下: // ViewController.m// AZScrollViewTest//// Created by azhang on ...

iOS UITextField实用实现手机账号344格式 —— HERO博客

UITextField的属性、方法及使用。实用实现手机3位4位4位效果。

iOS UITextField实用限制字符长度(中英文)—— HERO博客

UITextField实用,实现限制统计字符长度,中文汉字及中文符号算两位,英文和数字算一位。
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)