iOS开发的UI制作中动态和静态单元格的基本使用教程

静态单元格的使用
一、实现效果与说明

说明：观察上面的展示效果，可以发现整个界面是由一个tableview来展示的，上面的数据都是固定的，且几乎不会改变。

要完成上面的效果，有几种方法：

（1）可以直接利用代码，返回三组，在判断每组有多少行，展示些什么数据，这样写“死”的代码建议绝不要使用。

（2）稍微灵活一些的，可以把plist文件一懒加载的方式，加载到程序中，动态获取。但是观察界面结构，很容易看出这样需要进行模型嵌套，很麻烦。

（3）storyboard提供了静态单元格这个功能，可以很方便的完成上面的界面展示效果。（提示：在实际的开发中很少这样使用）

二、使用静态单元格完成简单界面展示的过程

在类似的开发中，如果整个界面都是tableview，那么直接让控制器继承自uitableviewcontroller.

修改主控制器，让其继承自uitableviewcontroller

把storyboard中默认的uiview删掉，直接拖一个viewcontroller

当拖入一个viewcontroller的时候，它上面默认就会有一个cell,默认情况下，这个cell是动态的，也就是默认是看不见的。

把cell设置成静态的，在属性面板的content  中设置为static cell（静态cell）所见即所得  注意必须更改这里的这个属性。

让它和主控制器关联

接下来，可以依次设置显示的图片和文字。

设置标题有两种方式：

1是双击更改

2是点击子控件  lable修改

按照界面需要，设置辅助视图

设置有多少组，每组有多少行。
设置组：
点击tableview   设置属性面板的sections属性。

设置每组多少行：

小技巧：如果写的单元格千年不变，那么可以先写一组中的一行，再拷贝，稍作修改即可。
注意：静态单元格是实际开发中，很少用到，此处只当知识点介绍。

在uitableview的应用中使用动态单元格来完成app应用程序管理界面的搭建
一、实现效果

说明：该示例在storyboard中使用动态单元格来完成。

二、实现

1.项目文件结构和plist文件

2.实现过程以及代码

在tableview的属性选择器中选择动态单元格。

说明：在storyboard中直接使用其自带的动态单元格完成tableviewcell的定义，并创建了一个管理该cell的类，进行了连线。

实现代码：

数据模型部分：

yyappinfo.h文件

 

复制代码 代码如下:

//
//  yyappinfo.h
//  01-使用动态单元格来完成app应用程序管理界面的搭建
//
//  created by 孔医己 on 14-6-2.
//  copyright (c) 2014年 itcast. all rights reserved.
//

 

#import <foundation/foundation.h>

@interface yyappinfo : nsobject
@property(nonatomic,copy)nsstring *size;
@property(nonatomic,copy)nsstring *download;
@property(nonatomic,copy)nsstring *icon;
@property(nonatomic,copy)nsstring *name;

 

-(instancetype)initwithdict:(nsdictionary *)dict;
+(instancetype)appinfowithdict:(nsdictionary *)dict;
@end

yyappinfo.m文件

复制代码 代码如下:

//
//  yyappinfo.m
//  01-使用动态单元格来完成app应用程序管理界面的搭建
//
//  created by 孔医己 on 14-6-2.
//  copyright (c) 2014年 itcast. all rights reserved.
//

 

#import "yyappinfo.h"

@implementation yyappinfo

-(instancetype)initwithdict:(nsdictionary *)dict
{
    if (self=[super init]) {
        //使用kvc
        [self setvaluesforkeyswithdictionary:dict];
    }
    return self;
}

+(instancetype)appinfowithdict:(nsdictionary *)dict
{

    return [[self alloc]initwithdict:dict];
}
@end

视图部分

 

 yyappcell.h文件

复制代码 代码如下:

//
//  yyappcell.h
//  01-使用动态单元格来完成app应用程序管理界面的搭建
//
//  created by 孔医己 on 14-6-2.
//  copyright (c) 2014年 itcast. all rights reserved.
//

 

#import <uikit/uikit.h>

@class yyappinfo,yyappcell;

@protocol yyappcelldelegate <nsobject>
-(void)btndidclick:(yyappcell *)cell;

@end
@interface yyappcell : uitableviewcell

@property(nonatomic,strong)yyappinfo *app;
//@property(nonatomic,strong)yyviewcontroller *controller;
@property(nonatomic,strong)id <yyappcelldelegate> delegate;

@end

yyappcell.m文件

复制代码 代码如下:

//
//  yyappcell.m
//  01-使用动态单元格来完成app应用程序管理界面的搭建
//
//  created by 孔医己 on 14-6-2.
//  copyright (c) 2014年 itcast. all rights reserved.
//

 

#import "yyappcell.h"
#import "yyappinfo.h"

@interface yyappcell ()
@property (weak, nonatomic) iboutlet uiimageview *appimg;

@property (weak, nonatomic) iboutlet uilabel *apptitle;
@property (weak, nonatomic) iboutlet uilabel *appdownload;
@property (weak, nonatomic) iboutlet uibutton *appbtn;

@end

 

复制代码 代码如下:

@implementation yyappcell

 

-(void)setapp:(yyappinfo *)app
{
    _app=app;
    self.apptitle.text=_app.name;
    self.appdownload.text=[nsstring stringwithformat:@"大小 %@ | 下载量 %@次",_app.size,_app.download];
    self.appimg.image=[uiimage imagenamed:_app.icon];
   
}

#pragma mark- 完成按钮点击事件

- (ibaction)btnonclick:(uibutton *)sender
{
    //按钮被点击后，变为不可用状态
    sender.enabled=no;
   
    //通知代理，完成提示下载已经完成的动画效果
    if ([self.delegate respondstoselector:@selector(btndidclick:)]) {
        //一般而言，谁触发就把谁传过去
        [self.delegate  btndidclick:self];
    }
}

@end

主控制器

 

yyviewcontroller.m文件

复制代码 代码如下:

//
//  yyviewcontroller.m
//  01-使用动态单元格来完成app应用程序管理界面的搭建
//
//  created by 孔医己 on 14-6-2.
//  copyright (c) 2014年 itcast. all rights reserved.
//

 

#import "yyviewcontroller.h"
#import "yyappinfo.h"
#import "yyappcell.h"

@interface yyviewcontroller ()<uitableviewdatasource,yyappcelldelegate>
@property(nonatomic,strong)nsarray *apps;
@property (strong, nonatomic) iboutlet uitableview *tableview;

@end

 

复制代码 代码如下:

@implementation yyviewcontroller

 

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

#pragma mark- 使用懒加载先把plist文件中得数据加载进来
-(nsarray *)apps
{
    if (_apps==nil) {
        nsstring *fullpath=[[nsbundle mainbundle]pathforresource:@"apps_full.plist" oftype:nil];
        nsarray *arraym=[nsarray arraywithcontentsoffile:fullpath];
       
        nsmutablearray *modles=[nsmutablearray arraywithcapacity:arraym.count];
        for (nsdictionary *dict in arraym) {
            yyappinfo *appinfo=[yyappinfo appinfowithdict:dict];
            [modles addobject:appinfo];
        }
        _apps=[modles copy];
    }
    return _apps;
}

#pragma mark- 设置tableview的数据源方法
//组
-(nsinteger)numberofsectionsintableview:(uitableview *)tableview
{
    return 1;
}
//行
-(nsinteger)tableview:(uitableview *)tableview numberofrowsinsection:(nsinteger)section
{
    return self.apps.count;
}
//组-行-数据
-(uitableviewcell *)tableview:(uitableview *)tableview cellforrowatindexpath:(nsindexpath *)indexpath
{
    //创建cell
    static nsstring *identifier=@"app";
    yyappcell *cell=[tableview dequeuereusablecellwithidentifier:identifier];
    //设置cell的数据
    yyappinfo *appinfo=self.apps[indexpath.row];
    //设置代理
    cell.delegate=self;
    cell.app=appinfo;
    //返回cell
    return cell;
}

#pragma mark- 设置代理
-(void)btndidclick:(yyappcell *)cell
{
    //取出模型
    yyappinfo *app=cell.app;
    nslog(@"daili");
    uilabel *lab=[[uilabel alloc]init];
    //提示的显示位置
    lab.frame=cgrectmake(60, 300, 200, 20);
    //设置提示文本
    lab.text=[nsstring stringwithformat:@"%@已经下载完成",app.name];
    //设置文本背景颜色
    [lab setbackgroundcolor:[uicolor graycolor]];
    [self.view addsubview:lab];
    lab.alpha=1.0;
   
    //设置动画效果
    [uiview animatewithduration:2.0 animations:^{
        lab.alpha=0.0;
    } completion:^(bool finished) {
        //把弹出的提示信息从父视图中删除
        [lab removefromsuperview];
    }];
}

#pragma mark-隐藏状态栏
-(bool)prefersstatusbarhidden
{
    return yes;
}

@end

补充说明

 

　　在程序中通过标示符取出对应的cell，是因为在storyboard中已经对cell打上了标示符（app）的标签。

复制代码 代码如下:

//组-行-数据
-(uitableviewcell *)tableview:(uitableview *)tableview cellforrowatindexpath:(nsindexpath *)indexpath
{
    //创建cell
    static nsstring *identifier=@"app";
    yyappcell *cell=[tableview dequeuereusablecellwithidentifier:identifier];
    //设置cell的数据
    yyappinfo *appinfo=self.apps[indexpath.row];
    //设置代理
    cell.delegate=self;
    cell.app=appinfo;
    //返回cell
    return cell;
}