使用 SearchBar 时表格视图单元格中的图像答案

【问题标题】：Image in a Table View Cell when using SearchBar使用 SearchBar 时表格视图单元格中的图像
【发布时间】：2016-11-06 00:20:04
【问题描述】：

我正在使用 Xcode 中的 Objective-C 开发一个应用程序。该应用程序有一个包含一系列餐厅的 TableView。我的问题是，当我尝试使用 SearchBar 时，我使用标题（餐厅名称作为过滤器），但是当我在过滤器搜索后显示行时，只有标题是正确的。单元格中的另一个标签和图像是错误的（它向我显示了正确的标题，但图像和另一个标签（描述标签）与原始表格视图中的第一行相同）。

我必须更改我的 cellForRowAtIndexPath 方法，但我现在不知道如何更改它。

这是名为 MainTableViewController.h 的 TableViewController

#import <UIKit/UIKit.h>

@interface MainTableViewController : UITableViewController <UITableViewDelegate, UITableViewDataSource, UISearchBarDelegate>

@property (weak, nonatomic) IBOutlet UIBarButtonItem *barButton;

//@property (nonatomic, strong) NSArray *Images;
//@property (nonatomic, strong) NSArray *Description;
//@property (nonatomic, strong) NSArray *Title;
@property (nonatomic, strong) NSMutableArray *Title;
@property (nonatomic, strong) NSMutableArray *Images;
@property (nonatomic, strong) NSMutableArray *Description;
@property (nonatomic, strong) NSMutableArray *filteredRest;
@property BOOL isFiltered;

@property (strong, nonatomic) IBOutlet UITableView *RestTableView;

@property (strong, nonatomic) IBOutlet UITableView *mySearchBar;

@end

这是我的 MainTableViewController.c

#import "MainTableViewController.h"
#import "SWRevealViewController.h"
#import "RestTableViewCell.h"
#import "RestViewController.h"

@interface MainTableViewController ()

@end

@implementation MainTableViewController

@synthesize mySearchBar, filteredRest, isFiltered;

- (void)viewDidLoad {
    [super viewDidLoad];

    _barButton.target = self.revealViewController;
    _barButton.action = @selector(revealToggle:);

    [self.view addGestureRecognizer:self.revealViewController.panGestureRecognizer];

    [self.navigationItem setTitle:@"MadEat"]; /*Cambia el titulo del navigation controller*/

    [self.navigationController.navigationBar setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor whiteColor]}]; /*Cambia el color de las letras del navigation controller bar del menu principal*/

    [self.navigationController.navigationBar setBarTintColor:[UIColor colorWithRed:27/255.0f green:101/255.0f blue:163/255.0f alpha:1.0f]];

    self.navigationController.navigationBar.tintColor = [UIColor whiteColor]; /*Cambia el color del boton de la izquierda*/

    self.RestTableView.tableFooterView = [[UIView alloc] init]; /*Esta linea hace que en la tabla solo aparezcan el numero de filas que tienes establecidas, es decir, que las vacias no aparezcan*/

    /*Alerta que se muestra solo la primera vez. Está desactivada*/
    if (![@"1" isEqualToString:[[NSUserDefaults standardUserDefaults] objectForKey:@"alert"]]) {
        [[NSUserDefaults standardUserDefaults] setValue:@"1" forKey:@"alert"];
        [[NSUserDefaults standardUserDefaults] synchronize];

        UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"Terms of use" message:@"The brands mentioned have no relationship with MadEat and the app has no any liability on that content." preferredStyle:UIAlertControllerStyleAlert];
        UIAlertAction* ok = [UIAlertAction actionWithTitle:@"Accept" style:UIAlertActionStyleDefault handler:nil];
        [alertController addAction:ok];

        [self presentViewController:alertController animated:YES completion:nil];
    }

    _Title = @[@"80 Grados",
               @"90 Grados",
               @"B&B Babel",
               @"Babelia",
               @"Bacira",
               @"Bar Galleta",
               @"Bar Tomate",
               @"Barra Atlantica",
               @"BaRRa de Pintxos",
               @"BaRRa de Pintxos",];

    _Description = @[@"Barrio Malasaña",
                     @"Barrio Retiro",
                     @"Barrio Chueca",
                     @"Barrio de Salamanca",
                     @"Barrio Chamberí",
                     @"Barrio Malasaña",
                     @"Barrio Chamberí",
                     @"Barrio Malasaña",
                     @"Barrio del Pilar",
                     @"Barrio Retiro",];

    _Images = @[@"80_grados.png",
                @"90_grados",
                @"babel.png",
                @"babelia.png",
                @"bacira.png",
                @"bar_galleta.png",
                @"bar_tomate.png",
                @"barra_atlantica.png",
                @"barra_de_pintxos.png",
                @"barra_de_pintxos.png",];
}

#pragma mark - Table view data source

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{   
    // Return the number of sections.
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    // Return the number of rows in the section.
    //return _Title.count;

    if (isFiltered == YES) {
        return filteredRest.count;
    } else {
        return _Title.count;
    }
}    

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"TableCell";
    RestTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];

    // Configure the cell...
    if (isFiltered == YES) {
        cell.TitleLabel.text = [filteredRest objectAtIndex:indexPath.row];

    } else {
        int row = [indexPath row];
        cell.TitleLabel.text = _Title[row];
        cell.DescriptionLabel.text = _Description[row];
        cell.RestImage.image = [UIImage imageNamed:_Images[row]];
    }

    cell.RestImage.layer.cornerRadius = 6;
    cell.RestImage.clipsToBounds = YES;
    cell.RestImage.layer.borderWidth = 1;

    return cell;
}

-(void) prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    /*Cambia el nombre del boton de la izquierda sin afectar al titulo del navigation controller*/
    self.navigationItem.backBarButtonItem=[[UIBarButtonItem alloc] initWithTitle: NSLocalizedString (@"Back", nil) style:UIBarButtonItemStylePlain target:nil action:nil];

    if ([[segue identifier] isEqualToString:@"ShowDetails"]){
        RestViewController *restviewcontroller = [segue destinationViewController];

        NSIndexPath *myIndexPath = [self.tableView indexPathForSelectedRow];

        int row = [myIndexPath row];
        restviewcontroller.DetailModal = @[_Title[row],_Description[row],_Images[row]];

    }
}

-(void) searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText {

    if (searchText.length == 0) {
        //Set our boolean flag
        isFiltered = NO;
    } else {
        //Set our boolean flag
        isFiltered = YES;
    }
    //Alloc and init our filteredData
    filteredRest = [[NSMutableArray alloc] init];

    for (NSString * restTitle in _Title) {
        NSRange restTitleRange = [restTitle rangeOfString:searchText options:NSCaseInsensitiveSearch];

        if (restTitleRange.location != NSNotFound) {
            [filteredRest addObject:restTitle];
        }
    }

    for (NSString * restDescription in _Description) {
        NSRange restDescriptionRange = [restDescription rangeOfString:searchText options:NSCaseInsensitiveSearch];

        if (restDescriptionRange.location != NSNotFound) {
            //[filteredRest addObject:restDescription];
        }
    }

    for (NSString * restImages in _Images) {
        NSRange restImagesRange = [restImages rangeOfString:searchText options:NSCaseInsensitiveSearch];

        if (restImagesRange.location != NSNotFound) {
            //[filteredRest addObject:restImages];
        }
    }

    //Reload our table view
    [_RestTableView reloadData];
}

-(void) searchBarSearchButtonClicked:(UISearchBar *)searchBar {
    [mySearchBar resignFirstResponder];
}

@end

最后，这是我的 TableViewCell.h，叫做 RestTableViewCell.h

#import <UIKit/UIKit.h>

@interface RestTableViewCell : UITableViewCell

@property (strong, nonatomic) IBOutlet UILabel *TitleLabel;
@property (strong, nonatomic) IBOutlet UILabel *DescriptionLabel;
@property (strong, nonatomic) IBOutlet UIImageView *RestImage;

@end

这是我的图形问题：

【问题讨论】：

检查 if (isFiltered == YES) 后，您只是在设置标题。还需要设置字幕和图片
我知道这是我必须更改的代码部分。但我不知道该怎么做。谢谢。
如果您不想过滤图像数组，那么也许您可以通过运行 indexofobject 来获取标题并检查其在原始数组中的索引，然后设置匹配的图像和字幕

标签： ios objective-c uitableview searchbar

【解决方案1】：

显然，您只是将过滤条件应用于Title 数组，而不是过滤Images 和Description 数组。

所以你需要另外两个 NSMutableArray 来保存 Images 和 Description 的过滤结果。

但我建议你为你的结果建立一个新的Model。示例代码供您参考：

模型层：Restaurant.h

@interface Restaurant : NSObject

@property (nonatomic, copy) NSString *title;
@property (nonatomic, copy) NSString *desc;
@property (nonatomic, copy) NSString *image;

- (instancetype)init:(NSString *)title descripiton:(NSString *)description image:(NSString *)image;

@end

餐厅.m

@implementation Restaurant

- (instancetype)init:(NSString *)title descripiton:(NSString *)description image:(NSString *)image {
    self = [super init];
    if (self != nil) {
        self.title = title;
        self.desc = description;
        self.image = image;
    }
    return self;
}

@end

RestViewController.h

@interface RestViewController : UIViewController

@property (nonatomic, strong) Restaurant *DetailModal;

@end

MainTableViewController.m

@interface MainTableViewController ()

@property (nonatomic, strong) NSArray<Restaurant *> *originData;
@property (nonatomic, strong) NSMutableArray<Restaurant *> *filteredRest;
@property (nonatomic, assign) Boolean isFiltered;

@end

@implementation MainTableViewController

@synthesize mySearchBar, filteredRest, isFiltered, originData;

- (void)viewDidLoad {
    [super viewDidLoad];

    originData = @[
                    [[Restaurant alloc] init:@"80 Grados" descripiton:@"Barrio Malasaña" image:@"80_grados.png"],
                    [[Restaurant alloc] init:@"90 Grados" descripiton:@"Barrio Retiro" image:@"90_grados"]
                    ];
    filteredRest = [NSMutableArray new];
    isFiltered = NO;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    // Return the number of rows in the section.
    //return _Title.count;

    if (isFiltered == YES) {
        return filteredRest.count;
    } else {
        return originData.count;
    }
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"TableCell";
    RestTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];

    // Configure the cell...
    if (isFiltered == YES) {
        cell.TitleLabel.text = [filteredRest objectAtIndex:indexPath.row].title;
        cell.DescriptionLabel.text = [filteredRest objectAtIndex:indexPath.row].desc;
        cell.RestImage.image = [UIImage imageNamed:[filteredRest objectAtIndex:indexPath.row].image];
    } else {
        cell.TitleLabel.text = [originData objectAtIndex:indexPath.row].title;
        cell.DescriptionLabel.text = [originData objectAtIndex:indexPath.row].desc;
        cell.RestImage.image = [UIImage imageNamed:[originData objectAtIndex:indexPath.row].image];
    }

    cell.RestImage.layer.cornerRadius = 6;
    cell.RestImage.clipsToBounds = YES;
    cell.RestImage.layer.borderWidth = 1;

    return cell;
}

-(void) prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    /*Cambia el nombre del boton de la izquierda sin afectar al titulo del navigation controller*/
    self.navigationItem.backBarButtonItem=[[UIBarButtonItem alloc] initWithTitle: NSLocalizedString (@"Back", nil) style:UIBarButtonItemStylePlain target:nil action:nil];

    if ([[segue identifier] isEqualToString:@"ShowDetails"]){
        RestViewController *restviewcontroller = [segue destinationViewController];

        NSIndexPath *myIndexPath = [self.tableView indexPathForSelectedRow];

        if (isFiltered) {
            restviewcontroller.DetailModal = filteredRest[myIndexPath.row];
        } else {
            restviewcontroller.DetailModal = originData[myIndexPath.row];
        }
    }
}

-(void) searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText {

    if (searchText.length == 0) {
        //Set our boolean flag
        isFiltered = NO;
    } else {
        //Set our boolean flag
        isFiltered = YES;
    }
    //Alloc and init our filteredData
    filteredRest = [[NSMutableArray alloc] init];

    for (Restaurant *item in originData) {
        if ([item.title containsString:searchText]) {
            [filteredRest addObject:item];
        }
    }

    //Reload our table view
    [self.tableView reloadData];
}

-(void) searchBarSearchButtonClicked:(UISearchBar *)searchBar {
    [mySearchBar resignFirstResponder];
}

@end

为您的信息构建一个新的model 对象非常有效，因此您无需将过滤器应用于三个数组，您只需搜索一次，结果将保存在一个数组中。

PS：关于你的编码风格的另外一个技巧，以小写开头的变量、对象实例和以大写开头的类命名是编写 OC 代码时的最佳实践。例如，TitleLabel 应重命名为 titleLabel 等...

【讨论】：

非常感谢您的帮助！我已使用您的模型更改了代码，但cellForRowAtIndexPath 中有错误。在：cell.TitleLabel.text = [filteredRest objectAtIndex:indexPath.row].title; Xcode 给我一个错误“在 'id' 类型的对象上找不到属性 'title'”。我怎样才能改变它？谢谢！
arr.. 抱歉，我在这里粘贴代码时遗漏了一些东西。我已经更新了我的答案。您应该将filteredRest 重新定义为NSMutableArray<Restaurant *> *filteredRest，与originData 相同

【解决方案2】：

在这里，您正在过滤单元格并重用它们。你只是替换文本。您还需要替换图像和数据。

if (isFiltered == YES) {
        cell.TitleLabel.text = [filteredRest objectAtIndex:indexPath.row];

} else {
        int row = [indexPath row];
        cell.TitleLabel.text = _Title[row];
        cell.DescriptionLabel.text = _Description[row];
        cell.RestImage.image = [UIImage imageNamed:_Images[row]];
}

我不确定，但我认为您还没有清楚地理解可重复使用细胞的概念。您将重用不在视图中的单元格，这意味着 iOS 框架将为您提供一个已使用的单元格，因此在您的情况下，它不必每次都重新创建单元格，即第一个单元格 80Grados。

因此，在您收到该单元格后，您可以替换标题，但保留所有其他内容。这就是为什么您会看到带有新标题标签的旧内容。

这里你需要做的是创建一个包装类，它将具有三个属性文本、描述和图像文件名。

@class Restaurant
    @property NSString *title;
    @property NString *description;
    @property NSString *image;
@end

将您的逻辑与此结合起来，而不是将所有数据视为单独的数组。这将非常容易维护。将来，您可以轻松地使用来自服务器、用户输入或任何其他方式的数据填充该类。处理 3 个不同数组中的数据不是非常可持续的模型。所以创建包装类，通过创建 NSMutableArray/NSMutableDictionary 来填充数据。与其放置标题，不如填充整个包装对象。

[filteredRest addObject: restaurantObj];

并以这种方式更改您的代码

Restaurant *r;
if (isFiltered == YES) {
        r = [self.filteredRest objectAtIndex:indexPath.row];         
} else {
        r = [self.restaurantList objectAtIndex:indexPath.row]];
} 
cell.TitleLabel.text = r.title;
cell.DescriptionLabel.text = r.description;
cell.RestImage.image =  [UIImage imageNamed:r.image];

如果有任何想法不清楚，请告诉我。这只是一个原型，您将不得不在多个地方更改代码，但强烈建议尽早进行这些更改。

【讨论】：