2012/07/01更新

[XCODE] UIView上のタップ位置から、UITableView上のどのセル位置かを判断する方法

このエントリーをはてなブックマークに追加            

今日はちょっとマニアックなネタですが、 UIView上でタップイベントを補足した際に、タップ位置からUITableView上のどの位置かを見つける方法を ブログに書きたいと思います。

UITableView Sample



今回やりたいこと

UITableViewCellをカスタマイズして、Cell上に配置した画像をタップされた際に、 タップされたCellを特定したいと考えました。
例えば下図のUITableViewで、左の青丸をタップした際に、どのセルかを特定します。
UITableView Sample




まずは青色に対するタップイベントを設定する

青色ボール画像に対するタップイベントを設定します。以下サンプルコードとなります。
- (UITableViewCell *)tableView:(UITableView *)tView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

  // まずはUITableViewCellインスタンスを作る。    
  staticNSString *identifier = @"entryCell";
  UITableViewCell *cell = [tableViewdequeueReusableCellWithIdentifier:identifier];
  if (cell == nil) {
    NSBundle *bundle = [NSBundlemainBundle];
    XibItemHolder *holder = [[XibItemHolderalloc] init];
    [bundle loadNibNamed:@"FeedItemCell"owner:holder options:nil];
    cell = holder.feedItemCell;
     }
  // 青色ボールのUIImageViewを取得する。
  // 今回はタグ番号でアクセスする。
  UIImageView *imageView = (UIImageView *)[cell viewWithTag:1];
  // ユーザーからのアクションを許容する。
  imageView.userInteractionEnabled = YES;
  // GestureRecognizerでタップイベントを付与する。
  UITapGestureRecognizer *tap = [[UITapGestureRecognizeralloc] initWithTarget:selfaction:@selector(tapUnreadImage:)];
  [imageView addGestureRecognizer:tap];
    

    return cell;
}
上記で、青色ボールのイメージにタップイベントを設定できました。

なお、Xibファイルを使ってUITableViewCellの独自レイアウトを作る方法は、 [XCODE] UITableViewCellをカスタマイズする方法@YoheiM.NETを参考にしてみて頂けると幸いです。

また、UITapGestureRecognizerの使い方は、[XCODE] UIViewにタップした際のイベントを登録する@YoheiM.NET を参考にしてみて頂けると幸いです。



続いてTapイベントに反応する

青色ボールに対してタップイベントが発生したら、上記で登録したメソッドが呼び出されます。
その中で、View上の座標を取得して、その座標を元に、TableView上の何セル目かを判断します。
やっと本題のところですw。
-(void)tapUnreadImage:(UIGestureRecognizer *)gesture {

  // タップした位置(座標点)を取得します。
  CGPoint pos = [gesture locationInView:tableView];
  // 座標点から、tableViewのメソッドを使って、NSIndexPathを取得します。
  NSIndexPath *indexPath = [tableView indexPathForRowAtPoint:pos];
  // indexPathを使って、TableView上のタップされた画像を持つCellを取得します。
  UITableViewCell *cell = [tableViewcellForRowAtIndexPath:indexPath];
}
これで目標のセルを取得することが出来ました。
セルを取得したら、画像を非表示するなど、セル上の値を変化させることが出来ます。よっしゃ(*゚▽゚)ノ



最後に

現在RSSリーダーを作っていますが、UITableViewをベースにした作りなので、 UITableView関連で良く詰まりますw。

新しく学んだ事は、今回みたいにまたブログに書きたいと思います。かなりマニアックなネタかと思いますが。

今回も最後までお読み頂きましてありがとうございました。






こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。