English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 現在の位置
  2. ホーム
  3. 経験記録
  4. 本文

iOSのUITableView Cellのカスタム選択機能の実装

今日はセルの単選についてお話しします。カスタムのものです。下の図のようにネットで見つけたチェックマークのものではありません。長い間探して、ほとんどがチェックマークの記事であったので、自分で一つ書くことにしました。ほとんどのアプリは独自のスタイルがあるでしょう。チェックマークを使ってずっとするのは（見栄えが悪いように感じられます）。

実現したいのは以下のような形式です。一瞬でとても見栄えが良くなり、豪華さが増しましたよね。

具体的には説明します。この方法はとても良いとは限らないかもしれませんが、素晴らしい方々がいらっしゃるので、ぜひ多くのご意見をお待ちしております。

まず、あなたのカスタムセルにUIImageViewを追加します。なぜなら、選択および非選択の両方の画像が必要だからです。このUIImageViewを使って画像を切り替えます。

@property(nonatomic,strong)UIImageView *seletImage;

注意：なぜボタンを使っていないのか、私はボタンが小さな丸いアイコンくらいであれば、クリックしにくいと考えました。私の方法は、UITableViewのdidSelectRowAtIndexPath代理メソッドを組み合わせて実現しています。

もちろんです。あなたのセルにこのサブビューを追加し、このオブジェクトを初期化する必要があります。以下のコードは適切な位置に書かれています。

 //セルに追加します。
[self.contentView addSubview:self.seletImage];
//初期化
-(UIImageView *)seletImage{
if (!_seletImage) {
  _seletImage = [[UIImageView alloc]init];
}
return _seletImage;
}
//座標位置
[self.seletImage mas_makeConstraints:^(MASConstraintMaker *make) {
  @strongify(self);
  make.right.equalTo(self.contentView.mas_right).with.offset(-15);
  make.centerY.equalTo(self.self.contentView);
  make.height.mas_equalTo(22);
  make.width.mas_equalTo(22);
 };

さらにcellのViewModelが必要で、cell内のさまざまな値の変更を記録します。このViewModelに、この行のcellがクリックされたかどうかを判断するパラメータを追加します。

@property(nonatomic) BOOL isSelected;

それからこのcellに戻るとき、isSelectedのパラメータの変更を観察するためにRACを使います。画像を交換します。

  [[[[RACObserve(self.viewModel, isSelected) takeUntil:self.rac_prepareForReuseSignal] deliverOnMainThread] subscribeNext:^(NSString *x) {
  @strongify(self);
  if ([x boolValue] == YES) {
    [self.seletImage setImage:[UIImage imageNamed:@"alarmsetting_selected"]];
  } else {
    [self.seletImage setImage:[UIImage imageNamed:@"alarmsetting_notselected"]];
  }
};

もう少しで完了です。最後のステップで、このcellに対応するViewControllerに戻り、didSelectRowAtIndexPathで手を加えます。

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath) *)indexPath{
  [tableView deselectRowAtIndexPath:indexPath animated:YES];
 //viewModelの配列を巡回し、クリックされた行番号に対応するviewModelが同じ場合、isSelectedをYesに、それ以外の場合はNoにします。
  for (NSInteger i = 0; i < [self.viewModel.ItemArray count]; i++) {
    ItemViewModel *itemViewModel = self.viewModel.ItemArray[i];
    if (i != indexPath.row) {
      itemViewModel.isSelected = NO;
    } else if (i == indexPath.row) {
      itemViewModel.isSelected = YES;
    }
  }
  [self.tableView reloadData];
}

簡単に説明します。各cellには対応するViewModelがあり、このViewModelはViewControllerのViewModel配列に格納されています。したがって、配列を巡回し、クリックされた行番号に対応するViewModelを取得し、パラメータを変更してこの効果を実現します。

これでこの記事のすべての内容が終わります。皆様の学習に役立てば幸いですし、呐喊教程を多くの皆様にサポートしていただけると嬉しいです。

声明：この記事の内容はインターネットから収集され、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしたものであり、このサイトは所有権を有しないです。また、人工編集も行われていません。著作権侵害が疑われる内容がある場合は、以下のメールアドレスまでご連絡ください：notice#oldtoolbag.com（メールを送信する際は、#を@に置き換えてください。不正行為の報告を行い、関連する証拠を提供してください。確認がついたら、このサイトは即座に侵害疑いのコンテンツを削除します。

基本教程
おすすめ