IOS实现展开二级列表效果

先来看看效果图

用法(类似UITableView)

初始化XDMultTableView

#import "XDMultTableView.h"
...
@property(nonatomic, readwrite, strong)XDMultTableView *tableView;

 _tableView = [[XDMultTableView alloc] initWithFrame:CGRectMake(0, 64, self.view.frame.size.width, self.view.frame.size.height-64)];
 _tableView.openSectionArray = [NSArray arrayWithObjects:@1,@2, nil];
 _tableView.delegate = self;
 _tableView.datasource = self;
 _tableView.backgroundColor = [UIColor whiteColor];
 [self.view addSubview:_tableView];

实现数据源

- (NSInteger)mTableView:(XDMultTableView *)mTableView numberOfRowsInSection:(NSInteger)section{
 return 5;
}

- (XDMultTableViewCell *)mTableView:(XDMultTableView *)mTableView
    cellForRowAtIndexPath:(NSIndexPath *)indexPath{
 static NSString *cellIdentifier = @"cell";
 UITableViewCell *cell = [mTableView dequeueReusableCellWithIdentifier:cellIdentifier];
 if (cell == nil)
 {
  cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
 }
 UIView *view = [[UIView alloc] initWithFrame:cell.bounds] ;
 view.layer.backgroundColor = [UIColor whiteColor].CGColor;
 view.layer.masksToBounds = YES;
 view.layer.borderWidth  = 0.3;
 view.layer.borderColor  = [UIColor lightGrayColor].CGColor;

 cell.backgroundView = view;
 cell.selectionStyle = UITableViewCellSelectionStyleNone;

 return cell;
}

- (NSInteger)numberOfSectionsInTableView:(XDMultTableView *)mTableView{
 return 6;
}

-(NSString *)mTableView:(XDMultTableView *)mTableView titleForHeaderInSection:(NSInteger)section{
 return @"我是头部";
}

实现代理

- (CGFloat)mTableView:(XDMultTableView *)mTableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
 return 50;
}

- (CGFloat)mTableView:(XDMultTableView *)mTableView heightForHeaderInSection:(NSInteger)section{
 return 40;
}

- (void)mTableView:(XDMultTableView *)mTableView willOpenHeaderAtSection:(NSInteger)section{
 NSLog(@"即将展开");
}

- (void)mTableView:(XDMultTableView *)mTableView willCloseHeaderAtSection:(NSInteger)section{
 NSLog(@"即将关闭");
}

- (void)mTableView:(XDMultTableView *)mTableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
 NSLog(@"点击cell");
}

列表展开关闭的实现原理
在section header注册一个手势

//section header view 设置tag值为section
view.tag = section;
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapHeader:)];
 [view addGestureRecognizer:tap];

手势的响应事件

- (void)tapHeader:(UITapGestureRecognizer *) tap {
 NSInteger section = tap.view.tag;
 NSNumber *sectionObj = [NSNumber numberWithInteger:section];
 UIImageView *imageView = (UIImageView *)[tap.view viewWithTag:100];
 //_multopenSectionArray 用于记录每个 section的展开和关闭状态
 if ([_multopenSectionArray containsObject:sectionObj]) {
  NSArray *deleteArray = [self buildDeleteRowWithSection:section];
  [_multopenSectionArray removeObject:sectionObj];
  //想关闭的section的所有indexPath
  [_tableView deleteRowsAtIndexPaths:deleteArray withRowAnimation:UITableViewRowAnimationFade];
  [UIView animateWithDuration:0.3 animations:^{
   imageView.transform = CGAffineTransformMakeRotation(-M_PI/2);
  }];
 }else{
  [_multopenSectionArray addObject:sectionObj];
  //想展开的section的所有indexPath
  NSArray *insertArray = [self buildInsertRowWithSection:section];
  [_tableView insertRowsAtIndexPaths:insertArray withRowAnimation:UITableViewRowAnimationFade];
  [UIView animateWithDuration:0.3 animations:^{
   imageView.transform = CGAffineTransformMakeRotation(0);
  }];
 }
}

总结

以上就是IOS实现展开二级列表效果的全部内容,希望对大家学习开发IOS能有所帮助。

(0)

相关推荐

  • 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实现列表与网格两种视图的相互切换

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

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

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

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

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

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

    下面我们通过实例代码来一步步看怎么实现, 首先建立了两个模型类, 一个Friend, 一个FriendGroup类. 数据源用的本地的一个plist文件. plist文件中包含了FriendGroup的name,friends数组等属性. Friend.h 示例代码 #import <Foundation/Foundation.h> @interface Friend : NSObject @property (nonatomic, copy) NSString *name; @end Fri

  • IOS展开三级列表效果示例

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

  • iOS多级列表实现代码

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

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

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

  • 使用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

  • 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

  • Android基于BaseExpandableListAdapter实现的二级列表仿通话记录功能详解

    本文实例讲述了Android基于BaseExpandableListAdapter实现的二级列表仿通话记录功能.分享给大家供大家参考,具体如下: android SDK中带有这样类似的例子,但是那个还是静态数据,没有实际应用价值,参考意义不大. 网上找了很多,还是那样的情况,几乎是同一篇文章,大家转来转去.况且,那篇例子也是静态的数据. 还是自己试试,自己写一个吧.程序读取手机系统的通话记录,按联系人分组,显示到列表. 开发工具:eclipse 运行环境:htc G9 android2.3.3

  • iOS tableview实现顶部拉伸效果

    本文实例为大家分享了iOS tableview头部拉伸效果展示的具体代码,例如探探个人信息界面拉伸效果,下拉头像放大 代码: // // PersonController.m // Spread // // Created by qiuxuewei on 16/3/21. // Copyright © 2016年 邱学伟. All rights reserved. // #import "PersonController.h" @interface PersonController (

  • iOS仿微信添加标签效果(shape实现)

    一. 概述 可以说微信做的用户体验太棒了,可以做到老少皆宜,给个赞,我们也同时应该告诫自己,用户体验应该向微信看齐,微信就是我们的标杆,那我们今天也来仿一仿微信添加的标签功能.只能仿着做了,真是做不到微信的那种体验.甘拜下风. 我们上篇学习了shape属性的用法,那我们今天就用shape来做下微信的标签功能.先看一下效果. 我不仅用到了shape属性,还用到了翔哥的标签布局FlowLayout跟TagFlowLayout鸿洋的博客 二.效果图 三 .定义shape 添加标签 <?xml vers

  • 简单实现js点击展开二级菜单功能

    虽然,jQuery已经非常好用了,但是实际的开发项目中,还是有很多限制,比如项目组奇葩的要求,不能使用任何插件,当然,也是考虑插件占用资源,毕竟100+KB对与小型项目来说还是非常大的.我最近就遇到做个点击展开二级菜单的要求,当然只能用原生的JS去写来实现,我借鉴了网上的一个案例,补充一下,分享一下: 如果,默认打开页面进来时二级菜单是隐藏的,需要点击才能展现二级菜单,再点击就是隐藏二级菜单.这里有两个点,实现展现和隐藏用display="block"和display="no

  • 用户管理的设计_jquery的ajax实现二级联动效果

    页面效果 实现步骤 1.引入struts整合json的插件包 2.页面使用jquery的ajax调用二级联动的js //ajax的二级联动,使用选择的所属单位,查询该所属单位下对应的单位名称列表 function findJctUnit(o){ //货物所属单位的文本内容 var jct = $(o).find("option:selected").text(); $.post("elecUserAction_findJctUnit.do",{"jctID

  • 基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果

    最近基于jQuery和Bootstrap框架实现了一个仿知乎动态列表的前端效果,基本实现了和知乎动态列表相同的效果.如下: 1.基本列表项 2.列表项全文展开.折叠(图中为展开第一项) 3.评论项展开 4.列表数据加载(加载全部) 5.带动画效果的点赞功能 6.回复列表的hover显示功能 HTML代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta h

  • jquery实现可点击伸缩与展开的菜单效果代码

    本文实例讲述了jquery实现可点击伸缩与展开的菜单效果代码.分享给大家供大家参考.具体如下: 这是一款jquery实现的点击伸缩与展开的菜单代码,操作方式大家都知道吧,点击一下展开二级菜单的内容,再次点击则合拢,很经典的折叠菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-click-show-hidden-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/

  • 原生JS仿QQ阅读点击展开、收起效果

    使用JS技术实现QQ阅读类似的点击展开.收起效果,具体内容如下 一.定义展开函数showdiv(),实现点击"全文"按钮,全文展开. 1.点击展开函数,需要将触发点击事件的按钮作为参数传入 2.通过传入的按钮,查找其父元素,将其父元素设置为隐藏. 3.将紧跟其父元素之后的元素设置为显示. 二.定义收起函数hidediv(),实现点击"收起全文"按钮,全文内容隐藏. 1.点击收起函数,需要将触发点击事件的按钮作为参数传入 2.通过传入的按钮,查找其父元素,将其父元素设

随机推荐