tableview前端基礎設計（初級版）

時間 2019-11-19

標籤 tableview 前端基礎設計初級简体版

原文原文鏈接

tableView前端基礎設計

　　　　　　實現的最終效果html

　　操做目的：熟悉純代碼編輯TableView和經常使用的相關控件SearchBar、NavigationBar、TabBar等，以及佈局和基本功能的實現。前端

1、TabBar編輯

　　TabBar（標籤欄）爲實現多視圖呈現的控制器，由於控制視圖呈現，因此要在app完成以前進行設置。學習連接ios

 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 }

2、搜索欄編輯

　　在ios8.0以前搜索欄是由SearchBar和SearchDisplayController聯合控制呈現的，在ios8.0以後是由SearchController單獨控制呈現。爲了學習瞭解兩種控制方式的區別，我在微信和通信錄頁面用了兩種不一樣的控制方式。最終體驗就是改版後的省事多了，實現效果沒有多大差異。（本測試中因爲數據源格式不一樣因此呈現有些許差異）學習連接git

改版前(關於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 }