IOS-UIScrollView滚动图片的简单实现

本文介绍了如何在iOS应用中使用UIScrollView控件来实现图片滚动效果。首先讲解了UIScrollView的基本概念和用途,接着详细阐述了如何将图片添加到UIScrollView中,设置contentSize以确定滚动范围,并调整相关属性实现滚动和分页效果。最后,通过示例代码展示了如何在UIScrollView中添加多个图片并自动轮播。

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

iOS开发UI篇—UIScrollView控件的基本使用

一、知识点简单介绍

1.UIScrollView控件是什么?

(1)移动设备的屏幕⼤大⼩小是极其有限的,因此直接展⽰示在⽤用户眼前的内容也相当有限

(2)当展⽰示的内容较多,超出⼀一个屏幕时,⽤用户可通过滚动⼿手势来查看屏幕以外的内容

(3)普通的UIView不具备滚动功能,不能显⽰示过多的内容

(4)UIScrollView是一个能够滚动的视图控件,可以⽤用来展⽰示⼤大量的内容,并且可以通过滚 动查看所有的内容

 (5)  举例:手机上的“设置”、其他⽰示例程序 

2.UIScrollView的简单使用

(1)将需要展⽰的内容添加到UIScrollView中 

(2)设置UIScrollView的contentSize属性,告诉UIScrollView所有内容的尺⼨寸,也就是告诉 它滚动的范围(能滚多远,滚到哪⾥里是尽头) 

3.属性

(1)常用属性:

1)@property(nonatomic)CGPointcontentOffset; 这个属性⽤用来表⽰示UIScrollView滚动的位置

2)@property(nonatomic)CGSizecontentSize;这个属性⽤用来表⽰示UIScrollView内容的尺⼨寸,滚动范围(能滚多远)

3)@property(nonatomic)UIEdgeInsetscontentInset; 这个属性能够在UIScrollView的4周增加额外的滚动区域 

(2)其他属性:

1)@property(nonatomic) BOOL bounces;  设置UIScrollView是否需要弹簧效果 

2)@property(nonatomic,getter=isScrollEnabled)BOOLscrollEnabled; 设置UIScrollView是否能滚动 

3)@property(nonatomic) BOOL showsHorizontalScrollIndicator; 是否显⽰示⽔水平滚动条 

4)@property(nonatomic) BOOL showsVerticalScrollIndicator; 是否显⽰示垂直滚动条

二、代码实现

#import "ViewController.h"


@interface ViewController () <UIScrollViewDelegate>


@property (weak, nonatomic) IBOutletUIScrollView *scrollView;

@property (weak, nonatomic) IBOutletUIPageControl *pageControl;


/**

 *  定义属性来记录当前NSTimer对象

 */

@property (nonatomic,strong) NSTimer *timer;

@end


@implementation ViewController


- (void)viewDidLoad {

    [superviewDidLoad];

   

//  1.scrollView中添加图片

//  取出scrollViewsize

   CGSize scrollSize = self.scrollView.frame.size;

  

   for (int i =0; i < 5; i++) {

       UIImageView *imageView = [[UIImageViewalloc] init];

       CGFloat scrollWidth = scrollSize.width;

       CGFloat imageX = scrollWidth * i;

       CGFloat imageY = 0;

       CGFloat imageW = scrollWidth;

       CGFloat imageH = scrollSize.height;

        imageView.frame =CGRectMake(imageX, imageY, imageW, imageH);

        

       NSString *imageName = [NSStringstringWithFormat:@"img_%02d",i+1];

        

        imageView.image = [UIImageimageNamed:imageName];

    

        [self.scrollViewaddSubview:imageView];

    }

//  2.设置contentSize

//  不支持竖直滚动就高度设置为0

   self.scrollView.contentSize =CGSizeMake(scrollSize.width *5, 0);

 

//  出现分页效果,YES表示有分页效果,NO没有分页效果,默认NO

    self.scrollView.pagingEnabled =YES;

//  去掉水平滚动条

    self.scrollView.showsHorizontalScrollIndicator =NO;

    

// 让控制器成为scrollView的代理

//  设置scrollView的代理为self

   self.scrollView.delegate =self;

    

#pragma mark - 自动轮播代码开始

/*

//  创建定时器

//  NSTimeInterval 时间间隔 单位s

//  调用target这对象的selector方法

//  userInfo 数据,如果不需要就设置为nil

//  repeats 是否重复执行这个方法,YES表示重复执行

    NSTimer *timer = [NSTimer timerWithTimeInterval:3 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];

//  添加到运行循环中

//  NSRunLoopCommonModes 与处理用户事件处于同一个级别

   [[NSRunLoop mainRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];

    

    

//  1.创建NSTimer对象

//  2.把这个NSTimer添加主运行循环中以NSDefaultRunLoopMode的模式

//    self.timer  = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];

*/

    

    [selfstartTimer];

}



- (void) startTimer

{

 //此处必须要判断不然会使图片滚动得速度加快无法控制


 if (self.timer !=nil) {

           return;

        }


   self.timer = [NSTimertimerWithTimeInterval:3target:selfselector:@selector(nextPage)userInfo:nilrepeats:YES];

    //  添加到运行循环中

    //  NSRunLoopCommonModes 与处理用户事件处于同一个级别

    [[NSRunLoop mainRunLoop] addTimer:self.timerforMode:NSRunLoopCommonModes];

}



- (void) nextPage

{

  

//  获取当前页

   NSInteger currentPage = self.pageControl.currentPage;

//  计算下一页

   NSInteger nextPage = -1;

   if (currentPage == self.pageControl.numberOfPages -1) {

        nextPage =0;

    }else{

        nextPage = currentPage+1;

    }

//  计算contentOffsetX的值

   CGFloat contextOffsetX  = nextPage * self.scrollView.frame.size.width;

    

   [UIViewanimateWithDuration:1animations:^{

          self.scrollView.contentOffset =CGPointMake(contextOffsetX, 0);

   }];

    


}


#pragma mark scrollView的代理方法

// 当用户拽住scrollView中内容时候会执行这个方法

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView

{

//  invalidate 让定时器失效

//  如果调用这个方法,就能再次使用了

    [self.timerinvalidate];

 self.timer =nil;


}


// 当用户已经停止拖拽了(当用户手从界面抬起的时候)

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

{

//  创建一个新NSTimer的对象

    //  1.创建NSTimer对象

    //  2.把这个NSTimer添加主运行循环中以NSDefaultRunLoopMode的模式

//    self.timer  = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];

    

    

    [selfstartTimer];

}



// 监听scrollView的滚动过程


- (void)scrollViewDidScroll:(UIScrollView *)scrollView

{

// 获取滚动位置的x坐标

  CGFloat offsetX = scrollView.contentOffset.x;

// 计算当前是第几页

// round(double) 四舍五入

  CGFloat page = round(offsetX / scrollView.frame.size.width);

//    NSLog(@"%lf",page);

    

  if (page != self.pageControl.currentPage) {

        //  current 当前的

       self.pageControl.currentPage = page;

    

    }


//    self.pageControl.numberOfPages  用于设置一共有多少页的

   

}



@end




程序执行的效果图




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值