[iOS]實現QQ好友列表類型的下拉型列表

在實際開發中,我們用的最多的控件可以說非UITableView莫屬了,我們使用UITableView來展示一系列類型系統的信息,但是,普通的UITableView使用無法實現下拉顯示具體的信息。所以今天就記錄一下下拉型列表的實現。
先上效果圖,這里我展示的是全國的省市列表:


2.gif

先說一下思路,按MVC模式按順序說:

M層

要封裝兩個模型,其中一個模型用來保存每一個省份數據,其中包括(1)最基本的省份名稱 (2)設置一個標志,標志當前省份是否被點擊展開顯示 (3)一個數組,用來保存一組市名稱。這個市名稱就是另外一個模型。

V層

我們要利用UITableView的HeaderView視圖來展示省份信息,用我們常用的UITableViewCell來展示市信息。

C層

我們會在HeaderView上面添加點擊手勢,每一次點擊我們都會根據當前的情況對這個Section下面的cell進行更新,這樣就達到了點擊下拉出現子列表的效果了。

直接上代碼吧,允許我偷一下懶。。。(づ ̄ 3 ̄)づ
ViewController.h文件

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@end

ViewController.m文件

//
//  ViewController.m
//  CellClickDemo
//
//  Created by 馬德茂 on 16/1/11.
//  Copyright ? 2016年 馬德茂. All rights reserved.
//

#import "ViewController.h"
#import "MDMHeaderView.h"

@interface ViewController ()<UITableViewDataSource, UITableViewDelegate>
@property (weak, nonatomic) IBOutlet UITableView *tableView;

@property (nonatomic, strong) NSMutableArray *listArray;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.tableView.delegate = self;
    self.tableView.dataSource = self;
    [self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"cell"];
    [self.tableView registerClass:[MDMHeaderView class] forHeaderFooterViewReuseIdentifier:@"header"];
    
}

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return self.listArray.count;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    if ([[[self.listArray objectAtIndex:section] objectForKey:@"flag"] isEqualToString:@"NO"]) {
        return 0;
    } else {
        return [[[self.listArray objectAtIndex:section] objectForKey:@"city"] count];
    }
}

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    MDMHeaderView *view = [tableView dequeueReusableHeaderFooterViewWithIdentifier:@"header"];
    view.label.text = [[self.listArray objectAtIndex:section] objectForKey:@"name"];
    view.tag = section;
    
    if (view.gestureRecognizers == nil) {
        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(headerViewClickedAction:)];
        [view addGestureRecognizer:tap];
    }
    
    return view;
}

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 30;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSLog(@"%@", [[[[self.listArray objectAtIndex:indexPath.section] objectForKey:@"city"] objectAtIndex:indexPath.row] objectForKey:@"name"]);
    
    [[tableView cellForRowAtIndexPath:indexPath] setSelected:NO animated:YES];
// 下面方法更好使
//    [tableView deselectRowAtIndexPath:indexPath animated:YES];
}

- (void) headerViewClickedAction:(UITapGestureRecognizer *)sender
{
    if ([[[self.listArray objectAtIndex:sender.view.tag] objectForKey:@"flag"] isEqualToString:@"NO"]) {
        [[self.listArray objectAtIndex:sender.view.tag] setObject:@"YES" forKey:@"flag"];
    } else {
        [[self.listArray objectAtIndex:sender.view.tag] setObject:@"NO" forKey:@"flag"];
    }
    NSIndexSet *set = [NSIndexSet indexSetWithIndex:sender.view.tag];
    [self.tableView reloadSections:set withRowAnimation:UITableViewRowAnimationFade];
}


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell" forIndexPath:indexPath];
    cell.textLabel.text = [[[[self.listArray objectAtIndex:indexPath.section] objectForKey:@"city"] objectAtIndex:indexPath.row] objectForKey:@"name"];
    
//    [cell setSelectionStyle:UITableViewCellSelectionStyleNone];
    
    return cell;
}

- (NSMutableArray *)listArray
{
    if (_listArray == nil) {
        
        self.listArray = [NSMutableArray array];
        
        NSBundle *bundle = [NSBundle mainBundle];
        NSString *pathString = [bundle pathForResource:@"list" ofType:@"json"];
        NSData *data = [NSData dataWithContentsOfFile:pathString];
        NSArray *rootArray = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingAllowFragments error:nil];
        for (NSDictionary *dic in rootArray) {
            NSMutableDictionary *dicc = [NSMutableDictionary dictionaryWithDictionary:dic];
            [dicc setObject:@"NO" forKey:@"flag"];
            [self.listArray addObject:dicc];
        }
    }
    return _listArray;
}


@end

MDMHeaderView.h文件

#import <UIKit/UIKit.h>

@interface MDMHeaderView : UITableViewHeaderFooterView

@property (readwrite, strong, nonatomic) UILabel *label;

@end

MDMHeaderView.m文件

#import "MDMHeaderView.h"

@implementation MDMHeaderView

- (instancetype)initWithReuseIdentifier:(NSString *)reuseIdentifier
{
    if (self = [super initWithReuseIdentifier:reuseIdentifier]) {
        [self addAllViews];
        self.contentView.backgroundColor = [UIColor blueColor];
    }
    return self;
}


- (void)addAllViews
{
    self.label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 29)];
    self.label.textColor = [UIColor redColor];
    [self.contentView addSubview:self.label];
    
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 29, [UIScreen mainScreen].bounds.size.width, 1)];
    view.backgroundColor = [UIColor whiteColor];
    [self.contentView addSubview:view];
}
@end

最后,求不吐槽我懶得沒有封裝模型而用了字典省事(*  ̄3)(ε ̄ *)。。。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,251評論 4 61
  • iOS7之后UI發生大變化。apple鼓勵開發者進行全屏設計,這些并在UI的一些特性上也有所表現。 1.屏幕坐標起...
    iOneWay閱讀 3,668評論 6 19
  • 木船靜靜漂游在江中,所行之處不時有飛鳥略過,船槳劃過江水,在悠遠連綿的蒼山中重復著單調的嘩嘩聲,仿佛古剎里僧人虔誠...
    涵映閱讀 147評論 0 0