iOS開發之路--微博“更多”頁面_IOS

最終效果圖:

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,對應的值是數組,數組的長度就是有多少個分組,數組的每一個元素也是一個數組,    // 由不同的分組,組成的數組  NSArray *_groups;}@end@implementation MoreViewController- (void)viewDidLoad{  [super viewDidLoad];  log(@"view %@",NSStringFromCGRect(self.view.frame)) ;    // 1.設定導航條上面 右邊的設定按鈕  [self setRightBarButtonItem];    // 2.載入more.plist  [self loadPlistOfMore];    // 3.設定tableView的全域背景  [self setTableViewGlobalBg];  // 4.添加 退出按鈕 到tableView的最底部的TableFooterView  [self addEixtBtnAtBottom];}// 1,設定導航條上面 右邊的按鈕- (void)setRightBarButtonItem{  self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"設定" style:UIBarButtonItemStylePlain target:self action:@selector(settings)];}// 2,載入more.plist檔案- (void)loadPlistOfMore{  NSURL *url = [[NSBundle mainBundle] URLForResource:@"more" withExtension:@"plist"];  // 由一個個分組 組成的數組,分組的成員也就是數組,則一行行組成的數組  _groups = [NSDictionary dictionaryWithContentsOfURL:url][@"zh_CN"];}// 3,設定tableView的全域背景- (void)setTableViewGlobalBg{  // 清除ios 7 中tableView頂部的多出的空白地區  self.automaticallyAdjustsScrollViewInsets = NO;  // 設定scrollView額外的捲動區域//  self.tableView.contentInset = UIEdgeInsetsMake(<#CGFloat top#>, <#CGFloat left#>, <#CGFloat bottom#>, <#CGFloat right#>)  // 重要~ ~當tableview的樣式為group時，如果想更換背景，必須先清除條紋狀的內建的backgroundView,然後才可以設定tableView的背景顏色  self.tableView.backgroundView = nil;  self.tableView.backgroundColor = kGlobalBg;    // 縮小每一分組之間的間距  self.tableView.sectionHeaderHeight = 0;  self.tableView.sectionFooterHeight = 5;}// 4,建立退出按鈕 並添加到tableView的最底部的TableFooterView- (void)addEixtBtnAtBottom{  // 1,建立一個footerView,將它作為tableView的TableFooterView  UIView *footerView = [[UIView alloc] init];  // tableView的TableFooterView的寬度固定是320,只有高度可調節  footerView.frame = CGRectMake(0, 0, 320, 60);  // 將剛才建立的footerView作為tableView的TableFooterView,目的是防止使用者點擊底部dockItem時不小心點到了退出按鈕,因此要設定一個額外的空間,補充一下TableFooterView的寬度固定是320  self.tableView.tableFooterView = footerView;      // 2,建立退出按鈕 並添加到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];  // 按鈕的監聽點擊事件  [btnExit addTarget:self action:@selector(exitBtnClick) forControlEvents:UIControlEventTouchUpInside];    // 分類方法,設定按鈕正常和高亮時背景圖片(可展開)  [btnExit setBtnBgImgForNormalAndHighightedWithName:@"common_button_red.png"];  // 設定按鈕上的文字,最後一組,數組只有一行,每一行就是一個字典  NSString *btnTitle = [_groups lastObject][0][@"name"];  [btnExit setTitle:btnTitle forState:UIControlStateNormal];        // 3,最重要的一步,將剛才建立的 退出按鈕 添加到tableView的TableFooterView  //[footerView addSubview:btnExit];  [self.tableView.tableFooterView addSubview:btnExit];}// 響應點擊設定點擊事件- (void)settings{  log(@"點擊了設定按鈕");}// 點擊 退出按鈕- (void)exitBtnClick{  // cancelButtonTitle 黑色  // destructiveButtonTitle 紅色  // otherButtonTitles 灰白色  UIActionSheet *actionSheet = [[UIActionSheet alloc] initWithTitle:@"確定退出此帳號？" delegate:nil cancelButtonTitle:@"取消" destructiveButtonTitle:@"紅色" otherButtonTitles:@"其他", nil];    // UIActionSheet最好是顯示到Window上面,這樣就不怕點不中了,因為有時候控制器的view不一定占整個視窗大小  [actionSheet showInView:self.view.window];}// 點擊 設定按鈕- (void)setting{  log(@"設定");}// 代理方法,點擊了某行時調用- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{  [tableView deselectRowAtIndexPath:indexPath animated:YES];}#pragma mark - 資料來源方法// 共有多少組 最後一個組是特別的退出按鈕,故不進入迴圈使用- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{  return _groups.count - 1;}// 每一組的行數- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{  // 取得由每一行組成的數組  NSArray *rows = _groups[section];  // 返回該組的行數  return rows.count;}// 每一組的每一行顯示特有的內容- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{  static NSString *cellID = @"beyond";  // 1.先獲得池中的cell  UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellID];  // 如果為空白,才建立新的  if (cell == nil) {    // 建立新的cell    cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellID];    // 1.1.清除文字標籤的背景    cell.textLabel.backgroundColor = [UIColor clearColor];    // 1.2.設定文字標籤高亮時的文字顏色同樣為預設的文字顏色 (不讓它變色)    cell.textLabel.highlightedTextColor = cell.textLabel.textColor;        // 1.3.重點,建立時就,初始化cell的背景view和選中時的背景view    UIImageView *bgImgView = [[UIImageView alloc] init];    cell.backgroundView = bgImgView;        UIImageView *selectedBgImgView = [[UIImageView alloc] init];    cell.selectedBackgroundView = selectedBgImgView;  }  // 2.設定cell獨一無二的內容  // 設定顯示的標題文字 第幾組-->第幾行--->字典  cell.textLabel.text = _groups[indexPath.section][indexPath.row][@"name"];    // 3.設定cell的背景圖片  // 先取出cell背景view  UIImageView *bgImgView = (UIImageView *)cell.backgroundView;  UIImageView *selectedBgImgView = (UIImageView *)cell.selectedBackgroundView;    // 分情況得出cell的背景圖片檔案名稱  // 該組中,由每一行組成的數組  NSArray *rows = _groups[indexPath.section];  // 得到該組的,總行數  int rowNum = rows.count;  NSString *name = nil;    if (rowNum == 1) {    // 如果所在組只有一行,使用四角全是半形的圖片    name = @"common_card_background.png";  } else if (indexPath.row == 0) {    // 如果所在組不只一行,且當前行是所在組的第一行,使用上半為圓角的圖片    name = @"common_card_top_background.png";  } else if (indexPath.row == rowNum - 1) {    // 如果所在組不只一行,且當前行是所在組的最後一行,使用下半為圓角的圖片    name = @"common_card_bottom_background.png";  } else { // 中間    // 如果所在組不只一行,且當前行不在組的第一行也不在組的最後一行,使用四周無圓角的圖片    name = @"common_card_middle_background.png";  }    // 設定cell的正常和選中時的背景圖片  bgImgView.image = [UIImage imageStretchedWithName:name];  selectedBgImgView.image = [UIImage imageStretchedWithName:[name fileNameInsertSuffixBeforeExtension:@"_highlighted"]];    // 4.設定最右邊的箭頭指標,分文字和圖片兩種情況討論  if (indexPath.section == 2) {    // 如果是第2組 ,則顯示文字,"閱讀模式 - 主題"    UILabel *label = [[UILabel alloc] init];    // 清除標籤背景色    label.backgroundColor = [UIColor clearColor];    // 標籤文字大小    label.font = [UIFont systemFontOfSize:13];    // 標籤文字顏色    label.textColor = [UIColor grayColor];    // 標籤文字靠右    label.textAlignment = NSTextAlignmentRight;    // 標籤frame的寬高    label.bounds = CGRectMake(0, 0, 100, 30);    // 該組的第1行顯示 "有圖模式" ,第2行顯示 "經典主題"    label.text = (indexPath.row == 0) ? @"有圖模式" : @"經典主題";    // 最後將自訂最右邊的view設定為cell的附屬view    cell.accessoryView = label;  } else {    // 如果是其他的組,顯示向右的圖片箭頭    cell.accessoryView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"common_icon_arrow.png"]];  }  // 5.返回cell  return cell;}@end

『更多』頁面的資料來源more.plist