IOS实现简易版的QQ下拉列表

下面我们通过实例代码来一步步看怎么实现, 首先建立了两个模型类, 一个Friend, 一个FriendGroup类. 数据源用的本地的一个plist文件. plist文件中包含了FriendGroup的name,friends数组等属性.

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;
// 数组中存放的为Friend类的实例对象
@property (nonatomic, copy) NSMutableArray *friends;
// 用来判断分组是否打开(opened属性正是实现下拉列表的关键)
@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属性数组
 for (NSMutableDictionary *dic in self.friends) {
  Friend *friend = [[Friend alloc] init];
  [friend setValuesForKeysWithDictionary:dic];
  [tempArray addObject:friend];
 }
 //重新对friends属性数组赋值,此时存的都是Friend对象
 self.friends = [NSMutableArray arrayWithArray:tempArray];
}
@end

在ViewController中创建一个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;
// 数组中存放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];
}
// 获取数据
- (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必须实现的协议方法
- (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事件,点击触发协议方法
 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

可以从上面代码看到, 创建了一个tableView. 并根据数组个数给分区数量赋值, 然后在tableView: viewForHeaderInSection:方法里, 用一个自定的view给分区头视图赋值. 在tableView: cellForRowAtIndexPath:方法里给每个分区对应的cell进行了赋值. 先看一下效果.

从上图可以看到现在每个分区中对应有不同数量的row,但是还没有实现我们想要的效果.所以再往下继续看.

SectionView.m

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
 [self.delegate touchAction:self];
}
/*
 [self.delegate touchAction:self];
 协议方法会刷新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时 就让代理人去执行协议方法,但是在VC的协议方法中什么都没写, 所以需要完善一下

- (void)touchAction:(SectionView *)sectionView {
// 通过前面设置的tag值找到分区的index
 NSInteger index = sectionView.tag - 1000;
 FriendGroup *group = [self.allArray objectAtIndex:index];
// 每次点击, 状态变为与原来相反的值
 group.opened = !group.isOpened;
 [self.tableView reloadSections:[NSIndexSet indexSetWithIndex:index] withRowAnimation:UITableViewRowAnimationNone];
}

我们平时用的QQ下拉列表, 未打开时不显示好友, 打开后才展示好友列表. 所以应该在numberOfRowsInSection方法中要进行设置.

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
 FriendGroup *group = [self.allArray objectAtIndex:section];
// 如果未打开 count为0 如果打开 count为group的属性数组对应的个数
 NSInteger count = group.isOpened ? group.friends.count : 0;
 return count;
}

效果如下图

总结

以上就是IOS实现简易版的QQ下拉列表的全部内容,效果虽然很简单,但还会希望对大家开发IOS有所帮助。

时间: 2016-08-06

使用UItableview在iOS应用开发中实现好友列表功能

基本实现 一.项目结构和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 YY

Android实现三级联动下拉框 下拉列表spinner的实例代码

主要实现办法:动态加载各级下拉值的适配器 在监听本级下拉框,当本级下拉框的选中值改变时,随之修改下级的适配器的绑定值              XML布局: 复制代码 代码如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_w

iOS功能实现之列表的横向刷新加载

库命名为PSRefresh,支持UIScrollView及所有UIScrollView的子类控件,UITableView(横向的tableVIew)及UICollectionView等皆可. 支持自定义文字,支持自定义gif图,可设置是否为最后一页. 本文一共提供了三种样式,分别是普通样式.gif加载样式(带有状态label).git加载样式(不带有状态label). Demo展示如下: 使用时导入 "UIScrollView+PSRefresh.h" 文件即可,文件中提供的属性及接口

ios基于UITableViewController实现列表

实现效果图如下: News.h #import <Foundation/Foundation.h> @interface News : NSObject @property (nonatomic, strong) NSString *title; @property (nonatomic) NSUInteger count; @property (nonatomic, strong) NSString *imageName; + (NSArray *)demoData; @end<str

讲解iOS开发中UITableView列表设计的基本要点

一.UITableView简单介绍 1.tableView是一个用户可以滚动的多行单列列表,在表视图中,每一行都是一个UITableViewCell对象,表视图有两种风格可选 复制代码 代码如下: typedef NS_ENUM(NSInteger, UITableViewStyle) {     UITableViewStylePlain,                  // regular table view     UITableViewStyleGrouped           

iOS多级列表实现代码

在项目开发中,层级列表经常遇到,简单点的二级列表利用UITableView的Header就可以实现,再简单点的三级列表通过对Cell高度进行调整也可以实现三级列表的效果.但遇到多级列表,尤其是层次不明的动态列表就比较麻烦了. 原理 层级列表和树形结构比较类似,不过不是二叉树,而是多叉树.每个节点只需要拥有指向父节点和子节点的两个指针,就能形成一颗树.我们将多级列表中每一级对象看作一个node,node拥有两个属性,分别为父节点和子节点的ID. 每棵树有个一个虚拟的root节点,它的ID为root

iOS实现列表与网格两种视图的相互切换

下图为京东商城的截图 很多人看到这个,第一眼想到的是用TableView和CollectionView来做切换,笔者刚开始也是认为这么做,后来发现还有一个非常的简单方法,就可以实现这个功能. 实现代码 1.首先创建一个CollectionView. - (UICollectionView *)collectionView { if (!_collectionView) { UICollectionViewFlowLayout *flowlayout = [[UICollectionViewFlo

IOS实现展开二级列表效果

先来看看效果图 用法(类似UITableView) 初始化XDMultTableView #import "XDMultTableView.h" ... @property(nonatomic, readwrite, strong)XDMultTableView *tableView; _tableView = [[XDMultTableView alloc] initWithFrame:CGRectMake(0, 64, self.view.frame.size.width, sel

IOS展开三级列表效果示例

效果图如下: #import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDelegate> @property (strong, nonatomic) UIWindow *window; @end #import "AppDelegate.h" #import "RootViewController.h" @interface AppDelegate

jQuery实现常见的隐藏与展示列表效果示例

本文实例讲述了jQuery实现常见的隐藏与展示列表效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>www.jb51.net jquery品牌

小程序实现展开/收起的效果示例

前言:本章说下文字内容的展开与收起的实现,要实现这么一个效果:当收起的时候隐藏并显示省略号,当展开的时候显示全部文字. GitHub:https://github.com/Ewall1106/miniProgramDemo 先看下效果图: 小程序 - 展开/收起 1.结构样式 (1)首先我们定义一下html结构: <view class="container"> <view class="title"> <text class=&quo

iOS添加购物车动画效果示例

一.计算动画开始结束点位置 方法: - (CGPoint)convertPoint:(CGPoint)point toView:(nullable UIView *)view; 1) 动画开始位置fromCenter 复制代码 代码如下: CGPoint fromCenter =  [animationView convertPoint:CGPointMake(animationView.frame.size.width * 0.5f, animationView.frame.size.heig

IOS购物车界面实现效果示例

购物软件不可避免有添加购物车的页面,那么购物车功能是怎么实现的呐?这里提供一种简单的思路,插入本地数据库. 先看效果 页面结构 本页面是由一个tableview和底部的底部的bottomView构成 底部的bottomView上有按钮,也可以添加其他属性,比如总价格,总重量等参数. 代码结构 思路 看到这样的需求,我想到的是插入本地数据库,每一条数据都有对应的id和其他的例如价格等的参数,根据id插入本地是一条可行的方法,为了避免刷新的时候选中的单元格和没选中的单元格的复用,我们需要对按钮做一点

iOS中Cell的Section展开和收起的示例代码

整理文档,搜刮出一个iOS中Cell的Section展开和收起的示例代码,稍微整理精简一下做下分享. 首先,先上图,让大家看看效果 相信大家对于TableViewd数据的设置都熟悉,这方面就不多说的,重点的还是来看: 1.如何实现cell的Section的展开和收起的效果 - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { [self.tableView des

vue和react等项目中更简单的实现展开收起更多等效果示例

前言 本文题目中虽然写有vue和react,但是并非vue和react相关知识,而是最基本的html5和css3的一些知识,之所以写vue,是因为我最近项目中用到了类似效果,我用vue相关知识实现并不雅观,用html5和css3实现,则更加完美. 项目案例 项目中有如下效果: 好多展开收起,对于这个的实现,我一开始用了vue一些比较挫的dom操作,就是父元素toggleClass一个类名,进行子元素的显示和隐藏. 由于这个方法是通用方法,项目中好多地方使用,代码大概如下: toggleShow(

使用mint-ui实现省市区三级联动效果的示例代码

引用插件:饿了么的mint-ui组件中的picker功能,具体API可参照官网说明:http://mint-ui.github.io/docs/#/zh-cn2/picker 背景:项目需要做一个省份-城市-地区的选择级联效果,我从gayhub上找了一下,决定使用mint-ui的组件,因为各个功能都很全而且设计跟我们的项目风格类似. 具体实现: 通过阅读官网的实例,大概就能知道这个组件的用法: 在vue中写入组件:<mt-picker :slots="slots" @change

jquery+ajax实现省市区三级联动效果简单示例

本文实例讲述了jquery+ajax实现省市区三级联动效果.分享给大家供大家参考,具体如下: 一直想学习下Ajax,没时间,汗,这借口太牵强了.下了点教程在手机里,翻了好几遍了,没实战一次. 最近的项目里需要Ajax实现效果,就下了个jquery,然后找了个实例,学习了一下,幡然醒悟,NND,jquery果然强大的一塌糊涂,实现Ajax简直就是不费吹灰之力.下面把学习过程跟大家分享下,虽然还没有搞清楚jquery ajax的底层相关.不管了.我们不需要去发明轮子.呵呵. 先上代码,是一个省市区三