iOSでjsonを取得してカスタムのtableViewに流し込みたい


例えば  
1,[title,description,link,imgUrl]を持ったjsonをURLから取得  
2,下記のようなtableを作ってクリック時にsequeにlinkを渡す  
というような事がしたいです。

* * *

**title**  
| | description,description  
| img | description,description  
| | description,description  

* * *

jsonを取って来てtitleを通常テーブルに入れるところまでは下記の実装でできました。

[code]

    - (void)getJSON:(NSURL*)url
    {
        //NSURL *url = [NSURL URLWithString:@"http://itunes.apple.com/jp/rss/topfreeapplications/limit=10/json"];
        NSURLRequest *request = [NSURLRequest requestWithURL:url];
    
        [NSURLConnection sendAsynchronousRequest:request queue:[NSOperationQueue mainQueue] completionHandler:^(NSURLResponse *response, NSData *data, NSError *error) {
    
             NSLog(@"json ok");
            NSDictionary *jsonDictionary = [NSJSONSerialization JSONObjectWithData:data options:0 error:nil];
    
            // データの配列をプロパティに保持
            self.items = [jsonDictionary objectForKey:@"items"]
    
            NSLog(@"%d",(int)[self.items count]);
    
            // TableView をリロード
            [self.tableView reloadData];
        }];
    }
    
    
    // テーブルセルの内容を設定
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        static NSString *CellIdentifier = @"Cell";
    
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
        if (cell == nil) {
            cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
            cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
        }
    
        NSDictionary *item = [self.items objectAtIndex:indexPath.row];
        // titleを設定
        cell.textLabel.text = [item objectForKey:@"title"];
        //cellにdescriptionを設定
        //cellにimageを設定
        //cellを押した時に発生するsequeを指定、link要素を渡す
        return cell;
    }
    
[/code]




JSONの取得は実装出来ているとのことなので、以下の2.のみ回答させて頂きます。

> 2,下記のようなtableを作ってクリック時にsequeにlinkを渡す というような事がしたいです。

こちら、実現するためには大きくわけて以下の2つの処理が出来れば恐らく意図していることを実装できるかと思います。

1.UITableViewのCellをカスタマイズ

2.Cellがタップされたイベントを検知し、処理を実装

それでは、以下個別に詳細となります。

**1.UITableViewのCellをカスタマイズする方法**

単一のテキスト以外の情報をCell上に表示したい場合、必要となる各要素のViewを作成しcellのsubviewとすることで実現できます。下記は受け取ったdescriptionのテキストを出力するUILabelを作成し、cell上に配置する処理の例です。画像の場合も、同様にUIImageをcellにaddSubviewすることで表示することが出来ます。また、下記ではコードで実装していますがStoryboardを利用して実装している場合は、そちらからこれらの要素を配置することも可能です。

[code]

    // テーブルセルの内容を設定
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        static NSString *CellIdentifier = @"Cell";
    
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
        if (cell == nil) {
            cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
            cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
        }
        // description用のLabelを作成し配置する例
        NSDictionary *item = [self.items objectAtIndex:indexPath.row];
        UILabel *descriptionLabel = [[UILabel alloc] init];
        descriptionLabel.textColor = [UIColor blackColor];
        descriptionLabel.font = [UIFont fontWithName:@"AppleGothic" size:12];
        descriptionLabel.text = [item objectForKey:@"description"];
        [descriptionLabel sizeToFit];
        [cell addSubview:descriptionLabel];
        // 上記と同様に必要なViewを作成し、CellにaddSubviewして、座標を調整することで
        // 意図するUIを作れると思います。
    
        // ~ 以下省略 ~
    
[/code]

なお、分かりやすく表現するために上記ではController上に処理を書いていますが今回の用にCellに複数の要素を配置しカスタマイズする場合は、UITableViewCellを継承したサブクラスを作成することが推奨されます。

参考: <http://ios-practice.readthedocs.org/en/latest/docs/tableview/>

また、URLから画像から読み込んで表示する方法については下記に参考となりそうな記事があったのでこちらも共有しておきます。

参考 <http://qiita.com/EntreGulss/items/d7d9fb5d0b93eb509d43>

**2.Cellがタップされたイベントを検知する方法**

UITableViewControllerは、Cellのタップを検知したときにdidSelectRowAtIndexPathメソッドをコールします。そこで、現在実装されているControllerのクラス(UITableViewControllerを継承したものなはず)上でこのメソッドをオーバーライドすることで、Cellがタップされたときのイベント処理を実装することが出来ます。

[code]

    // Cellがタップされた時に以下のメソッドがコールされる
    - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
    {
        NSDictionary *item = [self.items objectAtIndex:indexPath.row];
        NSString *linkURL = NSS[item objectForKey:@"link"];
        // 画面遷移処理を実装
    }
    
[/code]

上記でセルをカスタマイズしてタップ時に遷移、というのは実装できると思いますがいかがでしょうか。。。




JSONの取得は実装出来ているとのことなので、以下の2.のみ回答させて頂きます。

> 2,下記のようなtableを作ってクリック時にsequeにlinkを渡す というような事がしたいです。

こちら、実現するためには大きくわけて以下の2つの処理が出来れば恐らく意図していることを実装できるかと思います。

1.UITableViewのCellをカスタマイズ

2.Cellがタップされたイベントを検知し、処理を実装

それでは、以下個別に詳細となります。

**1.UITableViewのCellをカスタマイズする方法**

単一のテキスト以外の情報をCell上に表示したい場合、必要となる各要素のViewを作成しcellのsubviewとすることで実現できます。下記は受け取ったdescriptionのテキストを出力するUILabelを作成し、cell上に配置する処理の例です。画像の場合も、同様にUIImageをcellにaddSubviewすることで表示することが出来ます。また、下記ではコードで実装していますがStoryboardを利用して実装している場合は、そちらからこれらの要素を配置することも可能です。

[code]

    // テーブルセルの内容を設定
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        static NSString *CellIdentifier = @"Cell";
    
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
        if (cell == nil) {
            cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
            cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
        }
        // description用のLabelを作成し配置する例
        NSDictionary *item = [self.items objectAtIndex:indexPath.row];
        UILabel *descriptionLabel = [[UILabel alloc] init];
        descriptionLabel.textColor = [UIColor blackColor];
        descriptionLabel.font = [UIFont fontWithName:@"AppleGothic" size:12];
        descriptionLabel.text = [item objectForKey:@"description"];
        [descriptionLabel sizeToFit];
        [cell addSubview:descriptionLabel];
        // 上記と同様に必要なViewを作成し、CellにaddSubviewして、座標を調整することで
        // 意図するUIを作れると思います。
    
        // ~ 以下省略 ~
    
[/code]

なお、分かりやすく表現するために上記ではController上に処理を書いていますが今回の用にCellに複数の要素を配置しカスタマイズする場合は、UITableViewCellを継承したサブクラスを作成することが推奨されます。

参考: <http://ios-practice.readthedocs.org/en/latest/docs/tableview/>

また、URLから画像から読み込んで表示する方法については下記に参考となりそうな記事があったのでこちらも共有しておきます。

参考 <http://qiita.com/EntreGulss/items/d7d9fb5d0b93eb509d43>

**2.Cellがタップされたイベントを検知する方法**

UITableViewControllerは、Cellのタップを検知したときにdidSelectRowAtIndexPathメソッドをコールします。そこで、現在実装されているControllerのクラス(UITableViewControllerを継承したものなはず)上でこのメソッドをオーバーライドすることで、Cellがタップされたときのイベント処理を実装することが出来ます。

[code]

    // Cellがタップされた時に以下のメソッドがコールされる
    - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
    {
        NSDictionary *item = [self.items objectAtIndex:indexPath.row];
        NSString *linkURL = NSS[item objectForKey:@"link"];
        // 画面遷移処理を実装
    }
    
[/code]

上記でセルをカスタマイズしてタップ時に遷移、というのは実装できると思いますがいかがでしょうか。。。

