iOS开发之路--微博“更多”页面
程序员文章站
2022-06-16 13:20:14
最终效果图:
moreviewcontroller.m
//
// moreviewcontroller.m
// 20_帅哥no微博
//...
最终效果图:
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