UIUITableView仿淘宝的两列式cell显示

一开始看到很多购物类的APP物品展示都是以两列形式显示出来，好多人可能会用CollectionView来实现。但这里我们用UITableView来简单实现其原理。至于物品个数可能为单数的情况这里暂时不去判断，只是简单的实现一下其大概功能，其余判断有待完善。

自己新建一个UItableViewcell的类，这里不想用XIB来实现，想敲一敲代码。

实现的思路：自定义一个cell，每个cell上添加2个UIVIew，在UIView上加上一个UIimageVIew和UILable，再在UIVIew的顶上加一个透明的UIButton提供点击事件，通过Block回调实现点击对应视图的响应事件，打印出相应的行数和列数。这样一个简单的2列形式的Cell就做出来了。

命名为：

DoubleQuequeTableViewCell
工程结构表如图：



DoubleQuequeTableViewCell的.h文件

<span style="font-size:14px;color:#339999;">#import <UIKit/UIKit.h>

typedef void(^LeftButtonBlock)(void);
typedef void(^RightButtonBlock)(void);

@interface DoubleQuequeTableViewCell : UITableViewCell

@property (nonatomic, strong) UIImageView      * leftImageView;
@property (nonatomic, strong) UIImageView      * rightImageView;
@property (nonatomic, strong) UILabel          * leftLable;
@property (nonatomic, strong) UILabel          * rightLable;

@property (nonatomic, copy  ) LeftButtonBlock  leftButtonBlock;
@property (nonatomic, copy  ) RightButtonBlock rightButtonBlock;

//自定义cell初始化
- (id)initDiyWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString*)reuseIdentifier;

@end</span>

DoubleQuequeTableViewCell的.m文件

<span style="font-size:14px;color:#339999;">#import "DoubleQuequeTableViewCell.h"

@implementation DoubleQuequeTableViewCell

@synthesize leftImageView;
@synthesize rightImageView;
@synthesize leftLable;
@synthesize rightLable;

- (void)awakeFromNib {
[super awakeFromNib];
// Initialization code
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
[super setSelected:selected animated:animated];

// Configure the view for the selected state
}

- (id)initDiyWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString*)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {

//左侧列的视图
//左侧列底层View
CGRect leftViewRect = CGRectMake(0, 0, self.frame.size.width/2 - 10, self.frame.size.width/2 - 10);
UIView * leftView = [[UIView alloc] initWithFrame:leftViewRect];
[self.contentView addSubview:leftView];
//左侧列的图片视图
CGRect leftImageViewRect = CGRectMake(0, 0, leftViewRect.size.width, leftViewRect.size.height-30);
leftImageView = [[UIImageView alloc] initWithFrame:leftImageViewRect];
[leftView addSubview:leftImageView];
//左侧列的文字视图
CGRect leftLableRect = CGRectMake(5, leftImageViewRect.size.height + 5, leftImageViewRect.size.width - 10, 20);
leftLable = [[UILabel alloc] initWithFrame:leftLableRect];
[leftView addSubview:leftLable];
//左侧列的按钮
CGRect leftButtonRect = CGRectMake(0, 0, leftViewRect.size.width, leftViewRect.size.height);
UIButton * leftButton = [[UIButton alloc] initWithFrame:leftButtonRect];
leftButton.backgroundColor = [UIColor clearColor];
[leftButton addTarget:self action:@selector(leftButton) forControlEvents:UIControlEventTouchUpInside];
[leftView addSubview:leftButton];

//右侧列的视图
//右侧列底层View
CGRect rightViewRect = CGRectMake(leftViewRect.size.width + 20, 0, leftViewRect.size.width, leftViewRect.size.height);
UIView * rightView = [[UIView alloc] initWithFrame:rightViewRect];
[self.contentView addSubview:rightView];
//右侧列的图片视图
CGRect rightImageViewRect = CGRectMake(0, 0, rightViewRect.size.width, rightViewRect.size.height -30);
rightImageView = [[UIImageView alloc] initWithFrame:rightImageViewRect];
[rightView addSubview:rightImageView];
//右侧列的文字视图
CGRect rightLableRect = CGRectMake(5, rightImageViewRect.size.height + 5, rightImageViewRect.size.width - 10, 20);
rightLable = [[UILabel alloc] initWithFrame:rightLableRect];
[rightView addSubview:rightLable];
//右侧列的按钮
CGRect rightButtonRect = CGRectMake(0, 0, rightViewRect.size.width, rightViewRect.size.height);
UIButton * rightButton = [[UIButton alloc] initWithFrame:rightButtonRect];
rightButton.backgroundColor = [UIColor clearColor];
[rightButton addTarget:self action:@selector(rightButton) forControlEvents:UIControlEventTouchUpInside];
[rightView addSubview:rightButton];
}
return self;
}

//按钮点击事件
- (void)leftButton
{
if (self.leftButtonBlock) {
self.leftButtonBlock();
}
}

- (void)rightButton
{
if (self.rightButtonBlock) {
self.rightButtonBlock();
}
}

@end</span>

viewController的.m文件

<span style="font-size:14px;color:#339999;">#import "ViewController.h"
#import "DoubleQuequeTableViewCell.h"

@interface ViewController ()<UITableViewDelegate, UITableViewDataSource>

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

UITableView * doubleQuequeTableView = [[UITableView alloc] initWithFrame:self.view.frame];
doubleQuequeTableView.backgroundColor = [UIColor yellowColor];
doubleQuequeTableView.separatorStyle = NO;
doubleQuequeTableView.delegate       = self;
doubleQuequeTableView.dataSource     = self;
[self.view addSubview:doubleQuequeTableView];

}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString * cellId = @"chongyong";
DoubleQuequeTableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:cellId];

if (!cell) {
cell = [[DoubleQuequeTableViewCell alloc] initDiyWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellId];
}
cell.backgroundColor      = [UIColor grayColor];
cell.leftLable.text       = [NSString stringWithFormat:@"第%ld行第1列",indexPath.row];
cell.rightLable.text      = [NSString stringWithFormat:@"第%ld行第2列",indexPath.row];
cell.leftImageView.image  = [UIImage imageNamed:@"lianhua.png"];
cell.rightImageView.image = [UIImage imageNamed:@"tiankong.png"];
//左侧列的按钮Block回调
cell.leftButtonBlock = ^(void){
NSLog(@"*^_点击了第 %ld 行第 1 列_^*",indexPath.row);
};
//右侧列的按钮Block回调
cell.rightButtonBlock = ^(void){
NSLog(@"*^_点击了第 %ld 行第 2 列_^*",indexPath.row);
};

return cell;
}

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

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 1;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
return 150;
}

@end
</span>

运行后的效果展示：



点击cell上的每个选图打印相应行和列的结果：