06_无限滚动的相册

原创 2015年11月18日 21:17:20
#import "RootViewController.h"
#define HEIGHT self.view.frame.size.height
#define WIDTH  self.view.frame.size.width

@interface RootViewController ()<UIScrollViewDelegate>
@property(nonatomic, retain)UIScrollView *scrollView;
@property(nonatomic, retain)UIPageControl *page;
@end

@implementation RootViewController

- (void)dealloc
{
    [_scrollView release];
    [_page release];
    [super dealloc];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, WIDTH, HEIGHT)];
    self.scrollView.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:self.scrollView];
    [self.scrollView release];
    // 移动的范围
    self.scrollView.contentSize = CGSizeMake(9 * WIDTH, 0);
    // 按页来滚动
    self.scrollView.pagingEnabled = YES;

    UIImageView *firstImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, WIDTH, HEIGHT)];
    firstImageView.image = [UIImage imageNamed:@"h7.jpeg"];
    [self.scrollView addSubview:firstImageView];
    [firstImageView release];
    firstImageView.userInteractionEnabled = YES;


    for (NSInteger i = 1; i < 8; i++) {
        NSString *imageName = [NSString stringWithFormat:@"h%ld.jpeg", i];
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(WIDTH * i , 0, WIDTH, HEIGHT)];
        imageView.image = [UIImage imageNamed:imageName];

        [self.scrollView addSubview:imageView];
        [imageView release];
        imageView.userInteractionEnabled = YES;
    }

    // 在最后面加上一个视图,放在最后,显示第一张图片
    UIImageView *lastImageView = [[UIImageView alloc] initWithFrame:CGRectMake(8 * WIDTH, 0, WIDTH, HEIGHT)];
    lastImageView.image = [UIImage imageNamed:@"h1.jpeg"];
    [self.scrollView addSubview:lastImageView];
    [lastImageView release];
    lastImageView.userInteractionEnabled = YES;

    // 为了能显示第一张图片,我们需要先设置一个偏移量,这样能直接显示罗宾的第一张图片
    self.scrollView.contentOffset = CGPointMake(WIDTH, 0);


//    // 关闭边界回弹效果
    self.scrollView.bounces = NO;
//
//    // 关闭水平的滚动条
//    self.scrollView.showsHorizontalScrollIndicator = NO;

    // 设置代理人
    self.scrollView.delegate = self;

    // 创建一个pageControl
    self.page = [[UIPageControl alloc] initWithFrame:CGRectMake(100, 600, 200, 40)];
    self.page.backgroundColor = [UIColor blueColor];
    [self.view addSubview:self.page];
    [_page release];
    self.page.numberOfPages = 7;
    // 设置未被点的颜色
    self.page.pageIndicatorTintColor = [UIColor yellowColor];
    // 当前点的颜色
    self.page.currentPageIndicatorTintColor = [UIColor redColor];


    [self.page addTarget:self action:@selector(pageAction:) forControlEvents:UIControlEventValueChanged];
    // 想要scrollView实现缩放功能,需要先设置最大最小的缩放比例
    self.scrollView.minimumZoomScale = 0.5;
    self.scrollView.maximumZoomScale = 2;

}
#pragma mark 这个方法用来管理scrollview的缩放功能
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{

    return [scrollView.subviews firstObject];
}

- (void)pageAction:(UIPageControl *)page
{
    // 还是设置偏移量
    NSLog(@"%ld", page.currentPage);
//    [self.scrollView setContentOffset:CGPointMake((page.currentPage + 1) * WIDTH, 0) animated:YES];


    [self.scrollView setContentOffset:CGPointMake(page.currentPage * WIDTH, 0)];
}

// 滑动结束之后,会触发的协议方法


- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    if (scrollView.contentOffset.x == WIDTH * 8) {
        scrollView.contentOffset = CGPointMake(WIDTH, 0);
    }else if (scrollView.contentOffset.x == 0 ) {
        scrollView.contentOffset = CGPointMake(7 * WIDTH, 0);
    }

    // pageControl和scrollView进行关联,点的移动方向和scrollView的偏移量有关
    // 无论怎么方向滑动,当pageControl和scrollview关联的时候,偏移量都是修改好的,所以可以正确的滚动和显示
    self.page.currentPage = scrollView.contentOffset.x / WIDTH - 1;

}
...

@end

UI06_无限滚动的相册

UIScrollView
  • u013336745
  • u013336745
  • 2015年09月21日 19:22
  • 168

UI_无限滚动相册

UI_无限滚动相册
  • sOldiers_C
  • sOldiers_C
  • 2015年09月21日 19:45
  • 155

无限滚动相册切换swift版

无限滚动相册切换swift版   (在iOS代码库中浏览本帖) 关键字:无限滚动代码类库:滚动视图(Scrollview)GitHub链接:https://github.com/nsdict...
  • u014640208
  • u014640208
  • 2015年06月24日 08:46
  • 272

jquery实现页面无限滚动插件

jquery实现网页底部自动加载内容的插件很多,如 ScrollPagination ,Screw,Autobrowse等,每款插件都有各自的API,本文主要说明Autobrowse的使用方式。...
  • xhwwc110
  • xhwwc110
  • 2015年11月05日 17:48
  • 2510

设计无限滚动下拉加载,实践高性能页面真谛

设计无限滚动下拉加载,实践高性能页面真谛 UX Planet论坛上有过这么一篇热门文章: Infinite Scrolling Best Practices,它从UX角度分析了无限滚动加...
  • wulixiaoxiao1
  • wulixiaoxiao1
  • 2017年03月06日 11:01
  • 387

无限滚动js

封装成一个jq插件:(function($){ $.fn.myScroll = function(options){ //默认配置 var defaults = { ...
  • u011263845
  • u011263845
  • 2015年09月22日 16:48
  • 382

无限轮播 实现原理

iOS开发UI篇—无限轮播(循环利用) 一、无限轮播  1.简单说明   在开发中常需要对广告或者是一些图片进行自动的轮播,也就是所谓的无限滚动。   在开发的时候,我们通常的做法...
  • wks_lovewei
  • wks_lovewei
  • 2016年03月29日 17:52
  • 998

Android 实现无限滚动的ScrollView

用ScrollView实现类似 新闻头条或广告图的无限滚动 思路是在看智能社的JavaScript相关视频时候想到的,具体就是讲动画那个节,实现图片的无缝滚动 在这里就不讲了(主要是讲也讲不明白=...
  • qq_23934649
  • qq_23934649
  • 2017年03月10日 17:00
  • 726

sui mobile 无限滚动时会触发多次请求问题

首先,说问题之前,首先我们先看一下sui mobile 官网无限滚动的实现代码,(这里主要是说底部无限滚动)。  官网中提到,要实现无限滚动,只需要“在可滚动的容器上添加“infinite-scro...
  • qq_26075861
  • qq_26075861
  • 2017年03月21日 15:46
  • 1233

无限滚动

在工作中有时候我们会遇到无限滚动,比如相册,广告等,今天就用UICollectionView来实现无限滚动,话不多说,都在代码中了! #define ID @"photo" #define ...
  • u013370845
  • u013370845
  • 2015年12月28日 22:38
  • 98
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:06_无限滚动的相册
举报原因:
原因补充:

(最多只允许输入30个字)