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

iOS 中 UITableView Cell 实现自定义单选功能

Aujourd'hui, je partage avec vous la sélection unique de la cellule, personnalisée, pas comme celle du bas trouvée sur Internet, j'ai cherché longtemps, presque tous les articles sont des articles avec des croix, alors j'ai décidé d'écrire un article moi-même. Chaque application a une style, nous ne pouvons pas toujours utiliser le style de la croix (il a l'air très basique).

Nous devons réaliser le type suivant. Il est devenu beaucoup plus beau en un instant, plus élégant, n'est-ce pas ?

Je vais vous expliquer en détail. Cette méthode peut ne pas être très bonne, si des experts viennent, je vous invite à échanger le plus possible.

Tout d'abord, ajoutez un UIImageView dans votre cellule personnalisée, car vous devez certainement avoir deux images : une sélectionnée et une non sélectionnée, donc ce UIImageView est utilisé pour basculer entre les images.

@property(nonatomic,strong)UIImageView *seletImage;

Attention : pourquoi n'ai-je pas utilisé de bouton ? Je pense principalement que si le bouton ne fait que la taille d'un petit cercle, il est difficile à cliquer. Ma méthode consiste principalement à combiner la méthode d'agent didSelectRowAtIndexPath de UITableView.

Bien sûr, vous devez ajouter cette vue sous-fille dans votre propre cellule et initialiser cet objet. Le code suivant est écrit à l'endroit correspondant.

 //Ajouter au cellule
[self.contentView addSubview:self.seletImage];
//Initialisation
-(UIImageView *)seletImage{
if (!_seletImage) {
  _seletImage = [[UIImageView alloc]init];
}
return _seletImage;
}
//Coordonnées
[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);
 };

Ensuite, nous avons besoin d'un ViewModel de cellule pour enregistrer les variations des valeurs dans la cellule, dans ce ViewModel nous ajoutons un paramètre pour déterminer si cette ligne de cellule a été cliquée.

@property(nonatomic)BOOL isSelected;

Ensuite, en revenant à cette cellule, nous devons utiliser RAC pour observer les changements du paramètre isSelected, et remplacer l'image

  [[[[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"]];
  }
};

Bien, la dernière étape, revenons à la ViewController correspondante de cette cellule, et travaillons sur didSelectRowAtIndexPath.

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
  [tableView deselectRowAtIndexPath:indexPath animated:YES];
 //Itérer sur l'array viewModel, si le viewModel correspondant à la ligne cliquée est le même, setIsSelected à Yes, sinon à 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];
}

Je vais expliquer simplement, car chaque cellule a un ViewModel correspondant, ce ViewModel est placé dans le tableau ViewModel du ViewController. Par conséquent, itérer, extraire le ViewModel correspondant à la ligne cliquée, remplacer les paramètres, réaliser cet effet.

C'est tout pour cet article, j'espère que cela pourra aider votre apprentissage, et j'espère que vous soutiendrez également le tutoriel criant.

Déclaration : Le contenu de cet article est issu du réseau, propriété de ses auteurs respectifs, le contenu est fourni par les utilisateurs d'Internet de manière volontaire et téléchargé, ce site Web ne détient pas de propriété, n'a pas été traité par l'éditeur humain et n'assume aucune responsabilité juridique. Si vous trouvez du contenu suspect de droits d'auteur, veuillez envoyer un e-mail à : notice#w3Déclaration : Le contenu de cet article est issu du réseau, propriété de ses auteurs respectifs, le contenu est fourni par les utilisateurs d'Internet de manière volontaire et téléchargé, ce site Web ne détient pas de propriété, n'a pas été traité par l'éditeur humain et n'assume aucune responsabilité juridique. Si vous trouvez du contenu suspect de droits d'auteur, veuillez envoyer un e-mail à : notice#w