`
mmdev
  • 浏览: 12847764 次
  • 性别: Icon_minigender_1
  • 来自: 大连
文章分类
社区版块
存档分类
最新评论

IOS学习八:UITableView表视图控件初步

 
阅读更多

表视图这个控件学习的时候,发现是目前我接触到最复杂的组件。

在Android中也提供了类似表视图的控件叫ListView。

原生的ListView,支持的操作其实很有限,数据的条目展示,点击或是长按的操作。

后来慢慢的衍生出来的索引,分区,动态改变指定条目位置等。

到了IOS发现,原来都是这些设计概念全是从IOS的表视图移植过去的吧。

因此,IOS的表视图是个挺丰富的控件


以下文章内容我基本是这么个流程划分

最简单的表视图——》自定义Cell表——》可编辑表——》可动态移动表

以下是配合Navigation导航条控件演示的tableView各种实现。

一:基础表视图

我们看下表视图一个大致的界面模型

首先是navc的顶级视图


这个视图控制器的代码基本很前面提到的导航那章一样,只是多了一个数组容器来保存要显示的三个二级视图控制器

看下m文件

//
//  NonoFirstLevelViewController.m
//  NavTest
//
//  Created by Nono on 12-4-26.
//  Copyright (c) 2012年 NonoWithLilith. All rights reserved.
//

#import "NonoFirstLevelViewController.h"
#import "NonoSecondLevelViewController.h"
#import "SimpleTableViewController.h"
#import "CustomCellViewController.h"
#import "EditViewController.h"
@interface NonoFirstLevelViewController ()

@end

@implementation NonoFirstLevelViewController
@synthesize controllers = _controllers;
#pragma 实现头文件中自定义方法;
- (void)initAllSecondControllers:(NSMutableArray *)array
{
    SimpleTableViewController *controller1 = [[SimpleTableViewController alloc] init];
    [controller1 setTitle:@"简单表视图"];
    [array addObject:controller1];
    [controller1 release];
    
    CustomCellViewController *controller2 = [[CustomCellViewController alloc] init];
     [controller2 setTitle:@"自定义cell视图"];
    [array addObject:controller2];
    [controller2 release];
    
    
    EditViewController *controller3 = [[EditViewController alloc] init];
    [controller3 setTitle:@"可编辑视图"];
    [array addObject:controller3];
    [controller3 release];
}

- (id)initWithStyle:(UITableViewStyle)style
{
    self = [super initWithStyle:style];
    if (self) {
    }
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.title = @"表视图Demo";
    //实例化一个可变数组
    NSMutableArray *array = [[NSMutableArray alloc] init ];//
    self.controllers = array;
    [array release];
    [self initAllSecondControllers:self.controllers];
}

- (void)viewDidUnload
{
    [super viewDidUnload];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

#pragma mark - Table view data source
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [self.controllers count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"FirstLevelCell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
    }
    NSUInteger row = [indexPath row];
    NonoSecondLevelViewController *controller = [self.controllers objectAtIndex:row];
    cell.textLabel.text = [controller title];
    return cell;
}

#pragma mark - Table view delegate
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSUInteger row = [indexPath row];
    NonoSecondLevelViewController  *secondVC = [self.controllers objectAtIndex:row];
     [self.navigationController pushViewController:secondVC animated:YES];
     
}

@end
顶视图类基本就是一个导航作用。

线面我么先看最简单的这条目

简单表视图:


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    //控件复用
    static NSString *CellIdentifier = @"simpleCell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
      
    }
    NSUInteger row = [indexPath row];
    NSString *string = [self.data objectAtIndex:row];
    cell.textLabel.text = string;
    
    //这个可以定义item右端小图标显示风格,默认是none;
    //cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;
    [string release];
    return cell;
}

这边主要说如下几点:

1》。控件得复用,这个和Android很像,因此我们在获取cell对象时,先从原来得复用队列里查找(更具指定的标记,这点也告诉我们,我们可以设置多个标记),

若没有,那就新建一个

2》。整个tableview的style分两种,一种就是顶级视图界面的那种:self.tableView.style = UITableViewStylePlain,另一种就是这个视图的风格:

self.tableView.style = UITableViewStyleGrouped

3》.对于每个item,单元格样式使用了3个不同的单元格元素。依次左边开始有个图标,中间就是一个label,右侧会有一个详情栏。

4》。同样的对于每个cell也是有样式风格的cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier]

针对3,4设置后得某种效果如下:

左端可以自己敬爱个图标进去,黑体字就是文本label,灰色的是详细文本标签,小箭头图标是accessoryType

以下就是代码

    static NSString *CellIdentifier = @"FirstLevelCell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:CellIdentifier] autorelease];
    }
    NSUInteger row = [indexPath row];
    NonoSecondLevelViewController *controller = [self.controllers objectAtIndex:row];
    cell.textLabel.text = [controller title];
    cell.detailTextLabel.text = @"什么情况";
    //这个可以定义item右端小图标显示风格,默认是none;
    cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;
    return cell;
默认风格的cell是不能显示详情标签内容的。

其实很多效果,代码都走一边就看出来了,具体就自己改动下代码就ok了

二:自定义的Cell

自定义的cell,xib实现


基本没什么好说的,看下该类额控制器文件

//
//  CustomCellViewController.m
//  NavTest
//
//  Created by Nono on 12-5-4.
//  Copyright (c) 2012年 NonoWithLilith. All rights reserved.
//

#import "CustomCellViewController.h"

@interface CustomCellViewController ()

@end
@implementation CustomCellViewController
@synthesize customCell = _customCell;
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    NSMutableArray *array = [[NSMutableArray alloc] initWithObjects:@"陈凯",@"Nono",@"Lilith",@"窗前明月光",@"疑是地上霜",@"举头望明月",@"低头思故乡",@"锄禾日当午",@"汗滴禾下土",@"谁知盘中餐",@"粒粒皆幸苦",nil];
    self.data = array;
    [array release];
    // Do any additional setup after loading the view from its nib.
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}


#pragma mark_
#pragma 数据源方法
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [self.data count];
    
}

// Row display. Implementers should *always* try to reuse cells by setting each cell's reuseIdentifier and querying for available reusable cells with dequeueReusableCellWithIdentifier:
// Cell gets various attributes set automatically based on table (separators) and data source (accessory views, editing controls)

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    
    static NSString *CellIdentifier = @"CustomCell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"CustomCell" owner:self options:nil];
        if([nib count] > 0){
            cell = self.customCell;
            cell.backgroundColor = [UIColor redColor];
        }else{
            NSLog(@"加载 nib文件失败");
        }
        
    }
    NSUInteger row = [indexPath row];
    NSString *string = [self.data objectAtIndex:row];
    UILabel *customlabel =(UILabel*) [cell viewWithTag:11];
    customlabel.text = string;
    [string release];
    return cell;
}
@end
提几个注意点:

1》。cell的xib文件得拥有者设置成该类,在该类得头文件中定义一个输出口。

2》 我们看到cell的xib文件有3个label视图我们能看到,其实还有一个没有title的label视图,也就我们要动态添加数据的那个视图,

在xib文件中需要给他设置一个tag,这样我们在代码里才能根据tag找出该对象(和Android中得id很像)。这边我定义了11,所以

UILabel *customlabel =(UILabel*) [cellviewWithTag:11];

customlabel.text = string;

3》。xib文件加载,我是根据书上得列子方法。根据应用的束来获取。

4》。哦,还有点就是 static NSString *CellIdentifier = @"CustomCell";。这个在xib文件得指定器中定义,因为原本我们新建一个cell是有个传入指定标签,
而现在这个新建一个cell说白了就是直接从xib中加载一个实例化了,那么指定器怎需要在xib中定义下。
对于cell简单的自定义就是这样。


三:可编辑的tableView(删除,添加,移动)

//
//  EditViewController.m
//  NavTest
//
//  Created by Nono on 12-5-4.
//  Copyright (c) 2012年 NonoWithLilith. All rights reserved.
//

#import "EditViewController.h"

@interface EditViewController ()

@end

@implementation EditViewController
@synthesize edittableView;
- (void)editButtonPressed:(id)sender
{   
    [self.edittableView setEditing:!self.edittableView.editing animated:(YES)];
    if (edittableView.editing) {
        [self.navigationItem.rightBarButtonItem setTitle:@"完成"];
    }else {
        [self.navigationItem.rightBarButtonItem setTitle:@"编辑"];
    };
    NSLog(@"点击了按钮");
}
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    NSMutableArray *array = [[NSMutableArray alloc] initWithObjects:@"陈凯",@"Nono",@"Lilith",@"窗前明月光",@"疑是地上霜",@"举头望明月",@"低头思故乡",@"锄禾日当午",@"汗滴禾下土",@"谁知盘中餐",@"粒粒皆幸苦",nil];
    self.data = array;
    [array release];
    UIBarButtonItem *rigthButton = [[UIBarButtonItem alloc]  initWithTitle:@"编辑"  style:UIBarButtonItemStyleBordered  target:self  action:@selector(editButtonPressed:)];
    self.navigationItem.rightBarButtonItem = rigthButton;
    //self.navigationItem.prompt = @"加载";
    [rigthButton release]; 
    // Do any additional setup after loading the view from its nib.
}

- (void)viewDidUnload
{
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

#pragma mark - Table view data source

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    // Return the number of rows in the section.
    return [self.data count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"editLevelCell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
    }
    NSUInteger row = [indexPath row];
    NSString *string = [self.data objectAtIndex:row];
    cell.textLabel.text = string;
    [string release];
    return cell;
}

#pragma 实现数据源协议中一些关于编辑操作方法
- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath
{
    //是否可以编辑,即是tableView setEditing的前提;默认是yes,实现这个方法估计主要是选择性的编辑条目。
    return YES;
}

- (BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)indexPath
{
    //同理默认其实就是yes,移动模式(会显示可以触摸得移动button)必须是在实现了下面这个方法才有效,否则及时yes了,移动模式条也是不显示的,简单的说,你不能执行移动操作
    return YES;
}
//移动操作
- (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath
{
    //拖动得思路就是先备份选中行,删除原来那份,将备份的一份插入到目标行
    NSUInteger fromRow = [sourceIndexPath row];
    NSUInteger toRow = [destinationIndexPath row];
    id ob = [[self.data objectAtIndex:fromRow] retain];
    [self.data removeObjectAtIndex:fromRow];
    [self.data insertObject:ob atIndex:toRow];
    [ob release];
}

- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath
{
      NSUInteger row = [indexPath row];
    //提交操作完的编辑
    if (editingStyle == UITableViewCellEditingStyleDelete) {
        [self.data removeObjectAtIndex:row]; //删除操作
        [tableView deleteRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationFade];
    }
    
    if (editingStyle == UITableViewCellEditingStyleInsert) {
        [self.data insertObject:@"插入数据" atIndex:row];//插入操作
        [tableView insertRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationLeft];
    } 
}

#pragma 实现tableView委托中一些方法
- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath;
{
    //设置可编辑得样式:系统提供了三种,一种是删除,一种是插入,一种时是none
    NSInteger row = [indexPath row];
    if(row %2 == 0)//这边做了小处理,间隔显示删除和插入
    {
        return UITableViewCellEditingStyleDelete;
    }
    return UITableViewCellEditingStyleInsert;
}
@end
基本代码如上。

发现写的太长了。。哎

下班回家~

分享到:
评论

相关推荐

    iOS表视图之下拉刷新控件功能的实现方法

    下拉刷新是重新刷新表视图或列表,以便重新加载数据,这种模式广泛用于移动平台,相信大家对于此也是非常熟悉的,那么iOS是如何做到的下拉刷新呢?下面小编给大家分享iOS表视图之下拉刷新控件的实现方法,一起看看吧

    Lightning-Table:用于处理 UITableView 的声明式 api

    表格视图是几乎所有 iOS 应用程序的基础,但它们也是最难掌握的控件之一。 UITableView的开箱即用是通过使用表的数据源和委托协议的命令式 API 来驱动的。 虽然可以无限扩展,但这种设计模式很快就会变得难以管理,...

    iOS UITableView 与 UITableViewController实例详解

    很多应用都会在界面中使用某种列表控件:用户可以选中、删除或重新排列列表中的项目。这些控件其实都是UITableView 对象,可以用来显示一组对象,例如,用户地址薄中的一组人名。  UITableView 对象虽然只能显示一...

    EmptyPage:一个空的状态控件,可在构建iOS应用程序时提供视觉上吸引人的上下文

    演示:UICollectionViewUITableView多状态切换预置模板视图:静态图动图纯文本富文本复合型视图特点: 提供默认管理器来支持 UICollectionView & UITableView. 可以自定义管理器来支持任何视图. 空白页可以是任何形式的...

    史上最全的ios开发源码

    苹果iOS是由苹果公司开发的手持设备操作系统。苹果公司最早于2007年1月9日的Macworld大会上公布这个系统,最初是设计给iPhone使用的,后来陆续套用到iPod touch、iPad以及Apple TV等苹果产品上。iOS与苹果的Mac OS X...

    IOS实现简易进销存管理

    2.基本控件的使用,多视图的切换,弹出视图的应用(可拖动); 3.UITableView的应用,数据列表展示,联动等; 4.进销存的进仓,出仓及库存实现 初始登录用户:admin,密码:admin; 此项目为本人学习过程中所写...

    ios开发记录

    //超出这个view的边界的控件不再显示 [_infoView setClipsToBounds:YES]; //UIView 静态方法,开始一个动画 [UIView beginAnimations:nil context:nil]; begin 开始 //animation 动画 duration 间隔时间 ...

    AutolayoutExampleWithMasonry:与Masonry不同的Autolayout示例。用砌体写的Autolayout案例,持续更新中。详细解答请看tutuge.me

    Case7:给UITableView加简单的视差视差效果标题 案例8:实时更改UITableViewCell的高度 案例9:等距视图 案例10:用约束优先级保证可移动View的内容可见性 案例11:Autolayout的约束=控件间位置关系的“绑定” 案例...

    iOS模拟中奖名单循环滚动效果

    (1)控件:一个父View,依次添加两个tableVew,使其上下紧挨着,高度均等于所有cell的总高度,且加载相同的的数据,父视图的clipsToBounds属性一定要设置为true (2)滚动:使用计时器,调整时间及滚动大小,使展示...

    iOS开发之UIScrollView详解

    介绍:UIScrollView用于在一个小范围里显示很大的内容的控件。通过用户平滑、手捏手势,在这个小区域里查看不同内容。是UITableView和UITextView的父类。它是视图,但是比较特殊,可以看成把它看成2层的结构。上面是...

    HGCircularSlider:适用于iOS应用程序的自定义可重复使用的循环进度滑块控件

    不错的库,可显示项目中任何UITableView的占位符 精美的雷达视图,以完全可自定义的波纹动画向附近的用户显示 要求 iOS 9.0以上 Xcode 11.4 安装 HGCircularSlider也可以通过 遵循此。 HGCircularSlider也可通过。 ...

    IDNLoopView图片/视图循环播放控件

    源码IDNLoopView,这个控件有如下特点: 1. 可实现图片或视图的无限循环播放 2. 支持任意类型视图,包括但不限于UIImageView 3. 可在Touch过程中改变控件大小,过渡效果...6. 使用方法类似UITableView,没有学习成本

    一个简单的瀑布流控件,基本用法和tableview一样(iOS源代码)

    来源:github/waterflowViewLicence:MIT作者:|′ Mr—周√:face_blowing_a_kiss: ... 只要把代码拖进项目,导入头文件即可,创建控件,实现数据源方法即可,继承cell就可以了,用法和tableview相同,为cell设置重用标示符

    UITableView中Cell重用机制导致内容重复的解决方法

    UITableView继承自UIScrollview,是苹果为我们封装好的一个基于scroll的控件。上面主要是一个个的UITableViewCell,可以让UITableViewCell响应一些点击事件,也可以在UITableViewCell中加入UITextField或者UITextView...

    仿网易新闻首页滑动UITableView布局(纯净版)(iPhone源代码)

     仿网易新闻的滑动栏目切换视图控件,具有以下特色: 1.支持手势左右滑动切换栏目视图; 2.支持点击栏目标题切换视图; 3.去除抽屉效果,方便集成进各大应用; 4.集成横竖屏适配。 小编注:感谢开发者@清澈Saup 。

    适用于iOS应用程序的自定义可重复使用的循环/进度滑块控件。-Swift开发

    您可能还喜欢HGPlaceholders-不错的库,可以显示项目中任何UITableView的占位符HGRippleRadarView-漂亮的雷达视图,可以使用可自定义的波纹动画显示附近的用户,完全可自定义要求iOS 9.0+ Xcode 11.4安装...

    淘宝商品详情页面控件

    6、testDetail,提供了四种展示展示方式,UITableViewUITableView(无sectionbar)UIScrollViewUIWebView; 依赖 1、此项目依赖MFullScreenFramework :https://github.com/was0107/MFullScreenFramework

    LWAsyncDisplayView(iOS源代码)

    LWAsyncDisplayView 轻量级的属性文本 异步绘制 控件,支持布局预加载缓存、支持图文混排显示,支持添加链接、支持自定义排版。使用在UITableView上时,滚动时可以保持帧数在60.详情请见Demo 功能: Features 1、...

    iOS自定义可展示、交互的scrollView滚动条

    上一篇简述了封装上拉、下拉刷新控件,本篇在此基础上添加了一个自定义的scrollView滚动条,可展示、交互,首先看一下效果图: 简单阐述一下实现逻辑:自定义滚动条视图继承UIView,添加滚动条滑动事件、其他区域...

Global site tag (gtag.js) - Google Analytics