TableViewを下にスクロールするとセルの表示がおかしくなる

Question

現在TableViewのセルにはスイッチが1つとラベルが2つ置かれています。
そして一番上のセルのスイッチをタップしてONにした後、TableViewを下の方にスクロールすると、なぜか下の方のセルのスイッチまでONになっています。多分TableViewのセルの再利用に関する問題なのではないかと思うのですが、どうすれば選択したセルのスイッチのみをONにすることができるでしょうか？
以下に現在のコードを記します。
どなたか解決できる方がいれば教えていただきたいです。
宜しくお願いします。

CustomCell.h

@protocol PaySwitchDelegate <NSObject>

- (void)addPayItem: (int)switchTag: (BOOL)isSwitchOn;

@end

@interface CustomCell : UITableViewCell

@property (weak, nonatomic) IBOutlet UISwitch *paySwitch;
@property (weak, nonatomic) IBOutlet UILabel *nameLabel;
@property (weak, nonatomic) IBOutlet UILabel *price;

@property id<PaySwitchDelegate> delegate;

@end

ViewController.m

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell *cell;
    
    if (didTapSeparatePaymentBarButtonItem) {
        cell = [self.tableView dequeueReusableCellWithIdentifier:@"CustomCell" forIndexPath:indexPath];
        CustomCell *ordersItemCell = (CustomCell*)cell;
        
        ordersItemCell.nameLabel.text = ordersArray[indexPath.row].orderLinesName;
        ordersItemCell.price.text = [NSString stringWithFormat:@"%d", ordersArray[indexPath.row].price];
        ordersItemCell.paySwitch.tag = indexPath.row;
        ordersItemCell.delegate = self;
        
    } else {
        cell = [self.tableView dequeueReusableCellWithIdentifier:@"Cell" forIndexPath:indexPath];
        
        cell.textLabel.text = ordersArray[indexPath.row].orderLinesName;
        cell.detailTextLabel.text = [NSString stringWithFormat:@"%d", ordersArray[indexPath.row].price];
    }
    
    return cell;
}

////////////////////////回答を受けて追記///////////////////////////

回答を受けてスイッチの状態を保存するBOOL型のプロパティを作成し、そのプロパティがtrueだとスイッチをcellForRowAtIndexPath内でONにするというように実装したのですが、またもTableViewの下の方のスイッチがONになってしまいました。。。
新しく作成したコードのどこが間違っているのでしょうか？

CustomCell.h

@protocol PaySwitchDelegate <NSObject>

- (void)addPayItem: (int)switchTag: (BOOL)isSwitchOn;

@end

@interface CustomCell : UITableViewCell

@property (weak, nonatomic) IBOutlet UISwitch *paySwitch;
@property (weak, nonatomic) IBOutlet UILabel *nameLabel;
@property (weak, nonatomic) IBOutlet UILabel *price;

@property id<PaySwitchDelegate> delegate;
@property BOOL didSwitchOn;    //追記

@end

CustomCell.m

- (void)didTapPaySwitch: (UISwitch*)paySwitch {
    if (paySwitch.on) {
        [self.delegate addPayItem:paySwitch.tag :YES];
        
    } else {
        [self.delegate addPayItem:paySwitch.tag :NO];
    }
}

ViewController.m

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell *cell;
    
    if (didTapSeparatePaymentBarButtonItem) {
        cell = [self.tableView dequeueReusableCellWithIdentifier:@"CustomCell" forIndexPath:indexPath];
        CustomCell *ordersItemCell = (CustomCell*)cell;
        
        ordersItemCell.nameLabel.text = ordersArray[indexPath.row].orderLinesName;
        ordersItemCell.price.text = [NSString stringWithFormat:@"%d", ordersArray[indexPath.row].price];
        ordersItemCell.paySwitch.tag = indexPath.row;
        ordersItemCell.delegate = self;

        if (ordersItemCell.didSwitchOn) {    //このif-selseを追記
            [ordersItemCell.paySwitch setOn:YES animated:YES];
        } else {
            [ordersItemCell.paySwitch setOn:NO animated:YES];
        }
        
    } else {
        cell = [self.tableView dequeueReusableCellWithIdentifier:@"Cell" forIndexPath:indexPath];
        
        cell.textLabel.text = ordersArray[indexPath.row].orderLinesName;
        cell.detailTextLabel.text = [NSString stringWithFormat:@"%d", ordersArray[indexPath.row].price];
    }
    
    return cell;
}

- (void)addPayItem:(int)switchTag :(BOOL)isSwitchOn {
    NSIndexPath *indexPath = [NSIndexPath indexPathForRow:switchTag inSection:0];
    IPOrdersItemCell *cell = [self.tableView cellForRowAtIndexPath:indexPath];
    cell.didSwitchOn = isSwitchOn;
}

Answer 1

多分TableViewのセルの再利用に関する問題なのではないかと思うのですが、

その通りです。
CustomCellのセットアップをしている箇所で、paySwitchの状態も設定しないといけません。そうしないと、再利用前に使われていた状態を引き継いでしまいます。

ordersItemCell.paySwitch.on = YES or No; //Switchの状態をどこかに保存しておいてここで復元する

今回の場合だと、ONにした一番上のセルが画面から消えて、下の方のセルに再利用された時にONの状態で表示されているわけです。

Comments

[tarofess]

ご回答ありがとうございます。スイッチの状態を保存するプロパティを作成してセルのスイッチを制御するコードを書いたのですが、うまくいきませんでした。。。詳しくは質問に追記しましたので、ご確認頂けたらと思います。すみませんが、宜しくお願いします。

[fuzzball]

CustomCellに復元させる情報をCustomCell自身に保存しても意味がないでしょう。例えば、ordersArray にBOOL型のメンバを追加するとか、別にBOOL型の配列を用意するとか。

[tarofess]

ordersArrayの個数分BOOL型の配列を用意してその配列にスイッチの状態を保存するようにすることでセルの表示がおかしくなることがなくなりました。ありがとうございました。

Answer 2

if-elseの両ブロックにUiViewの値を設定する処理を記述するべきです。

Comments

[tarofess]

ご回答ありがとうございます。スイッチの状態を保存するプロパティを作成してセルのスイッチを制御するコードを書いたのですが、うまくいきませんでした。。。詳しくは質問に追記しましたので、ご確認頂けたらと思います。すみませんが、宜しくお願いします。