しむしむてるるの日記&雑談 同人誌の進捗やら仕事のあれこれやら書いています。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)

【iOS】インデックスバーを使う【UITableView】

以前、仕事で1000を超える要素を持つテーブルを作る必要がありました。
これだけ要素が多くなるとスクロールをするのも一苦労です。
おそらく、ユーザーからしてみたらストレスに感じる事でしょう。
そんな場合の為に、iOSでは下の図の様に右側にインデックスバーを表示して、そのインデックスをタップすると、そのセクションまでスクロールしてくれる機能がついています。

セクションインデックス1

と言う訳で、今回はその実装方法に触れたいと思います。
と言っても至って簡単で、次の2つのメソッドを追加するだけです。
- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView
- (NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index

どちらも UITableViewDataSourceプロトコル のメソッドです。
sectionIndexTitles...の方はその、インデックスバーに表示させるタイトルの配列を設定するメソッドです。
今回は全セクションをそのままインデックスバーに対応させていますが、
"あ か さ た な は ま や ら わ"のように間引いた形にする事も可能です。
続いて、...sectionForSectionIndexTitle... ですが、
こちらは、先に設定したインデックスと実際のセクションを関連づけるメソッドです。
例えば、インデックスバーに"あ か さ た な ..."のように実際のセクションを間引いたような設定にする場合、"さ"が選択されたらセクション番号10に飛ぶという様な設定を行います。

以下が実際のコードです。
※ このIBTableViewControllerクラスはXIB利用での新規作成を行っています。
XIB未使用の場合は、initWithNibName: bundle: メソッド内での
  [self setSourceData];
を initWithStyle や init メソッドに記述して下さい。

IBTableViewController.h
//
// IBTableViewController.h
//

#import

@interface IBTableViewController : UITableViewController {
NSArray *titles;
NSMutableArray *source;
}

@end

IBTableViewController.m
//
// IBTableViewController.m
//

#import "IBTableViewController.h"

@interface IBTableViewController ()

- (void)setSourceData;

@end

@implementation IBTableViewController

- (void)setSourceData
{
// セクションタイトルのアレイ作成
titles = [NSArray arrayWithObjects:
@"あ", @"い", @"う", @"え", @"お",
@"か", @"き", @"く", @"け", @"こ",
@"さ", @"し", @"す", @"せ", @"そ",
@"た", @"ち", @"つ", @"て", @"と",
@"な", @"に", @"ぬ", @"ね", @"の",
@"は", @"ひ", @"ふ", @"へ", @"ほ",
@"ま", @"み", @"む", @"め", @"も",
@"や", @"ゆ", @"よ",
@"ら", @"り", @"る", @"れ", @"ろ",
@"わ", @"を", @"ん", nil];
[titles retain];

// 各セクション分の項目を保持するアレイを作成
source = [[[NSMutableArray array] init] retain];
for( int i=0; i<[titles count]; i++){
[source addObject:[[NSMutableArray alloc] init]];
}

// 項目を作成(各セクションに10個ずつ作成)
NSMutableArray *items;
for( int i=0; i<[titles count]; i++){
items = [source objectAtIndex:i];
for( int j=0; j<10; j++){
[items addObject:[NSString stringWithFormat:@"%@-%d", [titles objectAtIndex:i], j]];
}
}
}

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if(self){
[self setSourceData];
}
return self;
}

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

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

- (void)dealloc{
[source release];
[titles release];

[super dealloc];
}

#pragma mark - Table view data source

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return [source count];
}

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
return [titles objectAtIndex:section];
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return [[source objectAtIndex:section] count];
}

- (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] autorelease];
}

cell.textLabel.text = [[source objectAtIndex:indexPath.section] objectAtIndex:indexPath.row];

return cell;
}

- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView
{
return titles;
}

- (NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index
{
return [titles indexOfObject:title];
}


#pragma mark - Table view delegate

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
}

@end

これで、始めに載せた図のようなテーブルを作成する事が出来ます。

このテーブルでインデックスを"あ行 か行 さ行 ..."のようにする場合は、
先に紹介した2つのメソッドを次のように書き換えます。
- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView
{
return [NSArray arrayWithObjects:@"あ行", @"か行", @"さ行", @"た行", @"な行", @"は行", @"ま行", @"や行", @"ら行", @"わ行", nil];
}

- (NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index
{
// インデックスタイトルから"行"を削除
NSString *target = [title stringByReplacingOccurrencesOfString:@"行" withString:@""];
// セクションタイトル配列から文字が一致する要素の番号を取得
NSInteger section = [titles indexOfObject:target];

return section;
}

これだけで次の様な画面へと変わります。
セクションインデックス2

結構簡単ですね。
これと同じ事ってAndroidでも出来るんでしょうか?
今度調べてみようと思います。
関連記事
スポンサーサイト
[ 2012/11/18 08:09 ] iPhoneアプリ開発 | TB(0) | CM(3)
暗殺
かつるつよすすりすりく








[ 2016/05/24 02:14 ] [ 編集 ]
v-59


[ 2016/05/24 02:15 ] [ 編集 ]
ズートピア
v-59


[ 2016/05/24 02:16 ] [ 編集 ]
コメントの投稿












管理者にだけ表示を許可する
トラックバック:
この記事のトラックバック URL

FC2カウンター
カレンダー
06 | 2017/07 | 08
- - - - - - 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 - - - - -
Twitter@sweetsblast
過去ログ

2017年 06月 【3件】
2017年 05月 【3件】
2017年 04月 【3件】
2017年 03月 【5件】
2017年 01月 【1件】
2016年 09月 【2件】
2016年 04月 【2件】
2016年 03月 【2件】
2016年 01月 【5件】
2015年 12月 【3件】
2014年 05月 【1件】
2014年 04月 【1件】
2013年 12月 【1件】
2013年 03月 【4件】
2013年 02月 【3件】
2013年 01月 【1件】
2012年 12月 【3件】
2012年 11月 【4件】
2012年 10月 【2件】
2012年 09月 【4件】
2012年 08月 【2件】
2012年 07月 【3件】
2012年 06月 【11件】
2012年 05月 【11件】
2012年 04月 【9件】
2012年 03月 【15件】
2012年 02月 【17件】
2012年 01月 【5件】
2011年 12月 【14件】
2011年 11月 【11件】
2011年 10月 【19件】
2011年 09月 【10件】
2011年 08月 【4件】
2011年 07月 【11件】
2011年 06月 【4件】
2011年 05月 【1件】
2011年 04月 【17件】
2011年 03月 【29件】
2011年 02月 【24件】
2011年 01月 【30件】
2010年 12月 【30件】
2010年 11月 【22件】
2010年 10月 【26件】
2010年 09月 【27件】
2010年 08月 【30件】
2010年 07月 【27件】
2010年 06月 【24件】
2010年 05月 【7件】
2010年 04月 【6件】
2010年 03月 【3件】
2010年 02月 【6件】
2010年 01月 【8件】
2009年 12月 【8件】
2009年 11月 【5件】
2009年 10月 【7件】
2009年 09月 【18件】
2009年 08月 【22件】
2009年 07月 【14件】
2009年 06月 【16件】
2009年 05月 【28件】
2009年 04月 【25件】
2009年 03月 【5件】
2009年 01月 【2件】
2008年 12月 【1件】
2008年 11月 【2件】
2008年 10月 【3件】
2008年 09月 【6件】
2008年 08月 【3件】
2008年 07月 【2件】
2008年 06月 【2件】
2008年 05月 【3件】
2008年 04月 【4件】
2008年 03月 【11件】
2008年 02月 【12件】
2008年 01月 【7件】
2007年 12月 【8件】
2007年 11月 【5件】
2007年 10月 【8件】
2007年 09月 【6件】
2007年 08月 【15件】
2007年 07月 【10件】
2007年 06月 【14件】
2007年 05月 【12件】
2007年 04月 【10件】
2007年 03月 【7件】
2007年 02月 【19件】
2007年 01月 【18件】
2006年 12月 【25件】
2006年 11月 【27件】
2006年 10月 【19件】
2006年 09月 【26件】
2006年 08月 【12件】
2006年 07月 【5件】



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。