iOS QQ列表效果實現
效果如下：
實現效果主要分為兩個部分：
-
數據模型
-
tableview
要實現tableview需要實現DataSource和delegate
datasource主要作用在于顯示什么數據
delegate主要作用是事件響應即處理
代碼如下：.h
// controller @interface ViewController : UIViewController <UITableViewDataSource, UITableViewDelegate>@property (nonatomic, retain) NSMutableArray dataList; // 數據 @property (nonatomic, retain) UITableView tableView;
@end</pre>
.m 文件
@implementation ViewController- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. [self initDataList]; // 初始化數據 // 向下移20 CGRect frame = self.view.frame; frame.origin.y = 20; frame.size.height = frame.size.height - 20; self.tableView = [[UITableView alloc] initWithFrame:frame style:UITableViewStylePlain]; // 設置委托 self.tableView.dataSource = self; self.tableView.delegate = self; [self.view addSubview:self.tableView]; }
- (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. }
pragma mark - DataSource實現
// 一共幾個section - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { return [self.dataList count]; }
// 每個section下有多少個組 - (NSInteger)tableView:(UITableView )tableView numberOfRowsInSection:(NSInteger)section { List list = [self.dataList objectAtIndex:section]; NSMutableArray array = list.groups; NSInteger all = [array count]; for (Group group in array) { if (group.isDelop) { all = all + [group.friends count]; } } return all; }
// 顯示每個cell - (UITableViewCell )tableView:(UITableView )tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { if ([self isGroup:indexPath]) { return [self getGroupCell:tableView and:indexPath]; // 分組的cell } return [self getFriendCell:tableView and:indexPath]; // 好友cell }
/ 獲得section標題 */ - (NSString )tableView:(UITableView )tableView titleForHeaderInSection:(NSInteger)section { List list = [self.dataList objectAtIndex:section]; return list.title; }
pragma mark - 點擊事件
// 單擊的處理，若是分組 則展開，否則不處理 - (void)tableView:(UITableView )tableView didSelectRowAtIndexPath:(NSIndexPath )indexPath { Group *group = [self isGroup:indexPath]; // 如果點擊的是分組，則取當前狀態的反并更新數據 if (group) { group.isDelop = !group.isDelop; [self.tableView reloadData]; } }
pragma mark - 獲取點擊位置的數據
/ 所點位置是否是分組，返回所點分組數據 */ - (Group )isGroup:(NSIndexPath )indexPath { int num = -1; NSUInteger index = indexPath.row; List list = [_dataList objectAtIndex:indexPath.section]; NSMutableArray groups = list.groups; for (Group group in groups) { num++; if (index == num) { return group; } if (group.isDelop) { num += [group.friends count]; if (index <= num) { return nil; } } } return nil; }
/ 所點位置是否是好友，并返回所點好友數據 */ - (Friend )isFriend:(NSIndexPath )indexPath { int num = -1; NSUInteger index = indexPath.row; List list = [_dataList objectAtIndex:indexPath.section]; // 獲取點的section NSMutableArray groups = list.groups; // 獲取section下的所有分組 for (Group group in groups) { num++; if (group.isDelop) { int temp = num; num += [group.friends count]; if (index <= num) { int k = index - temp - 1; return [group.friends objectAtIndex:k]; } } } return nil; }
pragma mark - 初始化cell
/ 設置分組的cell */ - (UITableViewCell )getGroupCell:(UITableView )tableView and:(NSIndexPath )indexPath { Group nowGroup = [self isGroup:indexPath]; static NSString CellWithIdentifier = @"GroupCell"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellWithIdentifier]; if (cell == nil) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:CellWithIdentifier]; cell.backgroundColor = [UIColor colorWithRed:227/250.0 green:168/250.0 blue:105/250.0 alpha:1]; } cell.textLabel.text = nowGroup.title; cell.detailTextLabel.text = nowGroup.detail; if (nowGroup.isDelop) { cell.imageView.image = [UIImage imageNamed:@"collect.png"]; } else { cell.imageView.image = [UIImage imageNamed:@"tomore.png"]; } return cell; }
/ 設置好友cell */ - (UITableViewCell )getFriendCell:(UITableView )tableView and:(NSIndexPath )indexPath { Friend nowFriend = [self isFriend:indexPath]; static NSString CellWithIdentifier = @"FriendCell"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellWithIdentifier]; if (cell == nil) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellWithIdentifier]; } // 設置cell數據 cell.textLabel.text = nowFriend.name; cell.detailTextLabel.text = nowFriend.state; cell.imageView.image = [UIImage imageNamed:nowFriend.image]; return cell; }
pragma mark - 大小樣式設置
- (CGFloat)tableView:(UITableView )tableView heightForRowAtIndexPath:(NSIndexPath )indexPath { if ([self isGroup:indexPath]) { return 30; // 分組高 } return 40; // 好友的行高 }
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section { return 20; }
pragma mark - 所顯示的數據
/ 數據初始化構造 */ - (void)initDataList { Friend friend1 = [[Friend alloc] initWithImage:@"back1.jpg" name:@"苦海無涯" states:@"[在線] 哎 心疼!!"]; Friend friend2 = [[Friend alloc] initWithImage:@"back2.jpg" name:@"段天涯" states:@"[在線] 心疼!!"]; Friend friend3 = [[Friend alloc] initWithImage:@"back3.jpg" name:@"小妹妹" states:@"[在線] 疼!!"]; Friend friend4 = [[Friend alloc] initWithImage:@"back4.jpg" name:@"呼哈" states:@"[在線]心疼!!"]; NSMutableArray array1 = [NSMutableArray arrayWithObjects:friend1, friend2, friend3, friend4, nil]; Group group1 = [[Group alloc] initWithTitle:@"家人" delop:NO friends:array1]; group1.detail = @"4/4"; Friend friend5 = [[Friend alloc] initWithImage:@"back5.jpg" name:@"段" states:@"[在線] 心疼!!"]; Friend friend6 = [[Friend alloc] initWithImage:@"back6.jpg" name:@"小商人" states:@"[在線] 疼!!"]; Friend friend7 = [[Friend alloc] initWithImage:@"back7.jpg" name:@"大哥" states:@"[離線] 心疼!!"]; NSMutableArray array2 = [NSMutableArray arrayWithObjects:friend5, friend6, friend7, nil]; Group group2 = [[Group alloc] initWithTitle:@"朋友" delop:NO friends:array2]; group2.detail = @"2/3"; NSMutableArray l1 = [NSMutableArray arrayWithObjects:group1, group2, nil]; List list1 = [[List alloc] initWithTitle:@"我的好友" groups:l1]; Friend mobile = [[Friend alloc] initWithImage:@"back1.jpg" name:@"我的手機" states:@"[離線]手機未上線"]; NSMutableArray array = [NSMutableArray arrayWithObjects:mobile, nil]; Group group = [[Group alloc] initWithTitle:@"我的設備" delop:NO friends:array]; group.detail = @"0/1"; NSMutableArray l2 = [NSMutableArray arrayWithObjects:group, nil]; List *list2 = [[List alloc] initWithTitle:@"我的手機" groups:l2]; self.dataList = [NSMutableArray arrayWithObjects:list2, list1, nil]; }
@end</pre>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
數據模型實現
// 好友數據對象 @interface Friend : NSObject@property (nonatomic, retain) NSString image; // 頭像 @property (nonatomic, retain) NSString name; // 昵稱 @property (nonatomic, retain) NSString *state; // 說說
@end
// 分組對象 @interface Group : NSObject
@property (nonatomic, assign) BOOL isDelop; // 是否展開 @property (nonatomic, retain) NSString title; // 分組名稱 @property (nonatomic, retain) NSString detail; // 在線狀態 @property (nonatomic, retain) NSMutableArray *friends; // 好友列表
@end
// 整個qq列表 @interface List : NSObject
@property (nonatomic, retain) NSString title; // 列表名稱 @property (nonatomic, retain) NSMutableArray groups; // 列表內分組
@end</pre>
數據模型的構造方法就不貼上來了，實現部分每個類只有一個構造方法