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(, , , )];
     title.backgroundColor=[UIColor clearColor];
     title.textColor=[UIColor whiteColor];
     title.font=[UIFont boldSystemFontOfSize:];
     title.textAlignment=UITextAlignmentCenter;
     title.text=TitleText;
     return title;
 }

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

     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=;
     for(NSString *character in self.titlearr){
         if([[character uppercaseString] hasPrefix:title]){
             return count;
         }
         count++;
     }
     return ;
 }

 -(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> ){
             [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请参考=>这里