iOS開發(fā)之路--微博“更多”頁面
更新時間:2014年08月26日 15:28:34 投稿:hebedich
本文是IOS開發(fā)之路系列文章第五篇,主要講訴了,如何制作微博的更多頁面,并附上效果圖及源碼,需要的朋友可以參考下,希望能有所幫助
最終效果圖:
MoreViewController.m
// // MoreViewController.m // 20_帥哥no微博 // // Created by beyond on 14-8-4. // Copyright (c) 2014年 com.beyond. All rights reserved. // #import "MoreViewController.h" @interface MoreViewController () { // more.plist根是字典,有兩對Key Value,其中有一對是zh_CN,對應(yīng)的值是數(shù)組,數(shù)組的長度就是有多少個分組,數(shù)組的每一個元素也是一個數(shù)組, // 由不同的分組,組成的數(shù)組 NSArray *_groups; } @end @implementation MoreViewController - (void)viewDidLoad { [super viewDidLoad]; log(@"view %@",NSStringFromCGRect(self.view.frame)) ; // 1.設(shè)置導(dǎo)航條上面 右邊的設(shè)置按鈕 [self setRightBarButtonItem]; // 2.加載more.plist [self loadPlistOfMore]; // 3.設(shè)置tableView的全局背景 [self setTableViewGlobalBg]; // 4.添加 退出按鈕 到tableView的最底部的TableFooterView [self addEixtBtnAtBottom]; } // 1,設(shè)置導(dǎo)航條上面 右邊的按鈕 - (void)setRightBarButtonItem { self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"設(shè)置" style:UIBarButtonItemStylePlain target:self action:@selector(settings)]; } // 2,加載more.plist文件 - (void)loadPlistOfMore { NSURL *url = [[NSBundle mainBundle] URLForResource:@"more" withExtension:@"plist"]; // 由一個個分組 組成的數(shù)組,分組的成員也就是數(shù)組,則一行行組成的數(shù)組 _groups = [NSDictionary dictionaryWithContentsOfURL:url][@"zh_CN"]; } // 3,設(shè)置tableView的全局背景 - (void)setTableViewGlobalBg { // 清除ios 7 中tableView頂部的多出的空白區(qū)域 self.automaticallyAdjustsScrollViewInsets = NO; // 設(shè)置scrollView額外的滾動區(qū)域 // self.tableView.contentInset = UIEdgeInsetsMake(<#CGFloat top#>, <#CGFloat left#>, <#CGFloat bottom#>, <#CGFloat right#>) // 重要~ ~當(dāng)tableview的樣式為group時,如果想更換背景,必須先清除條紋狀的自帶的backgroundView,然后才可以設(shè)置tableView的背景顏色 self.tableView.backgroundView = nil; self.tableView.backgroundColor = kGlobalBg; // 縮小每一分組之間的間距 self.tableView.sectionHeaderHeight = 0; self.tableView.sectionFooterHeight = 5; } // 4,創(chuàng)建退出按鈕 并添加到tableView的最底部的TableFooterView - (void)addEixtBtnAtBottom { // 1,創(chuàng)建一個footerView,將它作為tableView的TableFooterView UIView *footerView = [[UIView alloc] init]; // tableView的TableFooterView的寬度固定是320,只有高度可調(diào)節(jié) footerView.frame = CGRectMake(0, 0, 320, 60); // 將剛才創(chuàng)建的footerView作為tableView的TableFooterView,目的是防止用戶點擊底部dockItem時不小心點到了退出按鈕,因此要設(shè)置一個額外的空間,補(bǔ)充一下TableFooterView的寬度固定是320 self.tableView.tableFooterView = footerView; // 2,創(chuàng)建退出按鈕 并添加到tableView的最底部的TableFooterView UIButton *btnExit = [UIButton buttonWithType:UIButtonTypeCustom]; // footerView是作為tableView的TableFooterView存在,按鈕是加到了footerView里面,這兒按鈕的frame x 10 y 5是相對于footerView的 btnExit.frame = CGRectMake(10, 5, 300, 40); // 按鈕上字體大小 btnExit.titleLabel.font = [UIFont systemFontOfSize:17]; // 按鈕的監(jiān)聽點擊事件 [btnExit addTarget:self action:@selector(exitBtnClick) forControlEvents:UIControlEventTouchUpInside]; // 分類方法,設(shè)置按鈕正常和高亮?xí)r背景圖片(可拉伸) [btnExit setBtnBgImgForNormalAndHighightedWithName:@"common_button_red.png"]; // 設(shè)置按鈕上的文字,最后一組,數(shù)組只有一行,每一行就是一個字典 NSString *btnTitle = [_groups lastObject][0][@"name"]; [btnExit setTitle:btnTitle forState:UIControlStateNormal]; // 3,最重要的一步,將剛才創(chuàng)建的 退出按鈕 添加到tableView的TableFooterView //[footerView addSubview:btnExit]; [self.tableView.tableFooterView addSubview:btnExit]; } // 響應(yīng)點擊設(shè)置點擊事件 - (void)settings { log(@"點擊了設(shè)置按鈕"); } // 點擊 退出按鈕 - (void)exitBtnClick { // cancelButtonTitle 黑色 // destructiveButtonTitle 紅色 // otherButtonTitles 灰白色 UIActionSheet *actionSheet = [[UIActionSheet alloc] initWithTitle:@"確定退出此賬號?" delegate:nil cancelButtonTitle:@"取消" destructiveButtonTitle:@"紅色" otherButtonTitles:@"其他", nil]; // UIActionSheet最好是顯示到Window上面,這樣就不怕點不中了,因為有時候控制器的view不一定占整個窗口大小 [actionSheet showInView:self.view.window]; } // 點擊 設(shè)置按鈕 - (void)setting { log(@"設(shè)置"); } // 代理方法,點擊了某行時調(diào)用 - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { [tableView deselectRowAtIndexPath:indexPath animated:YES]; } #pragma mark - 數(shù)據(jù)源方法 // 共有多少組 最后一個組是特別的退出按鈕,故不進(jìn)入循環(huán)使用 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { return _groups.count - 1; } // 每一組的行數(shù) - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { // 取得由每一行組成的數(shù)組 NSArray *rows = _groups[section]; // 返回該組的行數(shù) return rows.count; } // 每一組的每一行顯示特有的內(nèi)容 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *cellID = @"beyond"; // 1.先獲得池中的cell UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellID]; // 如果為空,才創(chuàng)建新的 if (cell == nil) { // 創(chuàng)建新的cell cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellID]; // 1.1.清除文本標(biāo)簽的背景 cell.textLabel.backgroundColor = [UIColor clearColor]; // 1.2.設(shè)置文本標(biāo)簽高亮?xí)r的文字顏色同樣為默認(rèn)的文字顏色 (不讓它變色) cell.textLabel.highlightedTextColor = cell.textLabel.textColor; // 1.3.重點,創(chuàng)建時就,初始化cell的背景view和選中時的背景view UIImageView *bgImgView = [[UIImageView alloc] init]; cell.backgroundView = bgImgView; UIImageView *selectedBgImgView = [[UIImageView alloc] init]; cell.selectedBackgroundView = selectedBgImgView; } // 2.設(shè)置cell獨一無二的內(nèi)容 // 設(shè)置顯示的標(biāo)題文字 第幾組-->第幾行--->字典 cell.textLabel.text = _groups[indexPath.section][indexPath.row][@"name"]; // 3.設(shè)置cell的背景圖片 // 先取出cell背景view UIImageView *bgImgView = (UIImageView *)cell.backgroundView; UIImageView *selectedBgImgView = (UIImageView *)cell.selectedBackgroundView; // 分情況得出cell的背景圖片文件名 // 該組中,由每一行組成的數(shù)組 NSArray *rows = _groups[indexPath.section]; // 得到該組的,總行數(shù) int rowNum = rows.count; NSString *name = nil; if (rowNum == 1) { // 如果所在組只有一行,使用四角全是半角的圖片 name = @"common_card_background.png"; } else if (indexPath.row == 0) { // 如果所在組不只一行,且當(dāng)前行是所在組的第一行,使用上半為圓角的圖片 name = @"common_card_top_background.png"; } else if (indexPath.row == rowNum - 1) { // 如果所在組不只一行,且當(dāng)前行是所在組的最后一行,使用下半為圓角的圖片 name = @"common_card_bottom_background.png"; } else { // 中間 // 如果所在組不只一行,且當(dāng)前行不在組的第一行也不在組的最后一行,使用四周無圓角的圖片 name = @"common_card_middle_background.png"; } // 設(shè)置cell的正常和選中時的背景圖片 bgImgView.image = [UIImage imageStretchedWithName:name]; selectedBgImgView.image = [UIImage imageStretchedWithName:[name fileNameInsertSuffixBeforeExtension:@"_highlighted"]]; // 4.設(shè)置最右邊的箭頭指示器,分文字和圖片兩種情況討論 if (indexPath.section == 2) { // 如果是第2組 ,則顯示文字,"閱讀模式 - 主題" UILabel *label = [[UILabel alloc] init]; // 清除標(biāo)簽背景色 label.backgroundColor = [UIColor clearColor]; // 標(biāo)簽文字大小 label.font = [UIFont systemFontOfSize:13]; // 標(biāo)簽文字顏色 label.textColor = [UIColor grayColor]; // 標(biāo)簽文字靠右 label.textAlignment = NSTextAlignmentRight; // 標(biāo)簽frame的寬高 label.bounds = CGRectMake(0, 0, 100, 30); // 該組的第1行顯示 "有圖模式" ,第2行顯示 "經(jīng)典主題" label.text = (indexPath.row == 0) ? @"有圖模式" : @"經(jīng)典主題"; // 最后將自定義最右邊的view設(shè)置為cell的附屬view cell.accessoryView = label; } else { // 如果是其他的組,顯示向右的圖片箭頭 cell.accessoryView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"common_icon_arrow.png"]]; } // 5.返回cell return cell; } @end
『更多』頁面的數(shù)據(jù)來源more.plist
相關(guān)文章
iOS通過Runtime實現(xiàn)友盟統(tǒng)計的實例代碼
本篇文章主要介紹了iOS通過Runtime實現(xiàn)友盟統(tǒng)計的實例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-06-06iOS App使用設(shè)計模式中的模板方法模式開發(fā)的示例
這篇文章主要介紹了iOS應(yīng)用使用設(shè)計模式中的模板方法模式開發(fā)的示例,例子代碼為Objective-C語言,文中還與Java的相關(guān)實現(xiàn)進(jìn)行類比,需要的朋友可以參考下2016-03-03IOS 改變導(dǎo)航欄返回按鈕的標(biāo)題實例詳解
這篇文章主要介紹了IOS 改變導(dǎo)航欄返回按鈕的標(biāo)題實例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04