やっと…TableViewが…ｗ

2017-04-19

はい、おはようございます、氷翠です。

ということで、朝っぱらからやっていました「Objective-C」。
Test019〜はじめて、Test026でようやくTableViewのテストができました。
これでやっと先に進めれるｗ

完成品がこちら、

今までサンプルをコピーしてもそれぞれのセルには同じ文字列しか入ってこなかった。
というのが一番大きい。

まず、ファイル構成はこちら。

プロジェクトを作成したら、←の感じになる。
ただ、この中で氷翠が自ら追加したのは、「RKTableViewVontroller.h」「RKTableViewController.m」の2つ。
そして、今回いじったのはこの2つのファイルと「Main.storyboad」の3つのファイルだけだ。

「Objective-C」に関してはド素人で始めたばっかりの氷翠だが、サンプル様々だね。

まず、「Main.storyboad」をクリックするとInterfaceBuilderが起動し、ビジュアル的にUIを作成することができる。
今回はTableViewを使ってリストを作成するのが目的なので、NSTableViewをViewControllerに配置して完了。
とはいっても、まだ用事はある。
このInterfaceBuilderではプログラムとビジュアルをつなげるという作業をしてあげないと、単なる文章と箱にすぎない。
そのために必要な作業が「つなげる」という作業だ。
本来名称はあるのだろうけど、省く。

氷翠はさっさと作りたいからｗ

とりあえず、最初の画像に戻り、ここで新しいファイルを作成しておこう。
「RKTableViewVontroller.h」「RKTableViewController.m」新しいファイルを作成する。
中身は後で。

次に「Main.storyboad」を開き、オブジェクトに名称をつけよう。

ビジュアル的には←のような構成になっている。で、←の様に選択されている部分、これがTableViewの本体。その上の階層はスクロールバーの制御のためのものだったりするので、そこは無視。

この「Table View」を選択した状態で…

画面の右の方にあるこのインスペクタ、「Identity」という項目の「Identifier」に名前をつけてあげた。
今回は大した目的ではないので、いらないのかもしれないが、一応。

次にBuilderのリストの現在選択されている下に「Table Column View」だったかな？これを選択。
画像では「TITLE」となっているが、これは名前をつけたから。同じ様に「Identifier」に名前をつけてあげる。

さて、ここからが肝心だ。

氷翠は今までこれを使っていた。
だが、どうやら違っていたみたいで、これは間違い。

では何が正解なのか？

これだ。
ものすごく似た感じのオブジェクトなんだけど、今回使うのはこっちだったのだ。
これにたどり着くまでどれだけ時間がかかったかｗ

さて、これの設定をしてあげないといけない。

まず、これを設置したら、選択。「Custom Class」という項目にこれを入力。
まぁ、クラスに名前をつけたという感じで。

これを付けてあげないと、プログラムの中でこれを利用することができなくなるので。

で、次は接続しよう。
これはどちらからでもいいが、「Object」から「Table View」に向かって繋いであげる。
で、「dataSource」を選択してあげる。

さてここからプログラムのほうになる。

まず、「RKTableViewController.h」のほうから。

#import <Cocoa/Cocoa.h>
@interface RKTableViewController : NSObject

@end

はい、これといって何もしていません。

「RKTableViewController.m」の方はガッツリとｗ

#import "RKTableViewController.h"

@implementation RKTableViewController {
	
	NSMutableArray *_dataArray;
}

- (id)init
{
	self = [super init];
	if (self) {
		NSLog(@"%s", __func__);
		
		_dataArray = [[NSMutableArray alloc] init];
		for (int i = 0; i < 10; i++) {
			NSDictionary *data = @{@"title":       [NSString stringWithFormat:@"title-%d", i],
								   @"description": [NSString stringWithFormat:@"description-%d", i]};
			[_dataArray addObject:data];
		}
	}
	return self;
}

#pragma mark - NSTableView data source

- (NSInteger)numberOfRowsInTableView:(NSTableView*)tableView
{
	NSLog(@"%s", __func__);
	
	return _dataArray.count;
}

- (id)tableView:(NSTableView *)tableView objectValueForTableColumn:(NSTableColumn *)tableColumn row:(NSInteger)row
{
	NSLog(@"row: %ld", (long)row);
	
	NSDictionary *data = [_dataArray objectAtIndex:row];
	if ([[tableColumn identifier] isEqualToString:@"TITLE"]) {
		return [data objectForKey:@"title"];
	} else {
		return [data objectForKey:@"description"];
	}
}

@end

まず、「NSMutableArray *_dataArray;」という部分で、配列変数を使うということを宣言しています。

次に「- (id)init」の部分でその配列変数の内容を定義。配列とはいっても、実際には一つの要素の中に「NSDictionary」のデータが入っています。これで二次元の連想配列になるようです。

あとの2つのメソッドは「NSTableView」を使う上で必ず定義しないといけないもので、まず、「- (NSInteger)numberOfRowsInTableView:(NSTableView*)tableView」はその項目に対して何行あるのかを定義しているようです。

また「- (id)tableView:(NSTableView *)tableView objectValueForTableColumn:(NSTableColumn *)tableColumn row:(NSInteger)row」は…ちょっと長いけど、指定の行に何を代入するのか、結果を返り値として出す。

こうすることで、テーブルが完成するようだ。

で、最後だけど、これだけだと、「Tabel Cell View」だったか、こういった文字がすべてのセルに代入されることになり、うまくないｗ
何が必要なのかというと、このやり方は「Content mode」というプロパティがTableViewにはあり、プルダウンメニューで切り替えることができる。もちろん、表示がうまくいっている場合はいじらなくていいが、その部分が「Cell Based」になっているはず。これになっていなければ切り替えて上げるだけでうまく表示される。