Xcode 開発でTableViewにCamera Rollの写真を表示する方法

Xcode 開発で、TableViewにCamera Rollの写真を表示する方法

TableViewで、行にあたるものは、”Cell”と呼び、画像とテキストの表示が可能です。

この画像にあたるものを、固定でなく、明細に該当したiphone内のCamera Rollの画像を表示する方法をご紹介します。

iphone上のCamera Roll の状態
スクリーンショット 2016-06-29 16.35.44

アプリ内で、画像とテキスト情報を紐づける処理を行っていますが、ここでは省略します。

◆まず、TableViewに文字を表示する方法

　ToDoなどのアプリで使用されている方法になります。
　今回、Cell上に画像、テキストを表示するポイントを中心にした内容になります。

storyboard上の定義

mファイル上の定義
表示するデータを一旦配列に入れて、「日付　＋　コメント」に編集して表示する方法になっています。

1//Cell上の定義
2@property (weak, nonatomic) IBOutlet UITableViewCell *textLabel;
3 
4===========================================================================
5- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
6{
7 
8～～～
9NSString *Wdate = [item sdate]; //指定日
10NSString *Wcome = [item come]; //コメント
11 
12NSString *str50 = [Wdate stringByAppendingString:@" "];//空白を付加
13NSString *str53 = [str50 stringByAppendingString:Wcome];
14 
15cell.textLabel.text = str53; //分類、指定日、コメントを表示
16 
17～～～
18}

この場合の実行結果（日付　＋　コメントで表示されます。）

◆ここから、TableViewにcamera Rollの写真を表示する方法です。

mファイル上の定義
TableViewに画像とテキストを表示する方法で、画像を表示する部分の実装部分です。
表示するデータを一旦配列に入れて配列から画像のURLを取得して、URL型に変換して実際の画像にアクセスします。

1//Cell上の定義
2@property (weak, nonatomic) IBOutlet UITableViewCell *imageView;//画像
3 
4<h1>@property (weak, nonatomic) IBOutlet UITableViewCell *textLabel;//テキスト</h1>
5 
6<ul>
7<li>(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
8{</li>
9</ul>
10 
11～～～
12 CGFloat width = 40; // リサイズ後幅のサイズ
13 CGFloat height = 40; // リサイズ後高さのサイズ
14//画像表示
15NSString *Wgazoou = [item gazou];
16 
17NSURL* aURL = [NSURL URLWithString:Wgazoou];
18 ALAssetsLibrary *library = [[ALAssetsLibrary alloc] init];
19 
20[library assetForURL:aURL resultBlock:^(ALAsset *asset)
21 
22{ UIImage *copyOfOriginalImage =
23 [UIImage imageWithCGImage:[[asset defaultRepresentation]
24 fullScreenImage]
25 scale:1.0 orientation:UIImageOrientationUp]; //数値が小さいと　大きい画像になる。
26 
27UIGraphicsBeginImageContext(CGSizeMake(width, height));
28 
29[copyOfOriginalImage drawInRect:CGRectMake(0, 0, width, height)];
30 
31UIGraphicsEndImageContext();
32 
33cell.imageView.image = copyOfOriginalImage;
34 cell.imageView.contentMode = UIViewContentModeScaleAspectFill;
35 }
36 failureBlock:^(NSError *error) { }];
37 
38～～～
39}

この場合の実行結果は、以下のようになります。
画像の表示が次画面経由でしか表示されないため、NGです。
左：画面起動時　　　　　　　　　　　　　　　　右：次画面から戻った時

cellのbackgroundに画像を入れて表示させる方法で画像を画面表示させることもできますが、cellが選択されるとbackgroundの画像が、左端の大きさから、巨大化（Cellの大きさ）で表示され、Apple審査でNGになりました。この方法では、審査を通してもらえません。

◆上記の問題を解決するために行った方法

ダミーの画像を一旦表示することで対処しました。

1@property (weak, nonatomic) IBOutlet UITableViewCell *imageView;
2@property (weak, nonatomic) IBOutlet UITableViewCell *textLabel;
3 
4===========================================================================
5 
6<ul>
7<li>(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
8{</li>
9</ul>
10 
11～～～
12UIImage *img_mae; // リサイズ後UIImage
13UIImage *img_ato; // リサイズ後UIImage
14 
15CGFloat width = 40; // リサイズ後幅のサイズ
16CGFloat height = 40; // リサイズ後高さのサイズ
17 
18img_mae = [UIImage imageNamed:@&quot;Icon-40@2x.png&quot;]; //表示前にDSPロゴを表示。
19 
20UIGraphicsBeginImageContext(CGSizeMake(width, height));
21 
22[img_mae drawInRect:CGRectMake(0, 0, width, height)];
23 
24img_ato = UIGraphicsGetImageFromCurrentImageContext();
25UIGraphicsEndImageContext();
26 
27cell.imageView.image = img_ato;
28 
29cell.imageView.contentMode = UIViewContentModeScaleAspectFill;
30 
31//画像表示
32 
33NSString *Wgazoou = [item gazou];
34 
35NSURL* aURL = [NSURL URLWithString:Wgazoou];
36ALAssetsLibrary *library = [[ALAssetsLibrary alloc] init];
37 
38[library assetForURL:aURL resultBlock:^(ALAsset *asset)
39 
40{ UIImage *copyOfOriginalImage =
41[UIImage imageWithCGImage:[[asset defaultRepresentation]
42fullScreenImage]
43scale:1.0 orientation:UIImageOrientationUp]; //数値が小さいと　大きい画像になる。
44 
45UIGraphicsBeginImageContext(CGSizeMake(width, height));
46 
47[copyOfOriginalImage drawInRect:CGRectMake(0, 0, width, height)];
48 
49// img_ato = UIGraphicsGetImageFromCurrentImageContext();
50UIGraphicsEndImageContext();
51 
52cell.imageView.image = copyOfOriginalImage;
53cell.imageView.contentMode = UIViewContentModeScaleAspectFill;
54}
55failureBlock:^(NSError *error) { }];
56 
57～～～
58}

この場合の実行結果
ダミーの画像を一瞬表示させることで、この問題は解決できました。
表示タイミングの問題と言えますが、ロジック上でダミー処理追加で解決したため、根本の原因は不明です。

◆まず、TableViewに文字を表示する方法

◆ここから、TableViewにcamera Rollの写真を表示する方法です。

◆上記の問題を解決するために行った方法

共有:

関連投稿