`
zhengjj_2009
  • 浏览: 154612 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

iOS UI笔记-TableView-02

 
阅读更多

    iOS UI笔记-TableView-02

       实现功能:使用UITableViewDatasource和UITableViewDelegate实现表视图单元格的选中交互功能。在第一个页面用表视图显示两个单元格样式标签,“普通的单元格样式”和“分组的单元格样式”,点击这两个标签时,进入第二个页面,显示对应的样式数据。第二个页面的显示内容是将字符集所有字符内容按5个一组进行分组,进行分组显示或平铺展示。

 

1、参考TableView-01,新建Root02ViewController,实现表视图单元格数据的加载和展示;

2、给Root02ViewController追加UITableViewDelegate的协议,实现协议的didSelectRowAtIndexPath方法。

#pragma TableView Delegate
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    DetailViewController *detailVC = [[DetailViewController alloc] init];
    detailVC.isPlain = indexPath.row ? NO : YES;
    [self.navigationController pushViewController:detailVC animated:YES];
    [detailVC release];
}

 

3、参照Root02ViewControlle新建Detail02ViewController,先在loadView方法中完成对字符集所有字符进行分组,

- (void)loadView
{
    UIView *view = [[UIView alloc] initWithFrame:[UIScreen mainScreen].applicationFrame];
    self.view = view;
    [view release];
    
    NSArray *array = [UIFont familyNames];
    _fontsArray = [[NSMutableArray alloc] initWithCapacity:13];
    NSMutableArray *temp = nil;
    for (int index = 0; index < [array count]; index++) {
        
        // 取出字体内容
        NSString *font = array[index];
        
        if (index % 5 == 0) {
            
            temp = [[NSMutableArray alloc] initWithCapacity:5];
            [_fontsArray addObject:temp];
            [temp release];
        } // 将5整除时,创建temp数组,添加到_fontsArray
        [temp addObject:font];
    }
    
    UITableViewStyle style = self.isPlain ? UITableViewStylePlain : UITableViewStyleGrouped; 
    _tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, 320, kDeviceHeight-20-44) style:style];
    // 设置数据源
    _tableView.dataSource = self;
    // 设置代理方法
    _tableView.delegate = self;
    UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 80)];
    headerView.backgroundColor = [UIColor redColor];
    // 添加子视图
    UILabel *headText = [[UILabel alloc] initWithFrame:CGRectMake(60, 0, 200, 80)];
    headText.backgroundColor = [UIColor clearColor];
    headText.text = @"秋高气爽";
    headText.textAlignment = NSTextAlignmentCenter;
    headText.numberOfLines = 0;
    [headerView addSubview:headText];
    [headText release];
    _tableView.tableHeaderView = headerView;
    [headerView release];
    // 设置表视图的尾部视图(footerView 添加子视图)
    UIView *footerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 80)];
    footerView.backgroundColor = [UIColor yellowColor];
    _tableView.tableFooterView = footerView;
    [footerView release];
    [self.view addSubview:_tableView];
}

 

4、完成Detail02ViewController的三个基本方法numberOfSectionsInTableView,numberOfRowsInSection、cellForRowAtIndexPath

#pragma mark - UITablView DataSource
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return [_fontsArray count]; // 13
} // 表视图当中存在secion的个数,默认是1个

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;
{
    NSLog(@"secion : %d", section);
    return [_fontsArray[section] count]; // 5
} // section 中包含row的数量

// indexPath
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *cellIdentifier = @"cell";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
    
    NSLog(@"indexPath : %@", indexPath);
    
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier] autorelease];
    }
    
    cell.textLabel.text = [[_fontsArray objectAtIndex:indexPath.section] objectAtIndex:indexPath.row];
    
    return cell;
    
} // 创建单元格

5、进行测试,检查页面展示的数据是否为我们想要的数据

 

6、为每个Section添加头部和尾部的标题、高度和相应的视图

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    if (section == 0) {
        return 44;
    }return 25;
} // 设置section header的高度


- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section
{
    if (section == 12) {
        return 80;
    }return 50;
} // 设置section footer的高度

/*
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    UIView *headerView = [[UIView alloc] initWithFrame:CGRectZero];
    headerView.backgroundColor = [UIColor cyanColor];
    return [headerView autorelease];
}*/ // 设置section自定义头部视图
- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section
{
    UIView *footerView = [[UIView alloc] initWithFrame:CGRectZero];
    footerView.backgroundColor = [UIColor cyanColor];
    
    UILabel *tipLabel = [[UILabel alloc] initWithFrame:CGRectMake(60, 0, 200, 30)];
    tipLabel.numberOfLines = 0;
    tipLabel.textAlignment = NSTextAlignmentCenter;
    tipLabel.text = [NSString stringWithFormat:@"section footer %d", section+1];
    [footerView addSubview:tipLabel];
    [tipLabel release];
    
    return [footerView autorelease];
} // 设置section自定义尾部视图 

 

7、单独为某个单元格设置高度

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (indexPath.row == 0 && indexPath.section == 2) {
        return 80; // 第三个section中第一行
    }return 44;
} // 设置行高

 

 

分享到:
评论

相关推荐

    JSPatch学习笔记-UI进阶

    本篇学习笔记将深入探讨如何利用JSPatch在UI层面进行高级操作,特别是与TableView相关的实践。 ### 1. TableView数据源方法 `UITableView`是iOS中的一个核心组件,用于展示列表数据。在使用JSPatch时,我们可以...

    IOS 菜鸟笔记 之 项目 三 源码

    本笔记将聚焦于“项目三”,这是一个典型的iOS应用程序,包含下拉刷新和上拉加载功能。这两个特性是现代移动应用不可或缺的部分,它们提升了用户体验,使得用户可以无缝地获取新数据。 下拉刷新(Pull-to-Refresh)...

    IOS应用源码——常用的下拉动态加载.zip

    "pull-to-refresh-tableview.png"可能是展示下拉刷新效果的截图,而"Center_Button_in_Tab_Bar.flv"可能是一个关于Tab Bar中中心按钮的视频教程,与下拉刷新主题略有偏离,但可能同样对iOS开发有所帮助。 "新建 ...

    Fibonacci:一个相对较小的 iOS 项目,在 tableview 中无限打印出斐波那契数列

    斐波那契 Fibonacci 是我创建的一个相对较小的项目,用于无限输出 fibonacci 序列,如 UITableView 中所示。 该项目的核心目标是提供一种高效且高性能的方法... 设计和实现一个更直观、更美观的 UI 来显示序列中的数字

    IOS代码笔记之仿电子书书架效果

    本篇代码笔记将详细介绍如何在iOS应用中实现这种效果。主要涉及的技术点包括UITableView的使用、自定义UITableViewCell以及事件处理。 首先,从标题和描述中我们可以看出,这个效果是通过UITableView来实现的,...

    objc学习笔记

    在本笔记中,我们将重点关注"更轻量的tableView"这一主题,这是iOS应用开发中常见的UI组件。 UITableView是iOS应用中不可或缺的一部分,它用于展示数据列表,用户可以通过滚动浏览内容。在“更轻量的tableView”中...

    iOS 开发项目基于 UITableView 的待办事项列表应用

    例如,`didSelectRowAt`可以用来处理任务的点击事件,`tableView(_:commit:forRowAt:)`处理单元格的编辑操作。 此外,我们还可以为应用添加一些高级功能,比如搜索、排序和筛选。通过实现UISearchBar的代理方法,...

    藏经阁-小红书移动端自动化数据采集实践.pdf

    在iOS中UIControliOS大多数可点击UI控件都是基于UIControl,而所有的事件也都要通过- (void)sendAction:(SEL)action to:(nullable id)target forEvent:(nullable UIEvent*)event转发,通过该方法,我们可以监听到...

    亚信java笔试题-iOSResourceCollect:iOSResourceCollect/iOS资源收集

    tableview 0001 0001 序号 动画 0001 0002 序号 知识点 面试 0001 单链表 0002 HTTP状态码 几个常见的 HTTP状态码 ~ 序号 算法 地址 00001 算法笔记 00002 巩朋:我的算法学习之路 00003 傅里叶变换:MP3、JPEG和...

Global site tag (gtag.js) - Google Analytics