最近在写一个轻量级的网络游戏,遇到了技能优先顺序手动排序的需求,我就想到了iOS自带的tableView编辑功能,对其进行了初步探索,最后做出的效果如下图所示:

点击左边可以删除,拖住右边可以手动排序,要实现这个功能,分以下步骤。

①用plist存储这些数据,可以看到数据分两个职业,每个职业4个技能,因此建立如下的plist结构:

②因为每个职业除了技能还有名称这个属性,因此应该用职业模型保存一个职业的所有数据,再用一个数组保存所有职业模型,职业模型的定义如下:

#import <Foundation/Foundation.h>

@interface Vocation : NSObject

@property (nonatomic, strong) NSString *title;
@property (nonatomic, strong) NSMutableArray *skills; + (instancetype)vocationWithDict:(NSDictionary *)dict; @end

需要注意的是这里没有利用系统实现KVC,因为如果采用系统自带的,在把plist中的NSArray传给NSMutableArray时,因为NSMutableArray没有初始化 ,所以就变成了不可变的数组,这样为后面的顺序调整带来了致命的问题,因此我们手动实现KVC,用NSArray初始化一个NSMutableArray。

#import "Vocation.h"

@implementation Vocation

+ (instancetype)vocationWithDict:(NSDictionary *)dict{

    Vocation *vc = [[Vocation alloc] init];
vc.title = dict[@"title"];
vc.skills = [NSMutableArray arrayWithArray:dict[@"skills"]];
return vc; } @end

③使用一个TableViewController,并且实现下面的代码:

#import "TableViewController.h"
#import "Vocation.h" @interface TableViewController () @property (nonatomic, strong) NSArray *vocations; @end @implementation TableViewController - (void)viewDidAppear:(BOOL)animated{ [super viewDidAppear:animated];
self.editing = YES; } - (BOOL)prefersStatusBarHidden{ return YES; } - (NSArray *)vocations{ if (_vocations == nil) { NSString *path = [[NSBundle mainBundle] pathForResource:@"skillList.plist" ofType:nil];
NSArray *dictArray = [NSArray arrayWithContentsOfFile:path];
NSMutableArray *vocations = [NSMutableArray array];
for (NSDictionary *dict in dictArray) {
Vocation *vc = [Vocation vocationWithDict:dict];
[vocations addObject:vc];
}
_vocations = vocations; } return _vocations; } - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
return self.vocations.count;
} - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{ Vocation *vc = self.vocations[section];
return vc.skills.count; } - (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{ Vocation *vc = self.vocations[section];
return vc.title; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ static NSString *ID = @"vocation";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:ID];
} // 在这里设置cell数据
Vocation *vc = self.vocations[indexPath.section];
cell.textLabel.text = vc.skills[indexPath.row]; return cell; } - (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath{ if (sourceIndexPath.section != destinationIndexPath.section) {
[self.tableView reloadData];
return;
} Vocation *vc = self.vocations[sourceIndexPath.section];
[vc.skills exchangeObjectAtIndex:sourceIndexPath.row withObjectAtIndex:destinationIndexPath.row]; } - (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath{ if (editingStyle == UITableViewCellEditingStyleDelete) {
Vocation *vc = self.vocations[indexPath.section];
[vc.skills removeObjectAtIndex:indexPath.row];
} [self.tableView reloadData]; } - (IBAction)editClick:(id)sender { UIBarButtonItem *btn = sender;
if ([btn.title isEqualToString:@"调整"]) {
btn.title = @"确定";
self.editing = YES;
}else{
btn.title = @"调整";
self.editing = NO;
[self.tableView reloadData];
} } @end

在这其中,editClick:对应了NavigationBar上的按钮,用于切换编辑和非编辑状态。

通过tableViewController的editing方法控制是否进入编辑状态。

要实现拖动排序,需要实现下面的方法,否则不能拖动,在这个方法中可以获取到起始和终止位置。

需要注意的是移动只是单纯的视觉效果,实际的数据源变化需要自己调整,否则在重新加载数据后又会回到原来的顺序,可通过数组的exchangeObjectAtIndexPath::方法调整。

为了避免组间移动,这里进行了判断,发现非法移动直接重置数据。

- (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath{

    if (sourceIndexPath.section != destinationIndexPath.section) {
[self.tableView reloadData];
return;
} Vocation *vc = self.vocations[sourceIndexPath.section];
[vc.skills exchangeObjectAtIndex:sourceIndexPath.row withObjectAtIndex:destinationIndexPath.row]; }

(一二四)tableView的多组数据展示和手动排序的更多相关文章

  1. iOS开发——UI进阶篇(一)UITableView,索引条,汽车数据展示案例

    一.什么是UITableView 在iOS中,要实现展示列表数据,最常用的做法就是使用UITableViewUITableView继承自UIScrollView,因此支持垂直滚动,而且性能极佳 UIT ...

  2. UITaleView的基础使用及数据展示操作

    UITableView表视图,是实用的数据展示的基础控件,是继承于UIScrollView,所以也可以滚动.但不同于UIScrollView,UITableView只可以上下滚动,而不能左右滚动. 因 ...

  3. layui数据表格使用(一:基础篇,数据展示、分页组件、表格内嵌表单和图片)

    表格展示神器之一:layui表格 前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table.layui table ...

  4. excel多组数据散点图生成

    在研究数据分布时,散点图是一类比较常用的方法,通过三点图可以很好的显示数据的分布位置.一组数据生成散点图,利用excel是很容易生成的:但是,多组数据生成散点图,不同组数据用不同颜色表示,那该怎么生成 ...

  5. EasyUI-datagrid数据展示+MongoDB数据操作

    使用EasyUI-datagrid进行数据展示:进行添加,修改,删除操作逻辑代码,数据源来自MongoDB. 一.新建SiteInfo控制器,添加Index页面:http://www.cnblogs. ...

  6. jquery: json树组数据输出到表格Dom树的处理方法

    项目背景 项目中需要把表格重排显示 处理方法 思路主要是用历遍Json数组把json数据一个个append到5个表格里,还要给每个单元格绑定个单击弹出自定义对话框,表格分了单双行,第一行最后还要改ro ...

  7. iOS开发UI篇—无限轮播(新闻数据展示)

    iOS开发UI篇—无限轮播(新闻数据展示) 一.实现效果        二.实现步骤 1.前期准备 (1)导入数据转模型的第三方框架MJExtension (2)向项目中添加保存有“新闻”数据的pli ...

  8. Jqgrid入门-结合Struts2+json实现数据展示(五)

    DEMO用的是ssh框架实现的,具体怎么搭建的就不多做说明了.分页表格的数据操作难点就是数据展现.至于增删改直接用hibernate原生的方法实现即可.         初步分析:表格要实现分页,那么 ...

  9. 前端的UI设计与交互之数据展示篇

    合适的数据展示方式可以帮助用户快速地定位和浏览数据,以及更高效得协同工作.在设计时有以下几点需要注意:依据信息的重要等级.操作频率和关联程度来编排展示的顺序.注意极端情况下的引导.如数据信息过长,内容 ...

随机推荐

  1. 假定某系统提供硬件的访管指令(例如形式:“svc n”),为了实现系统调用,系统设计者应做哪些工作?用户又如如何请求操作系统服务?

    工作: 1.  编写并调试好能实现各种功能的例行子程序. 2.  编写并调试好访管中断处理程序. 3.  构造例行子程序入口地址表. 在用户程序中,需要请求操作系统服务的地方安排一条系统调用.这样,当 ...

  2. flask jQuery ajax 上传文件

    1.html 代码 <div> <form id="uploadForm" enctype="multipart/form-data" > ...

  3. VMWare 学习目录

    Linux介绍 Linux入门--个人感想 Google怎么用linux 初入Linux Windows XP硬盘安装Ubuntu 12.04双系统图文详解 实例讲解虚拟机3种网络模式(桥接.nat. ...

  4. 关于Matchvs一些使用心得与建议

    我的项目是类似<贪吃蛇>玩法的一款IO游戏,就是几个玩家在游戏界面中可以吃食物,也可以相互吃,吃了食物或对方都会变大这样子.我是在用cocos creator做完前端开发的部分后,开始接入 ...

  5. 如何成为快手尬舞王?HUAWEI HiAI了解一下!

    左手!右手!抱一抱!扭一扭! 快手短视频,红遍东西南北中, 给大家的生活增添了不少乐趣. 有了人体姿态识别的魔法表情, 不会跳舞的也都可以跟着跳一跳. 从村口朴实的阿姨,到写字楼里端庄的白领, 在人体 ...

  6. Linux服务器之间免密登录设置

    说明: A为linux服务器a B为linux服务器b 每台linux都有ssh的服务端和客户端,linux下的ssh命令就是一个客户端 我们常用ssh协议来进行登陆或者是文件的拷贝,都需要密码 A要 ...

  7. 使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器

    使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...

  8. Vasya the Hipster

    One day Vasya the Hipster decided to count how many socks he had. It turned out that he had a red so ...

  9. Node.js 定时器

    稳定性: 5 - 锁定 所有的定时器函数都是全局的.不需要通过 require() 就可以访问. setTimeout(callback, delay[, arg][, ...]) delay 毫秒之 ...

  10. B+树在磁盘存储中的应用

    欢迎探讨,如有错误敬请指正 如需转载,请注明出处 http://www.cnblogs.com/nullzx/ 我们首先提一个问题, B+树比平衡二叉树在索引数据方面要快么? 大多数人可能认为肯定还是 ...