使用iCarousel的旋转木马效果请求图片

简介:

使用iCarousel的旋转木马效果请求图片

https://github.com/nicklockwood/iCarousel

先看看效果:

 

 

源码如下:

//
//  RootViewController.m
//
//  Created by YouXianMing on 14-5-16.
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import "RootViewController.h"
#import "iCarousel.h"
#import "YXJSON.h"
#import "YXGCD.h"
#import "SDWebImage.h"

// 数据源
#define SOURCE_DATA @"http://www.duitang.com/album/1733789/masn/p/0/50/"

@interface RootViewController ()<iCarouselDataSource, iCarouselDelegate>

@property (nonatomic, strong) iCarousel      *carousel;   // iCarousel
@property (nonatomic, strong) NSMutableArray *dataArray;  // 数据源

@end

@implementation RootViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 初始化数据源
    _dataArray = [[NSMutableArray alloc] init];
    
    // 初始化iCarousel
    self.carousel = [[iCarousel alloc] initWithFrame:self.view.bounds];
    [self.view addSubview:_carousel];
    _carousel.backgroundColor = [UIColor blackColor];
    _carousel.type = iCarouselTypeWheel;
    
    // 设置代理
    self.carousel.delegate   = self;
    self.carousel.dataSource = self;
    
    
    // 异步加载数据
    [[GCDQueue globalQueue] execute:^{
        // 获取json数据
        NSData *data = [[NSData alloc] initWithContentsOfURL:[NSURL URLWithString:SOURCE_DATA]];
        
        // 转换为字典
        NSDictionary *dataDic = [YXJSON dictionaryOrArrayWithJSONSData:data];
        if (dataDic)
        {
            NSArray *dataArray = dataDic[@"data"][@"blogs"];
            for (NSDictionary *dic in dataArray)
            {
                NSLog(@"%@", dic[@"isrc"]);
                
                // 存储数据
                [_dataArray addObject:dic[@"isrc"]];
            }
        }
        
        // 主线程更新
        [[GCDQueue mainQueue] execute:^{
            
            // 重新加载carousel
            [_carousel reloadData];
        }];
    }];
}

#pragma mark -
#pragma mark iCarousel methods
- (NSUInteger)numberOfItemsInCarousel:(iCarousel *)carousel
{
    // 元素个数
    return [_dataArray count];
}

- (UIView *)carousel:(iCarousel *)carousel
  viewForItemAtIndex:(NSUInteger)index      // view的标志
         reusingView:(UIView *)view         // 重用的view
{
    if (view == nil)
    {
        view = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 300.0f, 400.0f)];
    }
    
    // 强行转换指针
    UIImageView *pointView = (UIImageView *)view;
    
    // 使用SDWebImage异步下载图片
    [pointView setImageWithURL:[NSURL URLWithString:_dataArray[index]]];
    
    // 图片自动适应
    pointView.contentMode = UIViewContentModeScaleAspectFit;
    
    return view;
}

- (CGFloat)carousel:(iCarousel *)carousel
     valueForOption:(iCarouselOption)option
        withDefault:(CGFloat)value
{
    if (option == iCarouselOptionSpacing)
    {
        return value * 1.1f;
    }
    
    return value;
}

@end

RootViewController.m

以下几个地方使用了本人自己封装的类,不开源,看官请自行替换相关方法-_-!

核心的地方如下:

so easy :)

 

 

问:如何实现view的点击事件?

实现协议方法 - (void)carousel:(iCarousel *)carousel didSelectItemAtIndex:(NSInteger)index; 即可

 

问:如何获取偏移量?

实现协议,然后如下使用

- (void)carouselDidScroll:(iCarousel *)carousel
{
    NSLog(@"scrollOffset %f", carousel.scrollOffset);
}

 

目录
相关文章
|
1天前
页面渲染效果图(樱花飘落).html(网上收集 4)
页面渲染效果图(樱花飘落).html(网上收集 4)
页面渲染效果图(樱花飘落).html(网上收集 4)
|
29天前
好看的网站自适应图片文字广告位代码
上边是图片广告位,下边是文字广告位,都是自适应的。 图片觉得不直观的可以去网站看看 代码从网上扒的,自己也修改了一下,更美观、也更适应网站。 一个好的广告位不仅不会拉低网站的颜值,还会增加广告主选择你的机会
15 2
好看的网站自适应图片文字广告位代码
|
2月前
|
PHP
网站三合一缩略图片介绍展示源码
网站三合一缩略图片介绍展示源码
54 3
网站三合一缩略图片介绍展示源码
|
8月前
|
前端开发
react图形图片验证码重新请求图片不刷新
react图形图片验证码重新请求图片不刷新
|
前端开发 JavaScript
一颗红心,三手准备,分别基于图片(img)/SCSS(样式)/SVG动画实现动态拉轰的点赞按钮特效
华丽炫酷的动画特效总能够让人心旷神怡,不能自已。艳羡之余,如果还能够探究其华丽外表下的实现逻辑,那就是百尺竿头,更上一步了。本次我们使用图片、SCSS样式以及SVG图片动画来实现“点赞”按钮的动画特效,并比较不同之处。
一颗红心,三手准备,分别基于图片(img)/SCSS(样式)/SVG动画实现动态拉轰的点赞按钮特效
|
移动开发
【笔记】一行代码完成——h5页面上滑图片渐隐
一行代码完成——h5页面上滑图片渐隐
121 0
|
存储 前端开发 数据安全/隐私保护
前端给页面添加暗水印的办法
前端给页面添加暗水印的办法
809 0
|
前端开发
微信小程序如何裁剪图片作为转发封面
我们知道微信小程序的转发时的封面图片比例固定为5:4,具体内容详见小程序开发文档: 字段 说明 默认值 最低版本 title 转发标题 当前小程序名称 path 转发路径 当前页面 path ,必须是以 / 开头的完整路径 imageUrl 自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径。
3488 0