设为首页 - 加入收藏 焦点技术网
热搜:java
当前位置:首页 >

IOS学习之table view示例

导读:转载请注明出处作者:小马Table view算是ios中最常见的UI设计了,iphone里的 设置 菜单,整个框架都是基于table view的.如下所示:  先说一下table view中的几个概念, 以上图为例, 一行叫做一个cell, 多个cell构成一个section, 上面Bluetooth所在是一个secion, 这个section有一个cell, 而General和Privacy组成...。。。

转载请注明出处

作者:小马



Table view算是ios中最常见的UI设计了,iphone里的 设置 菜单,整个框架都是基于table view的.如下所示:

 

 

先说一下table view中的几个概念, 以上图为例, 一行叫做一个cell, 多个cell构成一个section, 上面Bluetooth所在是一个secion, 这个section有一个cell, 而General和Privacy组成另一个section,这个section有两个cell. 每个section其实还各有自己的header和footer, 可以设置标题,上面的灰色区域,其实就是他们所在的位置,只是这里并没有设置标题而已.

 

本示例工程,有一个seciton, 其中有四个cell, 两种风格,前两个是带导航箭头的,点击切换到另一个页面. 后两个是按钮式的,点击后弹出提示框,另外,加一些背景图片。最终的效果如下图:

 

 

当点击前两行时,会切换到对应的另一个页面,当点击后两行时,则弹出对话框提示,如下图所示:

 



 

 步骤如下:

 

1

新建一个single view工程,然后拖一个tableview controller(以下简称TAC)上去, 然后给这个TAC建立两个委托连接,方法是按住ctrl键把TAC拖到黄色的图标上。如下图:


成功后可以看到这两个连接:



然后在viewcontroller(以下简称VC)头文件中,让VC实现两个协议,

 

@interfaceViewController : UIViewController{   }

 

这里要解释一下原理,简单来讲, UITableView对象的代理要设置为 self(当前这个VC), 这个就是通过前面的拖拉动作完成的,然后这个VC去实现代理中的一些方法,从而等系统回调这些方法时,完成特定的动作.

 

另外我需要一个数组用来初始化cell中的文字显示,完整的头文件如下:

 

#import  @interfaceViewController : UIViewController{   } @property (strong, nonatomic)NSArray *list;  @end

 

2

到VC的.m文件里,去做一些初始化的动作,还要实现几个关键的代理中的方法。

- (void)viewDidLoad{    [super viewDidLoad];          // Do any additional setup after loadingthe view, typically from a nib.    NSArray *array = [[NSArray alloc] initWithObjects:@"苹果", @"香蕉", @"香蕉",@"香蕉",@"香蕉",nil];    self.list = array;   }


这个方法返回有多少个Section,我这里只要一个就行了,所以返回1.

- (NSInteger)numberOfSectionsInTableView:(UITableView*)tableView{    NSLog(@"numberOfSectionsInTableView");       tableView.allowsSelection = YES;//这一句加不加都可以,默认就是YES,如果不想被选中,可以置为NO.    //设置头标题    UILabel* label = [[UILabel alloc] initWithFrame:CGRectMake(0,0, CGRectGetWidth(self.view.frame), 40)];    label.text = @"section header";    tableView.tableHeaderView = label;    return 1;}


 

这个方法返回 section有多少个cell,要注意如果cell中的内容要根据某个数组赋值,要保证这个数组的大小大于这个数,比如这里,self.list大小一定要大于这个返回值.

 

- (NSInteger)tableView:(UITableView*)tableView numberOfRowsInSection:(NSInteger)section{    return 4;}


 

下面还几个方法要实现,不过先暂停在这里,让我们去storyboard里“设计”一下先.

 

3

前面提到我们的前两个cell是具有导航功能的,这个功能我们甚至不用写代码,直接在storyboard(以下简称SB)里就可以完成, 打开SB视图,选中当前VC, 选择editor-embedin-navigation controller, 这时SB变成如下的样子:

 

然后给默认的那个VC,起个标题,比如就叫 “首页”,


 

 

 说明一下原理,在IOS下,要想实现多个view之间的切换,必须要有这么一个所谓的 NavigationController, 可以将它理解成一个栈,这个栈中可以存放很多View Controller。在这个栈创建的时候,我们先给它添加一个View Controller,称为Root View Controller,它放在栈底,是刚加载程序的时候显示的视图。当用户新选择了一个想要显示的视图时,那个新的View Controller入栈,它所控制的视图就会显示出来。这个新的View Controller通常称作Sub Controller.

 

选中默认VC里的TAC,做如下几个设置:

 

 

效果如下:

 

 

然后选中这两个新加的cell, 给他们设置好不同的标识,这样代码里可以根据它们找到指定的cell,如下图所示:


 

在SB里新增两个VC,它们上面各放一个label,内容分别改为”苹果”和”香蕉”, 这么做只是为了标识。然后分别选中每个cell, 按住ctrl键分别拖到两个新增的VC上,在弹出的selectionsegue里选择push(关于segue,push等概念这里就不多说了,以免跑题,后面用到专门在写), 最终的视图如下:

 

 

 

 

这里可能有人会有疑问, 前面不是有4个cell吗,这里怎么只加了2个? 这是因为只有前两个cell是用于导航切换视图的,这里指定两个特定的cell(分别标记了”apple”和”banana”)有这样的功能,后面创建cell实例时,其中两个直接用这两个特定的就行了,下面的代码会看到.

  

4

继续实现.m里的代码,

添加数据源,返回各行cell实例

 

- (UITableViewCell*)tableView:(UITableView *)tableView         cellForRowAtIndexPath:(NSIndexPath*)indexPath{    NSArray *idArray = [NSArray arrayWithObjects:@"apple",@"banana", nil];    UITableViewCell *cell;        NSUInteger row = [indexPath row];    NSLog(@"row = %u", row);    if (row > 1)    {        //后面的新建        static NSString *TableSampleIdentifier= @"testIdentifier";               cell = [tableView dequeueReusableCellWithIdentifier:                                TableSampleIdentifier];        if (cell == nil)        {            cell = [[UITableViewCell alloc]                    initWithStyle:UITableViewCellStyleDefault                    reuseIdentifier:TableSampleIdentifier];        }           }    else    {        //前两个是用特定的identifier生成, 这些cell指定了导航        cell = [tableView dequeueReusableCellWithIdentifier:                                 [idArray objectAtIndex:row]];           }          cell.textLabel.text = [self.list objectAtIndex:row];                //可以设置一些背景图片.    UIImage *image = [UIImage imageNamed:@"qq"];    if (row > 1) {        cell.imageView.image = image;    }    else    {        //导航风格        cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;    }           return cell;}

 

当用户选中某个行的cell的时候,回调这个

-(void)tableView:(UITableView*)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{    if ([indexPath row] > 1)//后两行    {        NSString *rowString = [self.list objectAtIndex:[indexPathrow]];               UIAlertView * alter = [[UIAlertView alloc]initWithTitle:@"选中:" message:rowString delegate:self cancelButtonTitle:@"确定" otherButtonTitles:nil,nil];        [alter show];    }    else    {        //前两行已经在storyboard里指定了动作.    }      }

 

当然,方法肯定不只这一种,这里只是把我个人用的方法分享出来给大家参考, 代码下载地址:


 http://download.csdn.net/detail/pony_maggie/7154457

 

(编辑: pony_maggie)

网友评论
相关文章