tableview前端基础设计（初级版）

tableView前端基础设计

　　　　　　实现的最终效果

　　操作目的：熟悉纯代码编辑TableView和常用的相关控件SearchBar、NavigationBar、TabBar等，以及布局和基本功能的实现。

一、TabBar编辑

　　TabBar（标签栏）为实现多视图呈现的控制器，因为控制视图呈现，所以要在app完成之前进行设置。学习链接

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.
    
    //创建window
    self.window=[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    self.window.backgroundColor=[UIColor clearColor];
    
    //初始化一个tabBar
    self.tb=[[UITabBarController alloc] init];
    
    //设置为window的根控制器
    self.window.rootViewController=self.tb;
    self.tb.tabBar.backgroundColor=[UIColor whiteColor];
    
    //设置状态栏的样式，控制不被navigationBar的颜色覆盖
    [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent animated:NO];
    
    //创建子控制器
    [self MainLoadView];
    [self.window makeKeyAndVisible];
    return YES;
}

-(void)MainLoadView{
    [[UINavigationBar appearance] setBarTintColor:[UIColor blackColor]];
    
    TestViewController *c1=[[TestViewController alloc] init];
    UINavigationController *nb1=[[UINavigationController alloc]initWithRootViewController:c1];
    //wx.tabBarItem.title=@"message";
    //wx.tabBarItem = [[UITabBarItem alloc]initWithTabBarSystemItem:UITabBarSystemItemContacts tag:1];
    c1.navigationItem.titleView=[self NavigationTitle:@"微信"];
    
    contectViewController *c2=[[contectViewController alloc] init];
    UINavigationController *nb2=[[UINavigationController alloc]initWithRootViewController:c2];
    c2.navigationItem.titleView=[self NavigationTitle:@"通讯录"];
    
    findViewController *c3=[[findViewController alloc] init];
    UINavigationController *nb3=[[UINavigationController alloc]initWithRootViewController:c3];
    c3.navigationItem.titleView=[self NavigationTitle:@"发现"];
    
    
    meViewController *c4=[[meViewController alloc] init];
    UINavigationController *nb4=[[UINavigationController alloc]initWithRootViewController:c4];
    c4.navigationItem.titleView=[self NavigationTitle:@"我"];
    
    self.tb.viewControllers=@[nb1,nb2,nb3,nb4];
    [self customTabBar];
    
}


-(UILabel *)NavigationTitle:(NSString *)TitleText{
    UILabel *title=[[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 44)];
    title.backgroundColor=[UIColor clearColor];
    title.textColor=[UIColor whiteColor];
    title.font=[UIFont boldSystemFontOfSize:20];
    title.textAlignment=UITextAlignmentCenter;
    title.text=TitleText;
    return title;
}

//加载自定义的TabBarItem
-(void)customTabBar{
    UITabBar *tabBar=self.tb.tabBar;
    UITabBarItem *tabBarItem0 = [tabBar.items objectAtIndex:0];
    UITabBarItem *tabBarItem1 = [tabBar.items objectAtIndex:1];
    UITabBarItem *tabBarItem2 = [tabBar.items objectAtIndex:2];
    UITabBarItem *tabBarItem3 = [tabBar.items objectAtIndex:3];


    tabBarItem0.image = [[UIImage imageNamed:@"wechat-close.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    tabBarItem0.selectedImage = [[UIImage imageNamed:@"wechat-open.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    tabBarItem0.title=@"微信";
    
    tabBarItem1.image = [[UIImage imageNamed:@"contact-close.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    tabBarItem1.selectedImage = [[UIImage imageNamed:@"contact-open.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    tabBarItem1.title=@"通讯录";
    
    tabBarItem2.image = [[UIImage imageNamed:@"find-close.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    tabBarItem2.selectedImage = [[UIImage imageNamed:@"find-open.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    tabBarItem2.title=@"发现";
    
    tabBarItem3.image = [[UIImage imageNamed:@"me-close.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    tabBarItem3.selectedImage = [[UIImage imageNamed:@"me-open.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    tabBarItem3.title=@"我";
    
    [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:
                                                       kUIColorFromRGB(0x7a7e83), NSForegroundColorAttributeName,
                                                       nil] forState:UIControlStateNormal];
    [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:
                                                      kUIColorFromRGB(0x1aad19), NSForegroundColorAttributeName,
                                                       nil] forState:UIControlStateSelected];
}

二、搜索栏编辑

　　在ios8.0之前搜索栏是由SearchBar和SearchDisplayController联合控制呈现的，在ios8.0之后是由SearchController单独控制呈现。为了学习了解两种控制方式的区别，我在微信和通讯录页面用了两种不同的控制方式。最终体验就是改版后的省事多了，实现效果没有多大差别。（本测试中由于数据源格式不同所以呈现有些许差别）学习链接

改版前(关于SearchBar的部分代码，详情见demo)

@interface contectViewController ()<UISearchBarDelegate,UISearchDisplayDelegate>
@property (nonatomic,strong) UISearchBar *searchBar;
@property (nonatomic,strong) UISearchDisplayController *display;
@end

@implementation contectViewController
- (void)viewDidLoad {
    [self.searchBar setShowsScopeBar:NO];
    [self search];
}

-(void)search{
    self.searchBar=[[UISearchBar alloc] init];
    self.searchBar.placeholder=@"Search";
    self.tableView.tableHeaderView = self.searchBar;
    
    self.display=[[UISearchDisplayController alloc] initWithSearchBar:self.searchBar contentsController:self];
    
    self.searchBar.delegate=self;
    self.display.searchResultsDataSource=self;
    self.display.searchResultsDelegate=self;
    self.display.delegate=self;
}

 //添加索引
-(NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView{
 
     return self.titlearr;
 
 }
 
-(NSInteger) tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index{
    NSInteger count=0;
    for(NSString *character in self.titlearr){
        if([[character uppercaseString] hasPrefix:title]){
            return count;
        }
        count++;
    }
    return 0;
}

-(BOOL)searchDisplayController:(UISearchDisplayController *)controller shouldReloadTableForSearchString:(nullable NSString *)searchString{

    NSPredicate *resultPredicate=[NSPredicate predicateWithFormat:@"self contains[cd] %@",searchString];
    self.searcharr=[self.contect filteredArrayUsingPredicate:resultPredicate];
    return YES;
}
@end

改版后（SearchBarController的相关代码）

@interface TestViewController () 
@property (nonatomic,strong) SearchResultViewController *mySRTVC;
@property (nonatomic,strong) UISearchController *svc;

@end

@implementation TestViewController
-(NSArray *)dataSource{
    if(!_dataSource){
        _dataSource=[User demoData];
    }
    return _dataSource;
}
- (void)viewDidLoad {
    self.mySRTVC=[[SearchResultViewController alloc] init];
    self.mySRTVC.mainSearchController = self;
    self.svc=[[UISearchController alloc] initWithSearchResultsController:self.mySRTVC];
    [self.svc.searchBar sizeToFit];
    self.tableView.tableHeaderView=self.svc.searchBar;
    
    //设置搜索控制器的结果更新代理对象
    self.svc.searchResultsUpdater=self;
    
/*    //Scope:就是效果图中那个分类选择器
    self.svc.searchBar.scopeButtonTitles=@[@"设备",@"软件",@"其他"];
    //为了响应scope改变时候，对选中的scope进行处理 需要设置search代理
    self.svc.searchBar.delegate=self;
*/
    self.definesPresentationContext=YES;
}

#pragma mark - UISearchResultsUpdating

/**实现更新代理*/
-(void)updateSearchResultsForSearchController:(UISearchController *)searchController
{
    //获取到用户输入的数据
    NSString *searchText=searchController.searchBar.text;
    NSMutableArray *searchResult=[[NSMutableArray alloc]init];
    for (User *u in self.dataSource) {
        NSRange range=[u.name rangeOfString:searchText];
        if(range.length> 0){
            [searchResult addObject:u];
        }
    }
    self.mySRTVC.searchResults=searchResult;
     
    /**通知结果ViewController进行更新*/
    [self.mySRTVC.tableView reloadData];
}

#pragma mark - UISearchBarDelegate
/**点击按钮后，进行搜索页更新*/
-(void)searchBar:(UISearchBar *)searchBar selectedScopeButtonIndexDidChange:(NSInteger)selectedScope
{
    [self updateSearchResultsForSearchController:self.svc];
}

 本版本的demo：GitHub链接

用SourceTree上传Xcode的代码到GitHub请参考=>这里