UI基于UIScrollView实现图片组手动轮换和自动轮播

#import "RootViewController.h"

@interface RootViewController (){

    UIPageControl * _pageControl;

    NSTimer * _timer;

    UIScrollView * scrV;

    UILabel * label;
}

@end

@implementation RootViewController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    [self creatScrollView];
    [self creatPageController];
   [self addTimer];
    // Do any additional setup after loading the view.
}//加入定时器,在定时器方法中执行换页操作,用于实现自动轮播
-(void)addTimer{

    _timer=[NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(toNextPage) userInfo:nil repeats:YES];
}
-(void)toNextPage{

    NSInteger page= _pageControl.currentPage;

   //此处以下使用的判断方法,都是基于界面的转换,将最后面补充的第一张图片用第一张图片顶掉,造成视觉的误差,偷梁换柱。
    if (page==0) {

        scrV.contentOffset=CGPointMake(0, 0);

    }
    page++;

    CGFloat X=page*self.view.frame.size.width;

    [UIView animateWithDuration:1 animations:^{

    scrV.contentOffset=CGPointMake(X, 0);
    }];

    if(page==8){

        page=0;
    }
     _pageControl.currentPage=page;
    label.text=[NSString stringWithFormat:@"%d/8",page+1];
}//定义页面控件,使得页面控件跟随图片转换
-(void)creatPageController{

    _pageControl =[[UIPageControl alloc]initWithFrame:CGRectMake(0, 400, 320, 40)];

    _pageControl.backgroundColor=[UIColor blackColor];
        //页面控件透明度
    _pageControl.alpha=0.5;
        //定义页面控件显示白点的个数,实际图片为9张,最后一张与第一张一致,因为只实现从左往右,只需在最后添加一张。如需从右往左,即可在第一张前补充一张为最后一张即可,改变初始偏移量就可以实现多个方向转换
    _pageControl.numberOfPages=8;
        //虽然实际图片为9张或者10张,但真正要展览的图片只有8张,所以page的页码仍为8,开始展览的第一张一定为0;
    _pageControl.currentPage=0;

    [self.view addSubview:_pageControl];
    //定义页码,此处不写无关
    label=[[UILabel alloc]initWithFrame:CGRectMake(270, 460, 50, 20)];
    label.text=@"1/8";
    label.backgroundColor=[UIColor cyanColor];
    label.textAlignment=NSTextAlignmentCenter;
    [self.view addSubview:label];
}//1??初始化scrollView,加载图片,我使用的动漫00.jpg--动漫08.jpg,所以可以循环创建
-(void)creatScrollView{
     //定义与屏幕大小等高等宽的scrollView
     scrV=[[UIScrollView alloc]initWithFrame:self.view.bounds];

    //加载图片
    for(int i = 0; i < 9; i++){

        UIImageView * imageV=[[UIImageView alloc]initWithFrame:CGRectMake(self.view.frame.size.width*i, 0, 320,self.view.frame.size.height)];

        [imageV setImage:[UIImage imageNamed:[NSString stringWithFormat:@"动漫%02d.jpg",i+1]]];

        [scrV addSubview:imageV];

    }
    //定义scrollView的属性
    scrV.contentSize=CGSizeMake(self.view.frame.size.width*9, 0);
        //定义初始偏移量 如果第一张前面加了最后一张,那就把初始改为320,0;
    scrV.contentOffset=CGPointMake(0, 0);

    //按页面跳转     scrV.pagingEnabled=YES;
       scrV.showsVerticalScrollIndicator=NO;
        //设置代理
    scrV.delegate=self;

    [self.view addSubview:scrV];

}
#pragma mark **UIScrollViewDelegate**
//在减速结束的方法里,判断页面位置,使页面控件跟随图片变换  此处用于手动轮换。
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{

    NSLog(@"减速");
    NSInteger page=scrV.contentOffset.x/320;

    if(page==8){

        scrollView.contentOffset=CGPointMake(0, 0);
        page=0;

    }
    _pageControl.currentPage=page;

}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

UIScrollView滚动条控件   大多应用于手机软件中的图片展览

时间: 2024-11-07 19:50:47

UI基于UIScrollView实现图片组手动轮换和自动轮播的相关文章

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

原文:http://www.cnblogs.com/wendingding/p/3763527.html iOS开发UI篇—UIScrollView控件实现图片轮播 一.实现效果 实现图片的自动轮播            二.实现代码 storyboard中布局 代码: 1 #import "YYViewController.h" 2 3 @interface YYViewController () <UIScrollViewDelegate> 4 @property (w

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

一.实现效果 实现图片的自动轮播            二.实现代码 storyboard中布局 代码: 1 #import "YYViewController.h" 2 3 @interface YYViewController () <UIScrollViewDelegate> 4 @property (weak, nonatomic) IBOutlet UIScrollView *scrollview; 5 /** 6 * 页码 7 */ 8 @property (w

10款基于jQuery的图片滑块焦点图插件

1.Material UI – Material Design CSS 框架 Material Design 是谷歌推出的全新的设计理念,采用大胆的色彩.流畅的动画播放,以及卡片式的简洁设计.Material Design 风格的设计拥有干净的排版和简单的布局,容易理解,内容才是焦点.Material UI 是一个 CSS 框架和一组实现谷歌 Material Design 设计规范的 React 组件.可以作为 NPM 安装包,使用 browserify 和 reactify 的依赖管理和 J

UIScrollView实现图片轮播器及其无限循环效果

图片轮播器: 一.实现效果 实现图片的自动轮播            二.实现代码 storyboard中布局 代码: 1 #import "YYViewController.h" 2 3 @interface YYViewController () <UIScrollViewDelegate> 4 @property (weak, nonatomic) IBOutlet UIScrollView *scrollview; 5 /** 6 * 页码 7 */ 8 @prop

iOS开发基础-UIScrollView实现图片缩放

当用户在 UIScrollView 上使用捏合手势时, UIScrollView 会给 UIScrollViewDelegate 协议发送一条消息,并调用代理的 viewForZoomingInScrollView: 方法,该方法返回的控件就是需要进行缩放的控件. 实现缩放功能的步骤: 1)让控制器遵守 UIScrollView 的代理协议 UIScrollViewDelegate : 2)为 UIScrollView 设置代理, _scrollView.delegate = self; : 3

一款基于jQuery的图片场景标注提示弹窗特效

爱编程小编今天给大家分享一款基于jQuery的图片场景标注提示弹窗特效,这款实例适合在图片上标注某个物件,单击弹出详情说明,兼容360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗,不支持IE8及以下浏览器.效果非常不错.效果如下: 在线预览   源码下载 实现的过程. 这款实例要引用jquery和jquery ui库,还有一个实现的main.js库.需上的朋友可以点击上现的下载按钮下载来看看. html代码部分: <div class="container

基于ORB-SLAM2的图片识别

基于ORB-SLAM2的图片识别,其功能是首先运行ORB-SLAM2,在运行过程中调起另一个线程进行图像识别,识别成功后在图片上渲染AR中的立方体模型. 识别过程主要基于ORB-SLAM2中的BoW算法,同样使用DBoW2库和ORB特征以及词汇树视觉词典.其主要流程可以概括为:运行ORB-SLAM2,加载ORB词典,然后读取训练图像进行BoW训练,完成之后就是SLAM的过程了,使用Pangolin做的UI界面,开启图像识别之后,线程会取当前帧和训练图像做BoW向量的相似性打分,我的策略是当当前帧

UIScrollView缩放图片操作

要想ScrollView缩放,必须告诉缩放那个控件,它自身的大小是不会缩放的: 并且ScrollView只能缩放自己内部的子控件: 1:这时就要用到代理,代理告诉ScrollView缩放哪个控件.(设置代理对象) 2:要想成为ScrollView的代理就要遵守协议:UIScrollViewDelegate (遵守协议) 3:成为代理后实现协议里的方法:viewForZoomingInScrollView;这个方法是返回要缩放的子控件,就是代理告诉ScrollView哪个控件要缩放 或者说这个方法

基于h5的图片无刷新上传(uploadifive)

基于h5的图片无刷新上传(uploadifive) uploadifive简介 了解uploadify之前,首先了解来一下什么是uploadify,uploadfy官网,uploadify和uploadifive是一家的,他们都是基于jquery的插件,都支持多文件异步上传,支持显示上传进度,不同的是uploadify基于swfUpload这一开源无刷新上传插件开发,基于flash,而uploadifive则是基于html5,不依赖于flash. 基于他们的不同点,我们可以根据自己的需求来进行选