iOS开发---轮播图模块（普通版）

最新推荐文章于 2023-11-24 09:32:54 发布

王俊祥

最新推荐文章于 2023-11-24 09:32:54 发布

阅读量874

点赞数

分类专栏： iOS 文章标签： ios开发图片轮播轮播

本文链接：https://blog.csdn.net/herewjxiang/article/details/47090533

版权

iOS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍如何使用UIScrollView实现iOS应用中的图片轮播效果。通过设置UIScrollView的属性和添加UIImageView来展示多个图片，并通过定时器自动切换显示不同的图片。此外，还实现了通过手势触发图片点击事件的功能。

摘要由CSDN通过智能技术生成

//  用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