iOS-UIScrollView和UIPageControl的综合实力,滚动图,轮播图

本代码主要实现图片之间的切换



目录结构

代码

ViewController.m文件


#import "ViewController.h"

@interface ViewController ()
@property(strong,nonatomic)UIScrollView *scrollView;
@property(strong,nonatomic)UIPageControl *pageControl;
//存储图片
@property(strong,nonatomic)UIImageView *firstIamges;
@property(strong,nonatomic)UIImageView *secondImage;
@property(strong,nonatomic)UIImageView *thirdImage;
//存储图片的集合
@property(strong,nonatomic)NSMutableArray *imageArray;
//当前页码
@property(assign,nonatomic)int currentPage;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.scrollView=[[UIScrollView alloc]initWithFrame:CGRectMake(0, 20,WIDTH , HEIGHT)];
    self.scrollView.contentSize=CGSizeMake(WIDTH*3, 0);
    self.scrollView.pagingEnabled=YES;
    self.scrollView.delegate=self;
    self.scrollView.showsHorizontalScrollIndicator=NO;
    [self.view addSubview:self.scrollView];

    self.pageControl=[[UIPageControl alloc]initWithFrame:CGRectMake(WIDTH/2.7, 300, WIDTH/5, 20)];

    //设置当前页
    self.pageControl.currentPage=0;
    //分页
    self.pageControl.numberOfPages=5;
    //指定页码的颜色
    self.pageControl.currentPageIndicatorTintColor=[UIColor redColor];
    self.pageControl.pageIndicatorTintColor=[UIColor blueColor];
    [self.view addSubview:self.pageControl];

    //初始化存储图片的集合
    self.imageArray=[NSMutableArray array];
    for (int i=1; i<6; i++) {
        UIImage *image=[UIImage imageNamed:[NSString stringWithFormat:@"%d",i]];
        [self.imageArray addObject:image];
    }

    self.firstIamges=[[UIImageView alloc]init];
    self.secondImage=[[UIImageView alloc]init];
    self.thirdImage=[[UIImageView alloc]init];

    //当前页码
    self.currentPage=0;
    [self reloadImage];

}
-(void)reloadImage{
    //第一种情况,第一页
    if(self.currentPage==0){
        self.firstIamges.image=[self.imageArray lastObject];
        self.secondImage.image=[self.imageArray objectAtIndex:self.currentPage];
        self.thirdImage.image=[self.imageArray objectAtIndex:self.currentPage+1];
    }
    //第二种情况 最后一页
    else if(self.currentPage==self.imageArray.count-1){
        self.firstIamges.image=[self.imageArray objectAtIndex:self.currentPage-1];
        self.secondImage.image=[self.imageArray objectAtIndex:self.currentPage];
        self.thirdImage.image=[self.imageArray objectAtIndex:0];
    }
    //中间页
    else{

        self.firstIamges.image=[self.imageArray objectAtIndex:self.currentPage-1];
        self.secondImage.image=[self.imageArray objectAtIndex:self.currentPage];
        self.thirdImage.image=[self.imageArray objectAtIndex:self.currentPage+1];
    }

    self.firstIamges.frame=CGRectMake(0, 0, WIDTH, 300);
    self.secondImage.frame=CGRectMake(WIDTH, 0, WIDTH, 300);
    self.thirdImage.frame=CGRectMake(WIDTH*2, 0, WIDTH, 300);

    [self.scrollView addSubview:self.firstIamges];
    [self.scrollView addSubview:self.secondImage];
    [self.scrollView addSubview:self.thirdImage];

    self.scrollView.contentOffset=CGPointMake(WIDTH, 0);
}

#pragma mark -Scrollview Delegate
//在滚动结束状态换图
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    float x=self.scrollView.contentOffset.x;

    //向左
    if (x<0||x==0) {
        if (self.currentPage==0) {
            self.currentPage=(int)self.imageArray.count-1;
        }else{
            self.currentPage--;
        }

    }
        //向右

        if(x>WIDTH*2||x==WIDTH*2){
            if (self.currentPage==(int)self.imageArray.count-1) {
                self.currentPage=0;
            }else{
                self.currentPage++;
            }
        }

    self.pageControl.currentPage=self.currentPage;
    [self reloadImage];

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

@end

ViewController.h文件

#import <UIKit/UIKit.h>
#define WIDTH self.view.frame.size.width
#define HEIGHT self.view.frame.size.height
@interface ViewController : UIViewController<UIScrollViewDelegate>

@end

效果图



时间: 2024-08-04 13:36:11

iOS-UIScrollView和UIPageControl的综合实力,滚动图,轮播图的相关文章

带无缝滚动的轮播图(含JS运动框架)

今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框架的代码如下: 1 //获取样式 2 function getStyle(obj,attr){ 3 if(obj.currentStyle){ 4 return obj.currentStyle[attr]; 5 }else{ 6 return getComputedStyle(obj,false)

用原生的javascript 实现一个无限滚动的轮播图

说一下思路:和我上一篇博客中用JQ去写的轮播图有相同点和不同点 相同点: 首先页面布局是一样的 同样是改变.inner盒子的位置去显示不同的图片 不同点: 为了实现无限滚动需要多添加两张重复的图片 左右切换和前面的方法有所不同,前面是获取当前的索引值乘以-600px当做位移距离,现在是需要获取当前.inner的位置来加上或者减去-600来实现 下面来一步步的去实现轮播图: 首先是html <!DOCTYPE html> <html lang="en"> <

轮播图---左右切换无长滚动效果轮播图-中级难度版

左右切换无长滚动轮播图思路:首先设有全局变量position(确定当前图片是第几张),arr数组:存放图片地址,方向:direction, 及lis小圆点数组,prev,记录小圆点的前一个, moveBool是否进入运动函数等1.点击事件:点击左边的leftBn,设置direction="right",position--,在这要确定position不能超出数组长度范围, 超出要重新赋值,点击小圆点把小圆点的当前是lis数组中的第几个赋值给position,然后图片生成2.图片生成:图

带无缝滚动的轮播图(含JS运动框架)-简洁版

昨天写的神逻辑,今天终于解决,经过大家的商讨,终于研究出来一套简单的代码!!! js代码如下: 1 <script> 2 window.onload = function() { 3 var oWrap = document.getElementById("wrap"); 4 var oBox = document.getElementById("box"); 5 var aBox = oBox.getElementsByTagName("li

【学习ios之路:UI系列】实现轮播图效果(UIImageView,UIScrollView,UIPageControl,NSTimer相结合)

实现效果,在不点击的情况下,自定滚动,点击时,停止.如下图 部分代码如下: //调用NSTimer方法,自定计时 - (void)autoScroll { self.timer = [NSTimer scheduledTimerWithTimeInterval:1.5 target:self  selector:@selector(scrollToRight) userInfo:nil repeats:YES]; } //实现触发方法 - (void)scrollToRight { [UIVie

iOS UIScrollView 实现轮播图

利用UIScrollView实现轮播图 , 需要三个ImageView轮流切换,具体原理就不讲解了. 具体实现代码如下: <span style="font-size:24px;">// // ViewController.m // PhotosShowDemo // // Created by 帝炎魔 on 16/5/29. // Copyright © 2016年 帝炎魔. All rights reserved. // #import "ViewContro

一步一步拆解一个简单的iOS轮播图(三图)

导言(可以不看): 不吹不黑,也许是东半球最简单的iOS轮播图拆分注释(讲解不敢当)了(tree new bee).(一句话包含两个人,你能猜到有谁吗?提示:一个在卖手机,一个最近在卖书)哈哈... 我第一次项目中需要使用轮播图的时候我是用的别人写好的一个轮子,那个轮播封装很多东西,包括比如可以设置pageControl的位置,可以传图片url或本地图片,缓存网络图片等等.但是我觉得没必要搞那么复杂,我喜欢简单并足够做事的东西.现在有时间便想自己把它拆解一下.看了一些简书上一些作者写的关于轮播图

iOS: 无限循环轮播图简单封装

轮播图思路: 1.首先要有一个ScrollView和两张图片,把图片放到ScrollView上. 2.要想滚动ScrollView的宽度需设置屏宽的2倍. 3.循环滚动,当滚动到最后一张图片时,采用偏移的方法,将偏移量归零,回到第一张图片. 4.将第二张的图片上的所有值赋给第一张图片. 5.设置让它自己滚动,需添加定时器. 需要的第三方数据库:SDWebImage m.文件内: #imporst "ScrollView.h" @interface ScrollView ()<UI

iOS UICollectionView 实现轮播图

利用UICollectionView 实现轮播图 : 具体代码如下, 简单粗暴, : <span style="font-size:24px;">// // ViewController.m // CollectionPhotosView // // Created by 帝炎魔 on 16/5/30. // Copyright © 2016年 帝炎魔. All rights reserved. // /** * UICollectionView 实现轮播图的实现 将定时器

IOS 封装轮播图

轮播图为一种常见的方式,常用于各种网站,或者App中,当然,作为APP的启动视图也是不错的选择. 闲时封装了一个,仅供新手参考. 1.新建工程,建立轮播图类 建立一个空的工程,新建一个类,起名为Carousel,继承于UIView 2.编写Carousel类接口 1 @interface Carousel : UIView 2 typedef NS_ENUM(NSInteger,UICarouselPageType){ 3 //建立一个枚举型,来设置Carousel的样式 4 UICarouse