CollectionViewを使わずにサムネイルをタイル状に並べる方法

iOS6.0から追加された CollectionViewを使わずにサムネイルをタイル状に並べるサンプルを作成しました。下記よりサンプルのダウンロードが行えます。

サンプルダウンロード

ソースコード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
#import "ViewController.h"

@interface ViewController ()
@end

@implementation ViewController

//サムネイルの総数
NSInteger _thumbnailNum = 300;
//サムネイルのファイル名を入れる配列
NSMutableArray *_thumbnails;
//サムネイルのファイル名接頭詞
NSString *_thumbnailFilePreffix = @"images";
//サムネイルのファイル名接尾詞
NSString *_thumbnailFileSuffix = @"_thumb";
//サムネイル間のマージン
NSInteger _thumbnailMargin = 9;
//サムネイルの外枠の寸法
NSInteger _thumbnailOutlineSize = 76;
//サムネイルのボーダーを含まない寸法
NSInteger _thumbnailSize = 74;
//サムネイルの列の数
NSInteger _thumbnailColumnNum = 4;
//サムネイルの列数のカウント
NSInteger _thumbnailColumnCount = 0;
//サムネイルの行数のカウント
NSInteger _thumbnailRowCount = 0;
//サムネイルのボタンの寸法
NSInteger _buttonSize = 80;

- (void)viewDidLoad
{
  [super viewDidLoad];
  //サムネイルのファイル名を配列に代入
  [self setThumbnailImageResources];
  //サムネイルリストを生成
  [self setThumbnailList];
}

- (void)didReceiveMemoryWarning
{
  [super didReceiveMemoryWarning];
}

//サムネイルのファイル名を配列に代入
- (void)setThumbnailImageResources
{
  //変更可能な配列を初期化
  _thumbnails = [NSMutableArray array];
  for (int i = 1; i <= _thumbnailNum; i++) {
    //拡張子より前のファイル名を保持
    [_thumbnails addObject:[NSString stringWithFormat:@"%@%@", _thumbnailFilePreffix, [NSString stringWithFormat:@"%d", i]]];
  }
}

//サムネイルリストを生成
- (void)setThumbnailList
{
  //サムネイル群を入れるスクロールビューを初期化
  UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 568)];
  int i = 0;
  for (id thumbnailName in _thumbnails) {
    //サムネイルは4列で折り返す
    if (_thumbnailColumnCount == _thumbnailColumnNum) {
      _thumbnailColumnCount = 0;
      _thumbnailRowCount++;
    }
    //サムネイル表示
    NSString *imageFile = [NSString stringWithFormat:@"%@%@", thumbnailName, _thumbnailFileSuffix];
    //画像リソースの取得
    UIImage *image = [self getUIImageFromResources:imageFile ext:@"png"];
    UIImageView *thumbnailView = [[UIImageView alloc] initWithImage:image];
    //サムネイルの寸法指定
    CGRect rect = CGRectMake(_thumbnailMargin + (_thumbnailColumnCount * _thumbnailOutlineSize),
                             _thumbnailMargin + (_thumbnailRowCount * _thumbnailOutlineSize), _thumbnailSize, _thumbnailSize);
    [thumbnailView setFrame:rect];
    //サムネイルをタップ可能にする
    thumbnailView.userInteractionEnabled = YES;
    //ボタン追加
    UIButton *selectButton = [UIButton buttonWithType:UIButtonTypeCustom];
    selectButton.frame = CGRectMake(0, 0, _buttonSize, _buttonSize);
    //ボタンのタグを代入
    selectButton.tag = i;
    [selectButton addTarget:self action:@selector(selectImage:)
           forControlEvents:UIControlEventTouchUpInside];
    [thumbnailView addSubview:selectButton];
    //スクロールビューにサムネイルを追加
    [scrollView insertSubview:thumbnailView atIndex:[self.view.subviews count]];
    //サムネイルの列を一つ進める
    _thumbnailColumnCount++;
    i++;
  }
  //スクロール範囲の設定
  scrollView.contentSize = CGSizeMake(320, ((_buttonSize) * (_thumbnailRowCount - 1) - (_thumbnailMargin * 2)));
  //スクロールビューをステージに追加
  [self.view addSubview:scrollView];
}

//サムネイルがタップされた時のイベント
- (void)selectImage:(id)sender
{
  //予め代入しておいた tagを取得するためにセレクタを代入
  UIButton *button = (UIButton *)sender;
  //予め代入しておいた tagの数値を出力
  NSLog(@"button.tag: %d", button.tag);
}

//画像ファイルを取得
- (UIImage *)getUIImageFromResources:(NSString*)fileName ext:(NSString*)ext
{
  NSString *path = [[NSBundle mainBundle] pathForResource:fileName ofType:ext];
  UIImage *img = [[UIImage alloc] initWithContentsOfFile:path];
  return img;
}

お薦めの参考書

詳細! Swift 2 iPhoneアプリ開発 入門ノート Swift 2 + Xcode 7対応
Swiftをこれから学ぶ方に向けて、図解入りで丁寧に解説されています。基本に重点を置き解説されていますので、応用の段階に入った時もスムーズに実装できます。サンプルコードも多数収録されており、大変充実した内容となっています。

   このエントリーをはてなブックマークに追加

About

Masaki Hirokawa (@dolice_apps)

デザインエンジニア 廣川政樹の開発ブログ。Objective-Cや Javaなど iPhone/Androidアプリ開発に関する技術情報を掲載しています。

iPhone apps

  • リラックス・ヒーリング(無料)
  • 望みが叶う!引き寄せの法則アプリ(無料)
  • ミステリー - 怖い話や不思議な体験、都市伝説まとめ
  • 浮世絵壁紙 - 美しい日本画ギャラリー(無料)
  • アート壁紙HD(無料)
  • 綺麗な壁紙HD iPhone 7/7 Plus/SE & iPod対応(無料)
  • クールな壁紙HD iPhone 7/7 Plus/SE & iPod対応(無料)

Android apps

  • 浮世絵壁紙 - 美しい日本画ギャラリー
  • 綺麗な高画質壁紙

Objective-C Classes

Tag Cloud

ActionScript(9) ActionScript3(7) Ad(4) Adfurikun(2) AdMob(9) Android(10) Animation(17) AppDelegate(3) ARC(1) ArrayList(1) AVAudioPlayer(4) AVAudioSession(1) AVFoundation(3) Banner(2) Bitmap(1) Camera(4) CGAffineTransform(4) CGBlendMode(2) CGContextRef(1) CGImageRef(1) Classes(44) CLLocationManager(1) ConnectivityManager(1) ContentResolver(1) CoreLocation(2) Delegate(3) Device(7) Display(1) DisplayMetrics(1) Download(101) Facebook(6) Foundation(72) Framework(2) Google Analytics(1) Handler(1) iAd(6) ImageView(1) In-AppPurchase(1) iOS(12) iOS 7(15) iOS 7.1(3) iOS 8(1) iPad(7) iPhone(21) iPhone 6(4) Java(7) JavaScript(2) LINE(4) Localize(1) Magazine(1) MediaStore(1) MFComposeViewController(1) Nend(1) NetworkInfo(1) NSArray(23) NSCalendar(3) NSData(2) NSDate(7) NSDateComponents(2) NSDateFormatter(2) NSDictionary(12) NSEnumerator(1) NSIndexSet(1) NSInteger(6) NSMutableArray(17) NSMutableDictionary(5) NSMutableOrderedSet(7) NSMutableString(4) NSMutableURLRequest(1) NSNotificationCenter(1) NSNumber(1) NSObject(1) NSOrderedSet(7) NSRange(2) NSSelectorFromString(1) NSSet(6) NSString(19) NSTimer(4) NSTimeZone(1) NSURL(7) NSURLConnection(1) NSURLRequest(2) NSUserDefaults(7) NSXMLParser(2) Objective-C(222) PHP(1) Products(14) QuartzCore(3) RSS(2) Runnable(1) Sample(51) Screensaver(9) SDK(2) ShareCompat(1) Social(10) StoreKit(1) Twitter(6) UIAccelerometer(3) UIActionSheet(1) UIActivityIndicator(1) UIActivityIndicatorView(3) UIActivityViewController(1) UIAlertView(5) UIApplication(7) UIButton(4) UIColor(3) UIDatePicker(5) UIDevice(6) UIDeviceOrientation(1) UIEvent(6) UIImage(15) UIImagePickerController(4) UIImageView(12) UIKit(58) UILabel(7) UINavigationBar(4) UINavigationItem(1) UIPasteboard(4) UIScreen(1) UIScrollBar(1) UIScrollView(1) UISlider(3) UIStoryboardSegue(3) UISwitch(1) UITabBar(3) UITableView(4) UITextField(2) UIView(11) UIViewAnimationTransition(1) UIViewController(4) UIWebView(5) WindowManager(1) Xcode(48) Xcode 5(8) Xcode 5.1(2)