無知の状態からiPhoneアプリ開発に挑んでみる -12ページ目

テーブルいじくりも大詰め？

さて、テーブルをちょこちょこいじくってきましたが、

今回が最後（になると思う）ですかね。

前回の最後に宣言した通り、セルの一つ一つに住所データを関連づけて、

クリック（タップ）されたらその住所をポップアップで表示するようにしてみよかと思う。

まず、住所データをどっかに持っておかないといけないですね。

まずは電話番号を追加したみたいに、宣言うんぬんかんぬんを記述します。

PersonalData.hでっす。住所のメンバ変数とプロパティ宣言ですね。
必要なところだけ部分的に抜き出してますよ。

@interface PersonalData : NSObject {
NSString *name;
NSString *phone;
NSString *address;
}

@property (nonatomic, retain) NSString *name;
@property (nonatomic, retain) NSString *phone;
@property (nonatomic, retain) NSString *address;
@end

続いて、PersonalData.mでっす。
これも今まで同じで、先ほど宣言したプロパティの実装ディレクティブを追記しまてます。
これも必要なところだけ部分的に抜き出してますよ。

@implementation PersonalData
@synthesize name;
@synthesize phone;
@synthesize address;
@end

さてさて、次はデータの生成処理の部分です。
名前や電話番号がずらずら書いてあったPersonalDataManager.mを修正します。
これも今までと同じなんで、なんなく追加できますね。

～中略～
// phones
NSArray *phones = [NSArray arrayWithObjects:
@"011-22-3333", @"011-111-1111", @"093-333-3333", @"014-444-4444",
@"01-7777-7777", @"099-999-9999", @"08-8888-8888", @"09-5555-5555",
@"017-777-9999", @"01-2222-2222",
nil];

// addresses
NSArray *addresses = [NSArray arrayWithObjects:
@"大阪府大阪市北区１丁目２番３３号",
@"大阪府大阪市都島区４丁目５番６６号",
@"大阪府大阪市福島区７丁目８番９号",
@"大阪府大阪市此花区１丁目１１番１１号",
@"大阪府大阪市中央区２丁目３番地",
@"大阪府大阪市西区４丁目５番６号",
@"大阪府大阪市港区７番８号",
@"大阪府大阪市大正区９丁目１０番１１号",
@"大阪府大阪市天王寺区１２丁目１３番１４号",
@"大阪府大阪市浪速区１５丁目１６番１７号",
nil];

NSMutableArray *tempDataList
= [[NSMutableArray alloc] initWithCapacity:[names count]];

for (int i = 0; i < [names count]; i++) {
PersonalData *personalData = [[[PersonalData alloc] init] autorelease];
personalData.name = [names objectAtIndex:i];
personalData.phone = [phones objectAtIndex:i];
personalData.address = [addresses objectAtIndex:i];
[tempDataList addObject:personalData];
}

return tempDataList;
}
@finally {
[pool release];
}

return nil; // will be never reached
}

～中略～

はい、これでデータに「住所」項目が追加されました。
行を選択した時にこの住所がポップアップで表示されるようにします。

ContactListViewController.mを触ります。
最初の３行はデリゲートメソッドから呼ばれるプライベートメソッドを宣言してます。
その先のtableView didSelectRowAtIndexPath:メソッドの実装は、元々メソッドはあるので、
中身を修正すればよいですね。これは、行選択時に動作を設定するデリゲートメソッドです。
で、最後の大きな固まりは、最初の３行で宣言したメソッドのロジック部分です。

#import "ContactListViewController.h"
#import "CustomizedCell.h"

@interface ContactListViewController (PrivateMethods)
- (void)displayDialogWithPersonalData:(PersonalData *)personalData;
@end

@implementation ContactListViewController

～中略～

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

[self displayDialogWithPersonalData:[manager loadPersonalDataAtIndex:indexPath.row]];

}

- (void)displayDialogWithPersonalData:(PersonalData *)personalData {

NSString *displayInformation = [NSString stringWithFormat:@"%@\n%@\n%@",
[personalData name], [personalData phone], [personalData address]];

UIActionSheet *actionSheet = [[UIActionSheet alloc]
initWithTitle:displayInformation delegate:self cancelButtonTitle:nil
destructiveButtonTitle:@"OK" otherButtonTitles:nil];
actionSheet.actionSheetStyle = UIActionSheetStyleDefault;
[actionSheet showInView:self.view];
[actionSheet release];
}

これで実行しても、一応動作するのですが、なんかいっこWarningがでるのが気持ち悪いので、ContactListViewController.hを修正します。
これは、ContactListViewControllerが、UIActionSheetDelegateプロトコルに適合することを宣言しているそうですwなんなんでしょ？
必要なところだけ部分的に抜き出してるけど、大事な部分は赤い部分の追加ね。

@interface ContactListViewController : UITableViewController < UIActionSheetDelegate> {
PersonalDataManager *manager;
}

これで実装は完了です！！

いざ実行！！

これ初期画面。

クリックすると！！

達　津手斗（たち　つてと）さんの住所が丸見えです！
ＯＫを選択すると閉じます。

データを右にフリックすると、
従来通り、Deleteボタンが出てきます。
削除もできますし、

右上のEditボタンで、編集モードにしてから、削除もできるし
行の並べ替えもできることを確認しました！

ふー、テーブルのいじくりも終わりました。

次の題材を探さないとね。

そんなに遠くないと思うけど、ではまたまたお目にかかる日まで！

セル（データ）の削除処理と並び替え！

ささっ、続きをやっていきます。

前回はモード切り替えボタンを作ってみましたよね。

今回はそれをちゃんと動作するようにしましょう。

ほんじゃさっそく、やってこうかな。

「ContactListViewController.m」を触ります。
セルの挿入／削除がされた時に呼ばれるメソッドtableView commitEditingStyle:があるので、
コメントアウトを外して以下の様にします。
実際、追加するのは赤い部分だけみたいです、

// Override to support editing the table view.
- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath {

if (editingStyle == UITableViewCellEditingStyleDelete) {
// Delete the row from the data source
[manager removeAtIndex:indexPath.row];
[tableView deleteRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:YES];
}
else if (editingStyle == UITableViewCellEditingStyleInsert) {
// Create a new instance of the appropriate class, insert it into the array, and add a new row to the table view
}
}

これだけやっていっかい実行したらどうなるでしょう。

実行！

前は「Edit」ボタンを押しましたが、今回はセルをヒョイっと横にドラッグ
iPhoneでいうと、フリックというやつです。
それをしてみると「Delete」が出てきます。
メールの削除とかする時につかったりしますね（‐＾▽＾‐）

で、「Delete」を押したら消えます。
その瞬間をうまい具合に激写できたので、これがその画像です。

はい、消えました。

今日はもうちょっとがんばって、セルの移動やってみましょう。
同じく「ContactListViewController.m」を触ってしまいます。
tableView canMoveRowAtIndexPath:
tableView moveRowAtIndexPath:
tableView targetIndexPathForMoveFromRowAtIndexPath:
の三つを実装しますが、最初の二つはコメントアウトされているので、
それを外してちょこっといじります。
一つ目はテーブルのセルについて並べ替えの可否を設定しています。
二つ目はセルが移動するときに呼ばれるメソッドです。
その一つ目と二つ目が以下です。

// Override to support rearranging the table view.
- (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)fromIndexPath toIndexPath:(NSIndexPath *)toIndexPath {
[manager moveFromIndex:fromIndexPath.row toIndex:toIndexPath.row];
}

// Override to support conditional rearranging of the table view.
- (BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)indexPath {
// Return NO if you do not want the item to be re-orderable.
return YES;
}

次に、三つ目を追加しますが、うーん、これを別に入力しなくても
とりあえず動くんですよねー。（やってみたら）
まぁあとから必要になってくるかもしんないから入れときます。
試せる方は、追加する前とした後の両方を実行してみてください。
状況は変わんないと思うので。

ちなみにこれは移動後のセルの位置を返すメソッドのようです。

適当なところにこのメソッドを実装します。

- (NSIndexPath *)tableView:(UITableView *)tableView
targetIndexPathForMoveFromRowAtIndexPath:(NSIndexPath *)sourceIndexPath
toProposedIndexPath:(NSIndexPath *)proposedDestinationIndexPath {
return proposedDestinationIndexPath;
}

よぉーし、実行！

初期画面。

「Edit」ボタンクリック。
おぉ。右に「並べ替えできますマーク」がでてきましたよ！

並び替え途中の図w
宙に浮く感じが何とも言えないです。

移動させました。

「Edit」ボタンクリックで完了なり。

こんなもんでどないでしょうか？？

次は、データが選択されたらそのデータに登録されている別の情報の「住所」をポップアップで表示されるようにしたいと思います。

もうちょっとで完成ですよー＾＾

クリックして応援してください↓

モード切り替え用ボタンの追加

こんにちは、いや９月に入っても暑いですね。

仕事場がむちゃ暑くてみんなうちわをパタパタしてます。仕事の効率７０％ダウンですよ、ホンマに。

地球の事を考えてエコとか言うてますけど、人間の方も考えてほしいです。

地球の前に人類が滅亡する。

さて今日は少しだけプログラミングをしますけど、結構見た目には変化があるんです。

さっそくですけど、「ContactListViewController.m」をみてください。
赤いところを追加して、その他はコメントアウトしてください。
これでナビゲーションバーにモード切り替え用ボタンを表示し、そのタイトルを「名簿」と設定してます。

～（中略）～
- (void)viewDidLoad {
[super viewDidLoad];

// Uncomment the following line to preserve selection between presentations.
//self.clearsSelectionOnViewWillAppear = NO;

// Uncomment the following line to display an Edit button in the navigation bar for this view controller.
// self.navigationItem.rightBarButtonItem = self.editButtonItem;

self.navigationItem.rightBarButtonItem = self.editButtonItem;
self.navigationItem.title = @"名簿";
}

～（中略）～

これを入力したらいざ実行。

上のナビゲーションバーに名簿というタイトルで、右側にEditボタンが追加されてます（‐＾▽＾‐）

それを押すとひとつひとつのセルの左側にエディットするようのダイヤルが出てきます(´0ﾉ｀*)

それをクリックすると、ダイヤルがまわり右からDeleteボタンが出てきます。ヽ(ﾟ◇ﾟ )ﾉ