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

tableView前端基础设计

　　　　　　实现的最终效果

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

一、TabBar编辑

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

 1 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
 2     // Override point for customization after application launch.
 3     
 4     //创建window
 5     self.window=[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
 6     self.window.backgroundColor=[UIColor clearColor];
 7     
 8     //初始化一个tabBar
 9     self.tb=[[UITabBarController alloc] init];
10     
11     //设置为window的根控制器
12     self.window.rootViewController=self.tb;
13     self.tb.tabBar.backgroundColor=[UIColor whiteColor];
14     
15     //设置状态栏的样式，控制不被navigationBar的颜色覆盖
16     [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent animated:NO];
17     
18     //创建子控制器
19     [self MainLoadView];
20     [self.window makeKeyAndVisible];
21     return YES;
22 }
23 
24 -(void)MainLoadView{
25     [[UINavigationBar appearance] setBarTintColor:[UIColor blackColor]];
26     
27     TestViewController *c1=[[TestViewController alloc] init];
28     UINavigationController *nb1=[[UINavigationController alloc]initWithRootViewController:c1];
29     //wx.tabBarItem.title=@"message";
30     //wx.tabBarItem = [[UITabBarItem alloc]initWithTabBarSystemItem:UITabBarSystemItemContacts tag:1];
31     c1.navigationItem.titleView=[self NavigationTitle:@"微信"];
32     
33     contectViewController *c2=[[contectViewController alloc] init];
34     UINavigationController *nb2=[[UINavigationController alloc]initWithRootViewController:c2];
35     c2.navigationItem.titleView=[self NavigationTitle:@"通讯录"];
36     
37     findViewController *c3=[[findViewController alloc] init];
38     UINavigationController *nb3=[[UINavigationController alloc]initWithRootViewController:c3];
39     c3.navigationItem.titleView=[self NavigationTitle:@"发现"];
40     
41     
42     meViewController *c4=[[meViewController alloc] init];
43     UINavigationController *nb4=[[UINavigationController alloc]initWithRootViewController:c4];
44     c4.navigationItem.titleView=[self NavigationTitle:@"我"];
45     
46     self.tb.viewControllers=@[nb1,nb2,nb3,nb4];
47     [self customTabBar];
48     
49 }
50 
51 
52 -(UILabel *)NavigationTitle:(NSString *)TitleText{
53     UILabel *title=[[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 44)];
54     title.backgroundColor=[UIColor clearColor];
55     title.textColor=[UIColor whiteColor];
56     title.font=[UIFont boldSystemFontOfSize:20];
57     title.textAlignment=UITextAlignmentCenter;
58     title.text=TitleText;
59     return title;
60 }
61 
62 //加载自定义的TabBarItem
63 -(void)customTabBar{
64     UITabBar *tabBar=self.tb.tabBar;
65     UITabBarItem *tabBarItem0 = [tabBar.items objectAtIndex:0];
66     UITabBarItem *tabBarItem1 = [tabBar.items objectAtIndex:1];
67     UITabBarItem *tabBarItem2 = [tabBar.items objectAtIndex:2];
68     UITabBarItem *tabBarItem3 = [tabBar.items objectAtIndex:3];
69 
70 
71     tabBarItem0.image = [[UIImage imageNamed:@"wechat-close.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
72     tabBarItem0.selectedImage = [[UIImage imageNamed:@"wechat-open.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
73     tabBarItem0.title=@"微信";
74     
75     tabBarItem1.image = [[UIImage imageNamed:@"contact-close.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
76     tabBarItem1.selectedImage = [[UIImage imageNamed:@"contact-open.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
77     tabBarItem1.title=@"通讯录";
78     
79     tabBarItem2.image = [[UIImage imageNamed:@"find-close.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
80     tabBarItem2.selectedImage = [[UIImage imageNamed:@"find-open.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
81     tabBarItem2.title=@"发现";
82     
83     tabBarItem3.image = [[UIImage imageNamed:@"me-close.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
84     tabBarItem3.selectedImage = [[UIImage imageNamed:@"me-open.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
85     tabBarItem3.title=@"我";
86     
87     [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:
88                                                        kUIColorFromRGB(0x7a7e83), NSForegroundColorAttributeName,
89                                                        nil] forState:UIControlStateNormal];
90     [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:
91                                                       kUIColorFromRGB(0x1aad19), NSForegroundColorAttributeName,
92                                                        nil] forState:UIControlStateSelected];
93 }

二、搜索栏编辑

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

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

 1 @interface contectViewController ()<UISearchBarDelegate,UISearchDisplayDelegate>
 2 @property (nonatomic,strong) UISearchBar *searchBar;
 3 @property (nonatomic,strong) UISearchDisplayController *display;
 4 @end
 5 
 6 @implementation contectViewController
 7 - (void)viewDidLoad {
 8     [self.searchBar setShowsScopeBar:NO];
 9     [self search];
10 }
11 
12 -(void)search{
13     self.searchBar=[[UISearchBar alloc] init];
14     self.searchBar.placeholder=@"Search";
15     self.tableView.tableHeaderView = self.searchBar;
16     
17     self.display=[[UISearchDisplayController alloc] initWithSearchBar:self.searchBar contentsController:self];
18     
19     self.searchBar.delegate=self;
20     self.display.searchResultsDataSource=self;
21     self.display.searchResultsDelegate=self;
22     self.display.delegate=self;
23 }
24 
25  //添加索引
26 -(NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView{
27  
28      return self.titlearr;
29  
30  }
31  
32 -(NSInteger) tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index{
33     NSInteger count=0;
34     for(NSString *character in self.titlearr){
35         if([[character uppercaseString] hasPrefix:title]){
36             return count;
37         }
38         count++;
39     }
40     return 0;
41 }
42 
43 -(BOOL)searchDisplayController:(UISearchDisplayController *)controller shouldReloadTableForSearchString:(nullable NSString *)searchString{
44 
45     NSPredicate *resultPredicate=[NSPredicate predicateWithFormat:@"self contains[cd] %@",searchString];
46     self.searcharr=[self.contect filteredArrayUsingPredicate:resultPredicate];
47     return YES;
48 }
49 @end

改版后（SearchBarController的相关代码）

 1 @interface TestViewController () 
 2 @property (nonatomic,strong) SearchResultViewController *mySRTVC;
 3 @property (nonatomic,strong) UISearchController *svc;
 4 
 5 @end
 6 
 7 @implementation TestViewController
 8 -(NSArray *)dataSource{
 9     if(!_dataSource){
10         _dataSource=[User demoData];
11     }
12     return _dataSource;
13 }
14 - (void)viewDidLoad {
15     self.mySRTVC=[[SearchResultViewController alloc] init];
16     self.mySRTVC.mainSearchController = self;
17     self.svc=[[UISearchController alloc] initWithSearchResultsController:self.mySRTVC];
18     [self.svc.searchBar sizeToFit];
19     self.tableView.tableHeaderView=self.svc.searchBar;
20     
21     //设置搜索控制器的结果更新代理对象
22     self.svc.searchResultsUpdater=self;
23     
24 /*    //Scope:就是效果图中那个分类选择器
25     self.svc.searchBar.scopeButtonTitles=@[@"设备",@"软件",@"其他"];
26     //为了响应scope改变时候，对选中的scope进行处理 需要设置search代理
27     self.svc.searchBar.delegate=self;
28 */
29     self.definesPresentationContext=YES;
30 }
31 
32 #pragma mark - UISearchResultsUpdating
33 
34 /**实现更新代理*/
35 -(void)updateSearchResultsForSearchController:(UISearchController *)searchController
36 {
37     //获取到用户输入的数据
38     NSString *searchText=searchController.searchBar.text;
39     NSMutableArray *searchResult=[[NSMutableArray alloc]init];
40     for (User *u in self.dataSource) {
41         NSRange range=[u.name rangeOfString:searchText];
42         if(range.length> 0){
43             [searchResult addObject:u];
44         }
45     }
46     self.mySRTVC.searchResults=searchResult;
47      
48     /**通知结果ViewController进行更新*/
49     [self.mySRTVC.tableView reloadData];
50 }
51 
52 #pragma mark - UISearchBarDelegate
53 /**点击按钮后，进行搜索页更新*/
54 -(void)searchBar:(UISearchBar *)searchBar selectedScopeButtonIndexDidChange:(NSInteger)selectedScope
55 {
56     [self updateSearchResultsForSearchController:self.svc];
57 }

本版本的demo：GitHub链接

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