iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

简介: iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一) 一、项目结构和plist文件   二、实现代码 1.说明: 主控制器直接继承UITableViewController // YYViewController.

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

一、项目结构和plist文件

 

二、实现代码

1.说明:

主控制器直接继承UITableViewController

 //  YYViewController.h
//  02-QQ好友列表(基本数据的加载)
//
//  Created by apple on 14-5-31.
//  Copyright (c) 2014年 itcase. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface YYViewController : UITableViewController

@end

在storyboard中进行了关联

2.代码

数据模型部分:

YYQQGroupModel.h文件

 1 //
 2 //  YYQQGroupModel.h
 3 //  02-QQ好友列表(基本数据的加载)
 4 //
 5 //  Created by apple on 14-5-31.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import <Foundation/Foundation.h>
10 
11 @interface YYQQGroupModel : NSObject
12 /**
13  *  名称属性
14  */
15 @property(nonatomic,copy)NSString *name;
16 /**
17  *  是否在线
18  */
19 @property(nonatomic,copy)NSString *online;
20 /**
21  *  好友列表
22  */
23 @property(nonatomic,strong)NSArray *friends;
24 
25 -(instancetype)initWithDict:(NSDictionary *)dict;
26 +(instancetype) qqGroupModelWithDict:(NSDictionary *)dict;
27 @end

YYQQGroupModel.m文件

 1 //
 2 //  YYQQGroupModel.m
 3 //  02-QQ好友列表(基本数据的加载)
 4 //
 5 //  Created by apple on 14-5-31.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import "YYQQGroupModel.h"
10 #import "YYFriendsModel.h"
11 
12 @implementation YYQQGroupModel
13 -(instancetype)initWithDict:(NSDictionary *)dict
14 {
15     if (self=[super init]) {
16         //将字典转换为模型
17         [self setValuesForKeysWithDictionary:dict];
18         
19         //定义一个数组来保存转换后的模型
20         NSMutableArray *models=[NSMutableArray arrayWithCapacity:self.friends.count];
21         for (NSDictionary *dict in self.friends) {
22             YYFriendsModel *friends=[YYFriendsModel friendsWithDict:dict];
23             [models addObject:friends];
24         }
25         _friends=[models copy];
26     }
27     return self;
28 }
29 
30 +(instancetype)qqGroupModelWithDict:(NSDictionary *)dict
31 {
32     return  [[self alloc]initWithDict:dict];
33 }
34 @end

YYFriendsModel.h文件

 1 //
 2 //  YYFriendsModel.h
 3 //  02-QQ好友列表(基本数据的加载)
 4 //
 5 //  Created by apple on 14-5-31.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import <Foundation/Foundation.h>
10 
11 @interface YYFriendsModel : NSObject
12 /**
13  *  每个好友的名称
14  */
15 @property(nonatomic,copy)NSString *name;
16 /**
17  *每个好友的头像
18  */
19 @property(nonatomic,copy)NSString *icon;
20 /**
21  *  每个好友的个性签名
22  */
23 @property(nonatomic,copy)NSString *intro;
24 /**
25  *  该好友是否是vip
26  */
27 @property(nonatomic,assign,getter = isVip)BOOL vip;
28 
29 -(instancetype)initWithDict:(NSDictionary *)dict;
30 +(instancetype)friendsWithDict:(NSDictionary *)dict;
31 @end

YYFriendsModel.m文件

 1 //
 2 //  YYFriendsModel.m
 3 //  02-QQ好友列表(基本数据的加载)
 4 //
 5 //  Created by apple on 14-5-31.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import "YYFriendsModel.h"
10 
11 @implementation YYFriendsModel
12 -(instancetype)initWithDict:(NSDictionary *)dict
13 {
14     if (self=[super init]) {
15         [self setValuesForKeysWithDictionary:dict];
16     }
17     return self;
18 }
19 
20 +(instancetype)friendsWithDict:(NSDictionary *)dict
21 {
22     return [[self alloc]initWithDict:dict];
23 }
24 @end

视图部分

YYfriendCell.h文件

 1 //
 2 //  YYfriendCell.h
 3 //  02-QQ好友列表(基本数据的加载)
 4 //
 5 //  Created by apple on 14-5-31.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import <UIKit/UIKit.h>
10 @class YYFriendsModel;
11 @interface YYfriendCell : UITableViewCell
12 
13 @property(nonatomic,strong)YYFriendsModel *friends;
14 
15 +(instancetype)cellWithTableview:(UITableView *)tableView;
16 @end

YYfriendCell.m文件

 1 //
 2 //  YYfriendCell.m
 3 //  02-QQ好友列表(基本数据的加载)
 4 //
 5 //  Created by apple on 14-5-31.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import "YYfriendCell.h"
10 #import "YYFriendsModel.h"
11 //私有扩展
12 @interface YYfriendCell()
13 
14 
15 @end
16 @implementation YYfriendCell
17 
18 +(YYfriendCell *)cellWithTableview:(UITableView *)tableView
19 {
20     static NSString *identifier=@"qq";
21     YYfriendCell *cell=[tableView dequeueReusableCellWithIdentifier:identifier];
22     if (cell==nil) {
23         //这里使用系统自带的样式
24         cell=[[YYfriendCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:identifier];
25         NSLog(@"创建一个cell");
26     }
27     return cell;
28 }
29 
30 -(void)setFriends:(YYFriendsModel *)friends
31 {
32     _friends=friends;
33     //1.设置头像
34     self.imageView.image=[UIImage imageNamed:_friends.icon];
35        //2.设置昵称
36     self.textLabel.text=_friends.name;
37      //3.设置简介
38     self.detailTextLabel.text=_friends.intro;
39  //判断是否是会员
40     /**
41      *  这里有个注意点,如果不写else设置为黑色,会怎么样?
42      */
43     if (_friends.isVip) {
44         [self.textLabel setTextColor:[UIColor redColor]];
45     }else
46     {
47     [self.textLabel setTextColor:[UIColor blackColor]];
48     }
49 }
50 @end

主控制器部分

YYViewController.m文件

 1 //
 2 //  YYViewController.m
 3 //  02-QQ好友列表(基本数据的加载)
 4 //
 5 //  Created by apple on 14-5-31.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import "YYViewController.h"
10 #import "YYQQGroupModel.h"
11 #import "YYfriendCell.h"
12 #import "YYFriendsModel.h"
13 
14 @interface YYViewController ()
15 /**
16  *  用来保存所有的分组数据
17  */
18 @property(nonatomic,strong)NSArray *groupFriends;
19 @end
20 
21 @implementation YYViewController
22 #pragma mark-懒加载
23 //1.先拿到数据,实现懒加载
24 -(NSArray *)groupFriends
25 {
26     if (_groupFriends==nil) {
27         NSString *fullpath=[[NSBundle mainBundle]pathForResource:@"friends.plist" ofType:nil];
28         NSArray *arrayM=[NSArray arrayWithContentsOfFile:fullpath];
29         
30         NSMutableArray *models=[NSMutableArray arrayWithCapacity:arrayM.count];
31         for (NSDictionary *dict in arrayM) {
32             YYQQGroupModel *group=[YYQQGroupModel qqGroupModelWithDict:dict];
33             [models addObject:group];
34         }
35         _groupFriends=[models copy];
36     }
37     return _groupFriends;
38 }
39 
40 - (void)viewDidLoad
41 {
42     [super viewDidLoad];
43      self.tableView.sectionHeaderHeight = 100;
44 }
45 
46 #pragma mark-  设置数据源
47 //返回多少组
48 //为什么这里不会智能提示?因为这些方法是uitableview协议里的,默认并没有遵守协议,让主控制器类继承uitableviewcontroller后,就已经遵守了
49 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
50 {
51     return self.groupFriends.count;
52 }
53 //每组返回多少行
54 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
55 {
56     //取出对应的组模型
57     YYQQGroupModel *group=self.groupFriends[section];
58     //返回对应组中的好友数
59     return group.friends.count;
60 }
61 //每组每行的内容
62 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
63 {
64     //1.创建cell
65     YYfriendCell *cell=[YYfriendCell cellWithTableview:tableView];
66 
67     //2.设置cell
68     YYQQGroupModel *group=self.groupFriends[indexPath.section];
69     YYFriendsModel *friends=group.friends[indexPath.row];
70     cell.friends=friends;
71     //3.返回一个cell
72     return cell;
73 }
74 
75 
76 #pragma mark - 代理方法
77 // 当一个分组标题进入视野的时候就会调用该方法
78 - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
79 {
80     //    1.创建头部视图
81     UIView *view = [[UIView alloc] init];
82     view.backgroundColor = [UIColor grayColor];
83     //    2.返回头部视图
84     return view;
85 }
86 
87 //设置分组头部标题的高度
88 -(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
89 {
90     return 44;
91 }
92 
93 #pragma mark  隐藏状态栏
94 -(BOOL)prefersStatusBarHidden
95 {
96     return YES;
97 }
98 @end

实现的简陋效果:

三、注意点

(1)设置头部视图的方法

(2)在重写set方法时,应该考虑到回滚。

 

目录
相关文章
|
9月前
|
开发框架 前端开发 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发一
本文介绍了方舟开发框架(ArkUI)及其两种开发范式:基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架,提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言,以组件、动画和状态管理为核心,适合复杂团队协作;类Web开发范式采用HML、CSS、JavaScript三段式开发,适用于简单界面应用,贴近Web开发者习惯。文中还概述了两者的架构和基础能力,帮助开发者选择合适的范式进行高效开发。
318 15
|
9月前
|
编解码 前端开发 Java
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发三
本文介绍了基于声明式UI范式的图形绘制与动画效果实现方法,涵盖绘制图形、添加动画效果及常见组件说明三部分内容。在绘制图形部分,详细讲解了如何通过Circle组件为食物成分表添加圆形标签,以及使用Path组件结合SVG命令绘制自定义图形(如应用Logo)。动画效果部分则展示了如何利用animateTo实现闪屏动画,包括渐出、放大效果,并设置页面跳转;同时介绍了页面间共享元素转场动画的实现方式。最后,文章列举了声明式开发范式中的各类组件及其功能,帮助开发者快速上手构建复杂交互页面。
354 11
|
5月前
|
存储 消息中间件 人工智能
【04】AI辅助编程完整的安卓二次商业实战-寻找修改替换新UI首页图标-菜单图标-消息列表图标-优雅草伊凡
【04】AI辅助编程完整的安卓二次商业实战-寻找修改替换新UI首页图标-菜单图标-消息列表图标-优雅草伊凡
378 4
|
5月前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念,并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容,同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
467 1
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
|
8月前
|
JavaScript 前端开发 UED
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发四
本文介绍了Web组件开发与性能优化的相关内容。在Web组件开发部分,涵盖创建组件、设置样式与属性、添加事件和方法以及场景示例,如动态播放视频。性能提升方面,推荐使用数据懒加载、条件渲染替代显隐控制、Column/Row替代Flex、设置List组件宽高及调整cachedCount减少滑动白块等方法,以优化应用性能与用户体验。
306 56
|
8月前
|
编解码 UED 开发者
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发之常见布局
本文主要介绍了自适应布局与响应式布局的相关内容。自适应布局部分涵盖线性布局、层叠布局、弹性布局和网格布局,详细说明了各布局的特性及使用方法,例如线性布局中的排列、拉伸与缩放,弹性布局的方向、换行与对齐方式等。响应式布局则重点讲解了栅格系统和媒体查询,阐述如何通过栅格组件和媒体查询条件实现不同设备上的适配效果。这些技术帮助开发者灵活应对多尺寸屏幕的设计需求,提升用户体验。
451 55
|
9月前
|
存储 开发框架 API
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发二
本文详细介绍了基于声明式UI开发的健康饮食应用的设计与实现过程。内容涵盖从基础环境搭建到复杂功能实现的全流程,包括创建简单视图、构建布局(如Stack、Flex)、数据模型设计、列表与网格布局构建,以及页面跳转和数据传递等核心功能。 本文通过实际案例深入浅出地解析了声明式UI开发的关键技术和最佳实践,为开发者提供了宝贵的参考。
367 14
|
8月前
|
JavaScript 前端开发 开发者
09.HarmonyOS Next数据驱动UI开发:ForEach与动态渲染完全指南(上)
在现代前端开发中,数据驱动UI已成为主流开发范式。HarmonyOS Next的ArkTS语言和声明式UI框架完美支持这一理念,使开发者能够以更高效、更直观的方式构建复杂应用。
256 1
|
iOS开发
iOS UITableView(列表)
UITableView UITableView内置了两种样式:UITableViewStylePlain,UITableViewStyleGrouped 里的方法: tableView处理步骤 #pragma mark 1.
1543 0