您的位置:首页 > 移动开发 > IOS开发

iOS开发---轮播图模块(普通版)

2015-07-27 20:47 393 查看
//  用ScrollView实现图片轮播
//  ViewController.m
//  Slider-轮播
//
//  Created by JamesXiang on 15/7/21.
//  Copyright (c) 2015年 JamesXiang. All rights reserved.
//

#import "ViewController.h"

@interface ViewController () <UIScrollViewDelegate>

@property (nonatomic, strong) UIScrollView *scrollView;

@property (nonatomic, strong) UIPageControl *pageControl;

@property (nonatomic, assign) int sliderIndex;

@property (nonatomic, strong) NSTimer *timer;

@property (nonatomic, assign) int count;

@property (nonatomic, assign) double sliderWidth;

@property (nonatomic, assign) double sliderHeight;

@end

@implementation ViewController

- (void)viewDidLoad {

[super viewDidLoad];

// 只留一个入口,程序解耦
[self loadSlider];

}

- (void)loadSlider {

[self setParam]; // 设置相关参数

[self loadSliderContainer]; // 加载轮播容器

[self loadSliderItem]; // 加载轮播内容

[self loadPageController]; // 加载轮播

[self sliderBegin]; // 轮播开始

}

- (void)setParam {

self.sliderIndex = 0; // 起始索引

self.count = 5; // 轮播图片个数

self.sliderWidth = self.view.frame.size.width; // slider宽度

self.sliderHeight = 160; // slider高度

}

// 设置轮播容器
- (void)loadSliderContainer {

// scrollView可见宽度不能设置为内容的总宽度,会造成无法滚动

UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 20, self.sliderWidth, self.sliderHeight)];

// 设置分页滚动

scrollView.pagingEnabled = YES;

// 隐藏水平方向的滚动条

scrollView.showsHorizontalScrollIndicator = NO;

scrollView.delegate = self;

scrollView.contentSize = CGSizeMake(self.sliderWidth*self.count, self.sliderHeight);

self.scrollView = scrollView;

[self.view addSubview:scrollView];

}

// 设置轮播器内容
- (void)loadSliderItem {

for (int i = 0; i < self.count; i++) {

UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(self.sliderWidth * i, 0, self.sliderWidth, self.sliderHeight)];

imgView.userInteractionEnabled = YES;

// 为imageView添加手势识别监听器

[imgView addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(sliderClick)]];

UIImage *img = [UIImage imageNamed:[NSString stringWithFormat:@"slider%d.jpg", i]];

imgView.image = img;

[self.scrollView addSubview:imgView];

//      以下代码为用btn替换imageView,存在的问题是有时按钮的点击和滑动事件区分不开,导致可点击时不可滑动的问题,具体解决方案还没有想到

/*

UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(self.sliderWidth * i, 0, self.sliderWidth, self.sliderHeight)];

btn.tag = i;

[btn addTarget:self action:@selector(sliderClick:) forControlEvents:UIControlEventTouchUpInside];

[btn setBackgroundImage:[UIImage imageNamed:[NSString stringWithFormat:@"slider%d.jpg", i]] forState:UIControlStateNormal];

// 取消点击时的高亮状态
[btn setBackgroundImage:[UIImage imageNamed:[NSString stringWithFormat:@"slider%d.jpg", i]] forState:UIControlStateHighlighted];

[self.scrollView addSubview:btn];

*/

}

}

- (void)sliderClick {
NSLog(@"点击事件..."); // 这里可以利用index来控制每个图片的点击事件
}

// 加载pageControl
- (void)loadPageController {

UIPageControl *pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 160, self.sliderWidth, 20)];

pageControl.numberOfPages = self.count;

pageControl.currentPage = 0;

pageControl.hidesForSinglePage = YES;

_pageControl = pageControl;

[self.view addSubview:pageControl];

}

// 开始轮播
- (void)sliderBegin {

self.timer = [NSTimer scheduledTimerWithTimeInterval:2.5 target:self selector:@selector(autoChangeImg) userInfo:nil repeats:YES];

}

// 切换轮播图片和按钮
- (void)autoChangeImg {

self.sliderIndex++;

if (self.sliderIndex == 5) {

self.sliderIndex = 0;

}

[UIView animateWithDuration:0.8 animations:^{

self.scrollView.contentOffset = CGPointMake(self.sliderIndex * self.sliderWidth, 0);

[self updateSliderIndex];

}];

}

// 更新当前轮播索引
- (void)updateSliderIndex {

self.sliderIndex = self.scrollView.contentOffset.x / self.sliderWidth;

self.pageControl.currentPage = self.sliderIndex;

}

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {

[self.timer invalidate];

}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {

[self sliderBegin];

}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {

[self updateSliderIndex];

}

@end
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息