iOS使用代码直接自定义cell 并添加button响应

原创 2016年08月29日 14:53:59


//iOS 使用代码自定义cell 并添加button响应


由于使用xib画cell界面虽然说是相对比较快,但是代码管理很不方便,使用git等工具无法进行共享对比。因此,很多时候需要自己写代码来创建xib界面,并引用到tableView中去。

例如,我写的是一个里面含有一个image和一个textFiled的cell。


1、先创建一个TableViewCell类,自定义,继承于UITableViewCell

其代码入下所示:

在TableViewCell.h中:

@interface TableViewCell : UITableViewCell
@property (nonatomic,strong) UIButton *iconBtn;
@property (nonatomic,strong) UITextField *firstText;
@end

在TableViewCell.m中

#import "TableViewCell.h"

#define SCREEN_WIDTH ([UIScreen mainScreen].bounds.size.width)
#define ICON_IMAGE 20
#define MINCRAK 15

//textfiled框离左边的宽度
#define FIRSTTEXT_Left 60
#define FIRSTTEXT_HIGH 38

@implementation TableViewCell


//初始化Cell
-(instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{
    
    self=[super initWithStyle:style reuseIdentifier:reuseIdentifier];
    
    if(self){
        [self initCell];
        [self setSubviewFramWithCellHeight:50 iconWidHei:ICON_IMAGE firtextWid:SCREEN_WIDTH/8*3 firtexHei:FIRSTTEXT_HIGH];

    }
    return self;
}


-(void)initCell{
    
    //1、创建头像
    _iconBtn=[[UIButton alloc]init];
    [_iconBtn setBackgroundImage:[UIImage imageNamed:@"contact.jpg"] forState:UIControlStateNormal];
    [self.contentView addSubview:_iconBtn];
       
    //2、创建textfield
    _firstText=[[UITextField alloc] init];
    _firstText.text=@"请输入数据";
    _firstText.textColor=[UIColor grayColor];
    _firstText.borderStyle=UITextBorderStyleBezel;
    _firstText.clearsOnInsertion=YES;
    _firstText.allowsEditingTextAttributes=YES;
    _firstText.delegate=self;
    [self.contentView addSubview:_firstText];
}


//参数说明:cell高度、头像宽高、第一个text长度、第一个text高度
-(void)setSubviewFramWithCellHeight:(CGFloat )cellheight iconWidHei:(CGFloat )iconWH firtextWid:(CGFloat )firtexW firtexHei:(CGFloat )firtexH{
    
    //头像
    _iconBtn.frame=CGRectMake((SCREEN_WIDTH/4-iconWH)/2-MINCRAK, (cellheight-iconWH)/2, iconWH, iconWH);
    
    //textfiled
    CGFloat firtexX=FIRSTTEXT_Left;
    _firstText.frame=CGRectMake(firtexX, (cellheight-firtexH)/2, firtexW, firtexH);

@end


2、写好了TableViewCell后,则可在TableViewController中引用。

TableViewController.h:

#import <UIKit/UIKit.h>

@interface TableViewController : UITableViewController

@end


TableViewController.m:

#import "TableViewController.h"
#import "TableViewCell.h"


//TableView中的每个Cell的高度
#define CELLL_ROWHIEGH 55

//TableView距离屏幕上面的距离
#define TABLE_HIGH 70
//屏幕宽度
#define SCREEN_WIDTH ([UIScreen mainScreen].bounds.size.width)

//TableView标题的高度
#define TABLEHEAD_HIGH 50

@interface TableViewController (){

    //存储信息
    NSMutableArray * contactData;
    //行数
 int rowInSectionZero;
}

@property (nonatomic,strong)UILabel *lable1;
@end

@implementation TableViewController

- (void)viewDidLoad {
    
    //设置tableView的每行行高度
    self.tableView.rowHeight=CELLL_ROWHIEGH;
    
    
    //第一次加载,设置第一个section的row值为1
    rowInSectionZero=1;
    
    //最后数据存入contactData中
    contactData=[[NSMutableArray alloc] init];
    
    //设置tableView头距离屏幕上方距离
    self.tableView.contentInset=UIEdgeInsetsMake(TABLE_HIGH, 0, 0, 0);
    self.tableView.scrollIndicatorInsets=UIEdgeInsetsMake(TABLE_HIGH, 0, 0, 0);
    
    //初始化tableView标题,并设置标题高度及内容
    [self createTableViewHeaderWithstartX:0 startY:0 tableViewHeadWidth:SCREEN_WIDTH tableViewHeadHeigh:TABLE_HIGH];
    
    //设置tableView分割线格式
    self.tableView.separatorStyle=UITableViewCellSeparatorStyleNone;
        
    [super viewDidLoad];
}

//创建tableView的头:Lable,完成  (给TableView的头上面添加一个Label 一个button)
-(void)createTableViewHeaderWithstartX:(CGFloat )x startY:(CGFloat )y tableViewHeadWidth:(CGFloat)length tableViewHeadHeigh:(CGFloat)width{
    UIView *headerView = [[UIView alloc] initWithFrame: CGRectMake(x, y, length, width)];
    self.tableView.tableHeaderView = headerView;
    self.tableView.tableHeaderView.backgroundColor=[UIColor whiteColor];
    UILabel *lableHead=[[UILabel alloc] initWithFrame:CGRectMake((SCREEN_WIDTH-100)/2, (TABLE_HIGH-40)/2, 100, 40)];
    lableHead.font =[UIFont systemFontOfSize:19];
    lableHead.text=@"TableViewHead";
    [self.tableView.tableHeaderView addSubview:lableHead];
    UIButton *btnAdd=[[UIButton alloc] initWithFrame:CGRectMake(SCREEN_WIDTH-80, (TABLE_HIGH-40)/2, 70, 40)];
    [btnAdd setTitle:@"完成" forState:UIControlStateNormal];
    [btnAdd setFont:[UIFont systemFontOfSize:21]];
    [btnAdd setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
    [btnAdd setTintColor:[UIColor redColor]];
    [self.tableView.tableHeaderView addSubview:btnAdd];
    
}
//一下两个为重要函数,显示出TableView有几组和几行
#pragma mark - Table view data source

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
//#warning Incomplete implementation, return the number of sections
    
    return 2;
    
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
//#warning Incomplete implementation, return the number of rows
    if(section==0){
        return rowInSectionZero;
    }else{
        return 1;
    }
    
}

//最简单的方式,不对每个CEll进行标记,内存优化
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
        TableViewCell *cell=[[TableViewCell alloc]init];
        cell.selectionStyle=UITableViewCellSelectionStyleNone;
        cell.delegate = self;
        if(indexPath.row!=0){
            [cell.iconBtn setBackgroundImage:[UIImage imageNamed:@"delete.jpg"] forState:UIControlStateNormal];
        }
        return cell;
}


由此,则可以在TableView中显示出自己代码写的TableViewCell了,因为上函数中的TAbleViewCell是自定义的,因此和自己写的类相关联,由此最简单的界面就完成了。


3、深入研究  =================如何在自己代码写的Cell中添加button,点击能够得到该Section该row的值。

此时,比如在前面的image由于我刚开始定义的就是button,

3.1、在TableViewCell.h中先声明协议:

@protocol myTabVdelegate <NSObject>
-(void)removeContactVClick:(UITableViewCell*)cell;
@end

再声明代理:

//声明代理
@property(assign,nonatomic)id<myTabVdelegate>delegate;

@end


3.2、在TableViewCell.m的iconBtn定义的时候,加上:

  

  [_iconBtnaddTarget:selfaction:@selector(removeContact:)forControlEvents:UIControlEventTouchUpInside];

由此,在后面自定义函数:

-(void)removeContact:(UIButton *)sender
{
    [self.delegateremoveContactVClick:self];
    
}


3.3、在TableViewController中,添加代理:

@interface TableViewController ()<myTabVdelegate>


3.4、即可在后面添加相应函数:

//点击前面的图片时
-(void)removeContactVClick:(UITableViewCell*)cell{
    NSIndexPath *index = [self.tableView indexPathForCell:cell];
    NSLog(@"index.row=%ld,index.section=%ld",(long)index.row,(long)index.section);
    if(index.row==0&&index.section==0){
        //如果是第一个,不动,如果不是第一个,则要将该行删除
        NSLog(@"row=0,section=0");
    }else{
        rowInSectionZero--;
        [self.tableView deleteRowsAtIndexPaths:[NSArray arrayWithObject:index] withRowAnimation:YES];
        
    }

}}


由此,可对TableView的每个Cell添加button,并保证button能够相应。


4、还可以对textfield添加响应,从而使得点击textfield的时候,键盘能够弹出,但此时3.2的步骤中的ControlEvents就变成UIControlEventEditingDidBegin即可。



















相关文章推荐

iOS团购自定义cell代码

  • 2016年01月30日 13:16
  • 3.27MB
  • 下载

iOS开发UI篇—以微博界面为例使用纯代码自定义cell程序编码全过程(一)

一、storyboard的处理 直接让控制器继承uitableview controller,然后在storyboard中把继承自uiviewcontroller的控制器干掉,重新拖一个tabl...
  • tik11
  • tik11
  • 2015年03月11日 11:44
  • 345

iOS开发UI篇—以微博界面为例使用纯代码自定义cell程序编码全过程(二)

iOS开发UI篇—以微博界面为例使用纯代码自定义cell程序编码全过程(二) 说明: 该部分完成对自定义cell页面的基本搭建,尚未进行优化处理。且还存在很多问题,譬如每行的高度设置暂时是固定的...

iOS开发UI篇—以微博界面为例使用纯代码自定义cell程序编码全过程(三·完结)

原文  http://www.cnblogs.com/wendingding/p/3771558.html 主题 iOS开发 iOS开发UI篇—以微博界面为例使用纯代码自定义cel...
  • iOSser
  • iOSser
  • 2015年12月09日 21:26
  • 419

iOS开发UI篇—以微博界面为例使用纯代码自定义cell程序编码全过程

说明: 该部分完成对自定义cell页面的基本搭建,尚未进行优化处理。且还存在很多问题,譬如每行的高度设置暂时是固定的,这些问题将会在下一篇文中解决。 一、实现效果             ...
  • kdsde
  • kdsde
  • 2014年12月04日 16:15
  • 592

自定义cell里面添加button点击跳转别的界面

要是我下面的代码能够帮到到家希望你们关注一下我的bog哦。。 以前实现过这个功能。后来项目需求去掉,,后来又要做到这一步,,好久没有搞了,刚刚一会就是不可以实现,后来就用block来解决了这个问...

IOS学习之——自定义的Cell (代码)

//***************************************************************************** 04 自定义的 cell ...
  • TenMios
  • TenMios
  • 2016年03月30日 18:48
  • 133

献给初学iOS的小盆友们——微博app项目开发之十二自定义cell代码补全

上节课我们主要讲解了我们是怎么一步一步把自定义cell打通的,主要方法就是引入了MVVM视图模型,这样我们就可以利用视图模型就提前把各个子控件的frame都计算好了。今天我们就是讲如何计算子控件fra...

iOS 代码自定义cell示例

底色标黄为代码自定义cell重点处,入手从这几点即可。 MyCell.h #import @interface MyCell : UITableViewCell @property...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:iOS使用代码直接自定义cell 并添加button响应
举报原因:
原因补充:

(最多只允许输入30个字)