IOS scrollView 图片浏览

//
//  ViewController.m
//  0426
//
//  Created by apple on 15/4/26.
//  Copyright (c) 2015年 gense. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()<UIScrollViewDelegate>
{
    UIPageControl * pageControl;

    //定义图片名称集合
    NSMutableArray * arr ;

    //主显示图片view
    UIImageView * mainImageView ;

    //
    UIImageView * otherImageView;

    //定义当前显示索引位置
    int currentImageIndex ;

    UIImage * leftImage ;

    UIImage * rightImage;
}
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    //取得屏幕宽度与高度
    CGFloat width = self.view.frame.size.width;
    CGFloat height = self.view.frame.size.height;

    arr = [NSMutableArray arrayWithCapacity:8];

    //添加滚动图片
    for (int i=0 ;i < 8; i++) {
        [arr addObject:[NSString stringWithFormat:@"0%d.jpg",i+1]];
    }

    currentImageIndex = 0;
    [self setImage];

    //实例化不显示图片
    mainImageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:arr[0]]];

    mainImageView.frame = CGRectMake(width, 0, width, height);
    [_scrollView addSubview:mainImageView];

    otherImageView = [[UIImageView alloc] init];

    [_scrollView addSubview:otherImageView];

    //设置scrollview 滚动区域

    _scrollView.contentSize = CGSizeMake(3 * width, 0);

    //显示中间图片
    _scrollView.contentOffset = CGPointMake(width, 0);

    //隐藏水平滚动格
    _scrollView.showsHorizontalScrollIndicator = NO;

   _scrollView.pagingEnabled  = YES;

    //注册scrollview 的代理对象
    _scrollView.delegate = self;

    //添加分布条
    pageControl = [[UIPageControl alloc]init];

    //设置分页条位置
    pageControl.center = CGPointMake(width/2, height-39);

    pageControl.bounds = CGRectMake(0, 0, width, 30);

    //设置分页条 分页项的color
    pageControl.pageIndicatorTintColor = [UIColor whiteColor];
    pageControl.currentPageIndicatorTintColor = [UIColor blackColor];

    pageControl.numberOfPages = 8;

    pageControl.currentPage = 0;

    //添加change事件

    [pageControl addTarget:self action:@selector(pageControlPageChange:) forControlEvents:UIControlEventValueChanged];

    [_scrollView addSubview:pageControl];

}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    int currentPage =  scrollView.contentOffset.x/scrollView.frame.size.width ;

    if(currentPage == 1)
    {
        return ;
    }

    //向左滑
    if(currentPage == 0)
    {
        if( currentImageIndex == 0)
        {
            currentImageIndex = 7;
        }
        else
        {
            currentImageIndex--;
        }

        mainImageView.image = leftImage;
        _scrollView.contentOffset = CGPointMake(mainImageView.frame.origin.x, 0);

    }
    else if(2 == currentPage) //向右滑
    {
        if(currentImageIndex == 7)
        {
            currentImageIndex = 0;
        }
        else
        {
            currentImageIndex ++;
        }

        mainImageView.image = rightImage;
        _scrollView.contentOffset = CGPointMake(mainImageView.frame.origin.x, 0);
    }

    pageControl.currentPage = currentImageIndex ;

    //NSLog(@"current page index %d",currentImageIndex);

    //重新设置左右图片

    [self  setImage];

}

- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView{
    NSLog(@"end scrolling Animation");
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    //调整pageControl bounds size x位置
    pageControl.center = CGPointMake( scrollView.contentOffset.x + scrollView.frame.size.width/2, scrollView.frame.size.height-39);

    //得到主显示图片的位置
    CGFloat mainImageX = mainImageView.frame.origin.x;

    //得到滚动offsetX
    CGFloat offsetX = _scrollView.contentOffset.x;

    //向右滚动
    if(offsetX < mainImageX)
    {
        otherImageView.image = leftImage;
        otherImageView.frame = CGRectMake(0, 0, _scrollView.frame.size.width, _scrollView.frame.size.height);
    }
    else //向左滚动
    {
        otherImageView.image = rightImage;
        otherImageView.frame = CGRectMake(mainImageX*2, 0, _scrollView.frame.size.width, _scrollView.frame.size.height);
    }

}

- (void) pageControlPageChange:(UIPageControl *) page
{
    [UIView animateWithDuration:0.5 animations:^{
        _scrollView.contentOffset = CGPointMake(page.currentPage*_scrollView.frame.size.width, 0);
    }];

}

#pragma mark 取得下一张图片
- (void) setImage
{

    if(currentImageIndex == 0)
    {
        leftImage = [UIImage imageNamed:arr[7]];
        rightImage = [UIImage imageNamed:arr[1]];
    }
    else if(currentImageIndex == 7)
    {
        leftImage = [UIImage imageNamed:arr[6]];
        rightImage = [UIImage imageNamed:arr[0]];

    }
    else
    {
        leftImage = [UIImage imageNamed:arr[currentImageIndex-1]];
        rightImage = [UIImage imageNamed:arr[currentImageIndex+1]];
    }
}

@end
时间: 2024-10-12 20:56:22

IOS scrollView 图片浏览的相关文章

iOS开发-图片查看(ScrollView+UIPageControl)

上周没事写了一个简单的图片查看,上次的查看只用到了一个UIImageView,不断的替换背景图片,实现图片之间的切换.通过ScrollView可以很简单的是实现图片之间的查看,设置setPagingEnabled通过坐标,宽度的设置,可以简单实现一个图片的简单分页查看显示,当然如果你有需求说需要进行所谓的无限循环,在开始和结束的时候的设置一下事件,常用的新闻客户端,图片新闻查看的时候很少有进行最后的时候跳到第一页,一般都是最后的时候都是推荐相关内容,多说了两句,开始吧: ScrollView图片

iOS开发 - 第01篇 - UI基础 - 02 - 图片浏览&amp;TOM猫

图片浏览程序实现要求: 1.frame属性 苹果使用自动布局后,不建议使用frame来改控件大小,除非关闭自动布局.且frame属性,通常用于实例化控件,指定初始位置,若需要改变空间位置,可使用center属性,若需要改变控件大小,可使用bounds属性. 2.首尾式动画 --- 使用很少 3.位移形变 注:通过宏和view.tag进行代码优化如下 4.旋转 5.代码创建按钮 6.懒加载 7.plist --- 实现数据分离 8.懒加载控件处理 作用:在访问成员变量的时候尽量使用self.方法,

IOS开发之图片浏览

这是整体的效果图: 其中main.stroyboard中的控件有2个button,2个label,一个imageView. 设置他们的位置大小和背景颜色和图片. 让main.storyboard连接ViewController.m 下面是它的代码: #import "ViewController.h" @interface ViewController () @property (weak, nonatomic) IBOutlet UILabel *topLabel; @propert

UIScrollView和UIPageControl结合实现图片浏览

iOS中具有图片类的app通常都会有滑动浏览的功能,许多app第一次启动时,也会用UIScrollView+UIPageControl来展示新功能.今天探索一下如何实现该功能. 首先介绍下UIScrollView, UIScrollView中有个重要的属性是contentSize,用于界定滑动范围的大小.UIScrollView本身frame是我们在屏幕上可视部分,也就是说contentSize的宽要大于UIScrollView.frame.size.width才能实现滑动浏览的功能. 另外,图

ios 进阶 -- 图片内存管理

最近在做优化程序的性能方面的工作,涉及到了图片内存管理方面,所以这方面的内容总结一下, 1,为什么做图片内存管理? 问题a,程序启动后,浏览图片时, 内存一直增长. 问题b,  浏览图片时,程序UI显示不流畅,即使本地的图处,也不流畅. 2,怎么做图片内存管理? 对应用程序域内的图片内存进行管理, 当程序的多个地方需要 引用一个图片时,都指向同一个图片的内存地址. 3,如何做? 如果是本地资源时的图片,地址固定,不存在过期问题 我们可以直接 使用系统  [UIImage  ImageName:]

Android之——史上最简单最酷炫的3D图片浏览效果的实现

转载请注明出处:http://blog.csdn.net/l1028386804/article/details/48052709 如今,Android开发已经成为移动互联开发领域中一支不可或缺的力量,那么Android中要实现3D的效果那也就是合情合理的事情了.那么,如何在Android中实现像IOS中那样的3D图片浏览效果呢?下面,鄙人将重磅推出今天的重点博文,和大家一起在Android中实现酷炫的3D图片浏览效果. 一.原理 老规矩,还是要来啰嗦下原理的东西. 整体实现是以手机屏幕的正中间

非微信图文网页,微信浏览器点击图片弹出自带图片浏览 (原创请勿转载)

微信图文网页点击插入的图片,会在微信的图片浏览器上浏览图片可以放大缩小,但是自己做的网页没有这个功能,下面我就来介绍一下这个功能,做出一个完美一点的demo.如果不想看过程直接到最后看demo... 教程需要:脚本编辑器(记事本或者是notepad++.DW都可以).jquery.js.微信浏览器作为测试 如下图效果 我们用到的是微信内置JsAPI的一个,这个函数在微信的开发者平台文档里我没有找到,是在网上搜到的. WeixinJSBridge.invoke('imagePreview',{  

麦子学院ios笔记:IOS把图片缓存到本地的几种方法

把ios的图片缓存到本地的方法有几种?现在来看看学生在麦子学院学习ios开发的笔记中有讲到哪几种方法呢? <code>把图片缓存到本地,在很多场景都会用到,如果是只储存文字信息,那建一个plist文件,或者数据库就能很方便的解决问题,但是如果存图片到沙盒就没那么方便了.这里介绍两种保存图片到沙盒的方法. </code> 一.把图片转为base64的字符串存到数据库中或者plist文件中,然后用到的时候再取出来 <code class="hljs" obje

图片浏览(CATransition)转场动画

Main.storyboard ViewController.m // //  ViewController.m //  8A04.图片浏览(转场动画) // //  Created by huan on 16/2/4. //  Copyright © 2016年 huanxi. All rights reserved. // #import "ViewController.h" #define AnimationDuration 2 @interface ViewController