Objective-CでDribbble APIから取得した画像一覧を表示する

Dribbbleビューワーアプリを作ってみようかと思い、ググりながら画像一覧表示するところまで作ってみた作業メモ。

Dribble周り

Dribbble API βββeta
まずはDrobbbleから作品一覧を取ってくる必要があります。

STILL WORKING – Objective-CでJSONをパースする
Object-CでJSONを扱うには2通りの方法があるそうですが、今回は簡単そうなNSJSONSerializationとやらを使ってみたいと思います。

NSJSONSerializationでJSONをパースする – タブレット上のcron
もう一つ、やりたいことドンピシャの記事を書いてくれている方がいたので参考にさせてもらいました。imageListの宣言部分だけなぜかそのまま使えなかったので書き直しました。

1
2
    //imageList = [[NSMutableArray alloc] init];
    NSMutableArray *imageList = [NSMutableArray array];

画像の準備

データを取ってきて配列に入れるところまでは済んだので、次は画像を表示したいと思います。

1
2
3
NSURL *url = [NSURL URLWithString:@"画像のURL"];
NSData *data = [NSData dataWithContentsOfURL:url];
UIImage *image = [UIImage imageWithData:data];

Objective-C – URLから画像を非同期に読み込む3種類の実装 – Qiita [キータ]
通常はURLから画像を表示する場合はまずこのように一旦画像データとして扱う準備が必要っぽいのですが、今回はそれを配列の中身分用意した上で、重ならないように表示する必要があります。

画像の枚数分だけイメージビューを用意しつつ位置を調整、イメージビューの上にイメージを載せていっています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    //イメージビューの位置
    int pos_x = 0;
    int pos_y = 100;
 
    for(int i=0; i<imageList.count; i++){
 
        //イメージビューを作る
        CGRect rect = CGRectMake(pos_x, pos_y, 200, 150);
        pos_y += 150;
 
        UIImageView * imageView = [[UIImageView alloc] initWithFrame:rect];
 
        //イメージの用意
        NSURL *url = [NSURL URLWithString:imageList[i]];
        NSData *data = [NSData dataWithContentsOfURL:url];
        UIImage *image = [UIImage imageWithData:data];
 
        //イメージビューにイメージを設定
        imageView.image = image;
        imageView.contentMode = UIViewContentModeScaleAspectFit;
 
        //イメージビューをビューに追加
        [self.view addSubview:imageView];
    }

スクロールビューの土台を追加

『UIScrollViewを下から上にスクロールさせる』
作った後に知ったのですが、デフォルトのビューは中の要素が画面サイズをはみ出してもスクロールしてくれないようなので、スクロールビューも用意しました。

1
2
3
4
5
6
7
8
    // UIScrollView
    UIScrollView *scrollView = [[UIScrollView alloc] init];
    scrollView.backgroundColor = [UIColor whiteColor];
    scrollView.frame = CGRectMake(0, 0, 320, 460);
    scrollView.contentSize = CGSizeMake(320, 800);
    scrollView.pagingEnabled = NO;
    scrollView.delegate = self;
    [self.view addSubview:scrollView];

imageListのループ前に追加。

1
2
3
        //イメージビューをスクロールビューに追加
        [scrollView addSubview:imageView];
    }

ビューに追加していたのをスクロールビューに変更。

1
@interface ViewController : UIViewController <uiscrollViewDelegate>

ViewController.hにを追加。

コメントを残す

メールアドレスが公開されることはありません。