簡易QQ下拉列表(iOS)

在開發(fā)中tableView是用的非常多的控件, 無論在新聞應(yīng)用, 視頻, 聊天應(yīng)用中都廣泛使用, 今天也就分享一個用tableView實現(xiàn)的類似QQ界面的下拉列表.

接下來就一步步來看, 首先建立了兩個模型類, 一個Friend, 一個FriendGroup類. 數(shù)據(jù)源用的本地的一個plist文件. plist文件中包含了FriendGroup的name,friends數(shù)組等屬性.

Friend.h

#import <Foundation/Foundation.h>

@interface Friend : NSObject
@property (nonatomic, copy) NSString *name;
@end

FriendGroup.h

#import <Foundation/Foundation.h>
@interface FriendGroup : NSObject
@property (nonatomic, copy) NSString *name;
// 數(shù)組中存放的為Friend類的實例對象
@property (nonatomic, copy) NSMutableArray *friends;
// 用來判斷分組是否打開(opened屬性正是實現(xiàn)下拉列表的關(guān)鍵)
@property (nonatomic, assign, getter = isOpened) BOOL opened;
// 自定義方法用來賦值
-(void)setFriendGroupDic:(NSMutableDictionary *)dic;
@end

FriendGroup.m

#import "FriendGroup.h"
#import "Friend.h"
@implementation FriendGroup

-(void)setFriendGroupDic:(NSMutableDictionary *)dic
{
// 通過字典給FriendGroup的屬性賦值
    [self setValuesForKeysWithDictionary:dic];
    NSMutableArray *tempArray = [NSMutableArray array];
// 遍歷friends屬性數(shù)組
    for (NSMutableDictionary *dic in self.friends) {
        Friend *friend = [[Friend alloc] init];
        [friend setValuesForKeysWithDictionary:dic];
        [tempArray addObject:friend];  
    }
    //重新對friends屬性數(shù)組賦值,此時存的都是Friend對象
    self.friends = [NSMutableArray arrayWithArray:tempArray];
}
@end

在ViewController中創(chuàng)建一個tableView

#import "ViewController.h"
#import "SectionView.h"
#import "FriendGroup.h"
#import "Friend.h"
#define kTableViewReuse @"reuse"
@interface ViewController ()<UITableViewDelegate, UITableViewDataSource, SectionViewDelegate>
@property (nonatomic, strong) UITableView *tableView;
// 數(shù)組中存放FriendGroup的實例對象
@property (nonatomic, strong) NSMutableArray *allArray;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.allArray =[NSMutableArray array];
    [self creatTableView];
    [self getData];
}

- (void)creatTableView {
    self.tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
    _tableView.delegate = self;
    _tableView.dataSource = self;
    [_tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:kTableViewReuse];
    [self.view addSubview:_tableView];
}
// 獲取數(shù)據(jù)
- (void)getData {
    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"friends.plist" ofType:nil];
    NSArray *tempArray = [NSArray arrayWithContentsOfFile:filePath];
    for (NSMutableDictionary *dic in tempArray) {
        FriendGroup *friendGroup = [[FriendGroup alloc] init];
        [friendGroup setFriendGroupDic:dic];
        [self.allArray addObject:friendGroup];
    }
    [self.tableView reloadData];
}

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
    return 50;
}
// SectionView必須實現(xiàn)的協(xié)議方法
- (void)touchAction:(SectionView *)sectionView {
    
}
#pragma mark - TableView Delegate
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    FriendGroup *friendGroup = [self.allArray objectAtIndex:section];
    //放一個封裝的view,view上有一個label和imageVIew,自帶touch事件,點擊觸發(fā)協(xié)議方法
    SectionView *sectionView = [[SectionView alloc] initWithFrame:CGRectMake(0, 0, 375, 50)];
    sectionView.delegate = self;
    sectionView.tag = section + 1000;
    sectionView.textLabel.text = friendGroup.name;
    sectionView.group = friendGroup;
    return sectionView;
}
#pragma mark - TableView DataSource
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return _allArray.count;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [_allArray[section] friends].count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:kTableViewReuse];
    FriendGroup *friendGroup = _allArray[indexPath.section];
    Friend *friend = friendGroup.friends[indexPath.row];
    cell.textLabel.text = friend.name;
    return cell;
}
#pragma mark - Memory Waring
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


@end

可以從上面代碼看到, 創(chuàng)建了一個tableView. 并根據(jù)數(shù)組個數(shù)給分區(qū)數(shù)量賦值, 然后在tableView: viewForHeaderInSection:方法里, 用一個自定的view給分區(qū)頭視圖賦值. 在tableView: cellForRowAtIndexPath:方法里給每個分區(qū)對應(yīng)的cell進行了賦值. 先看一下效果.

4BBD0DAF-210B-4520-9E0A-5F084D25827E.png

從上圖可以看到現(xiàn)在每個分區(qū)中對應(yīng)有不同數(shù)量的row,但是還沒有實現(xiàn)我們想要的效果.所以再往下繼續(xù)看.

SectionView.m

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    [self.delegate touchAction:self];
}
/*
 [self.delegate touchAction:self];
 協(xié)議方法會刷新tableview,然后會刷新tableview的 viewForHeaderInSection:方法
 就會重新布局SectionView所以會走layoutSubviews方法
 */
-(void)layoutSubviews
{
    [super layoutSubviews];
// 改變imageView的transform屬性 點擊時有開閉的效果
    [UIView animateWithDuration:0.3 animations:^{
        _imageView.transform = _group.opened ? CGAffineTransformMakeRotation(M_PI_2) : CGAffineTransformMakeRotation(0);
    }];
}

點擊SectionView時 就讓代理人去執(zhí)行協(xié)議方法,但是在VC的協(xié)議方法中什么都沒寫, 所以需要完善一下

- (void)touchAction:(SectionView *)sectionView {
// 通過前面設(shè)置的tag值找到分區(qū)的index
    NSInteger index = sectionView.tag - 1000;
    FriendGroup *group = [self.allArray objectAtIndex:index];
// 每次點擊, 狀態(tài)變?yōu)榕c原來相反的值
    group.opened = !group.isOpened;
    [self.tableView reloadSections:[NSIndexSet indexSetWithIndex:index] withRowAnimation:UITableViewRowAnimationNone];
}

我們平時用的QQ下拉列表, 未打開時不顯示好友, 打開后才展示好友列表. 所以應(yīng)該在numberOfRowsInSection方法中要進行設(shè)置.

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    FriendGroup *group = [self.allArray objectAtIndex:section];
// 如果未打開 count為0 如果打開 count為group的屬性數(shù)組對應(yīng)的個數(shù)
    NSInteger count = group.isOpened ? group.friends.count : 0;
    return count;
}

效果如下圖

DropList.gif
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末毯盈,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子垫言,更是在濱河造成了極大的恐慌窜醉,老刑警劉巖新荤,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件所灸,死亡現(xiàn)場離奇詭異脾歧,居然都是意外死亡托呕,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進店門券盅,熙熙樓的掌柜王于貴愁眉苦臉地迎上來帮哈,“玉大人,你說我怎么就攤上這事锰镀∧锸蹋” “怎么了?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵泳炉,是天一觀的道長私蕾。 經(jīng)常有香客問我,道長胡桃,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任磕潮,我火速辦了婚禮翠胰,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘自脯。我一直安慰自己之景,他們只是感情好,可當我...
    茶點故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布膏潮。 她就那樣靜靜地躺著锻狗,像睡著了一般。 火紅的嫁衣襯著肌膚如雪焕参。 梳的紋絲不亂的頭發(fā)上轻纪,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天,我揣著相機與錄音叠纷,去河邊找鬼刻帚。 笑死,一個胖子當著我的面吹牛涩嚣,可吹牛的內(nèi)容都是我干的崇众。 我是一名探鬼主播,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼航厚,長吁一口氣:“原來是場噩夢啊……” “哼顷歌!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起幔睬,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤眯漩,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后溪窒,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體坤塞,經(jīng)...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡冯勉,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了摹芙。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片灼狰。...
    茶點故事閱讀 39,696評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖浮禾,靈堂內(nèi)的尸體忽然破棺而出交胚,到底是詐尸還是另有隱情,我是刑警寧澤盈电,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布蝴簇,位于F島的核電站,受9級特大地震影響匆帚,放射性物質(zhì)發(fā)生泄漏熬词。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一吸重、第九天 我趴在偏房一處隱蔽的房頂上張望互拾。 院中可真熱鬧,春花似錦嚎幸、人聲如沸颜矿。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽骑疆。三九已至,卻和暖如春替废,著一層夾襖步出監(jiān)牢的瞬間箍铭,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工舶担, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留坡疼,地道東北人。 一個月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓衣陶,卻偏偏與公主長得像柄瑰,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子剪况,可洞房花燭夜當晚...
    茶點故事閱讀 44,592評論 2 353

推薦閱讀更多精彩內(nèi)容

  • *面試心聲:其實這些題本人都沒怎么背,但是在上海 兩周半 面了大約10家 收到差不多3個offer,總結(jié)起來就是把...
    Dove_iOS閱讀 27,139評論 30 470
  • Swift版本點擊這里歡迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
    ylgwhyh閱讀 25,365評論 7 249
  • 控件效果圖 控件說明 默認水波紋正常波動,手機按下時波紋快速波動 實現(xiàn)思路 繼承ImageView控件,Image...
    呼嚕嚕11閱讀 2,926評論 3 6
  • 北京簋街堪唐,酒館飯店林立之所巡语。簋,中國古代用作盛裝煮熟飯食的器皿淮菠。中國古代宗法社會男公,于器物的使用有嚴格規(guī)定,飲酒器有...
    任艾軍閱讀 165評論 0 0
  • 你可曾計算過你自己的一個小時值多少錢合陵? 假設(shè)你在上海工作枢赔,每個月公司給你1萬元的工資,每年十三薪拥知,有15天年假踏拜。那...
    紫苑閱讀 1,192評論 0 5