您的位置:首页 > 产品设计 > UI/UE

iOS开发——UI进阶篇(二)自定义等高cell,xib自定义等高的cell,Autolayout布局子控件,团购案例

2015-07-20 23:48 465 查看

一、纯代码自定义等高cell

首先创建一个继承UITableViewCell的类
@interface XMGTgCell : UITableViewCell
在该类中依次做一下操作
1.添加子控件

团购案例

#import <UIKit/UIKit.h>

@interface ViewController : UITableViewController

@end

#import "ViewController.h"
#import "TgCellTableViewCell.h"
#import "MJExtension.h"
#import "TgCell.h"

#define ID  @"chgCell"

@interface ViewController ()
@property (nonatomic, strong) NSArray *tgCells;
@end

@implementation ViewController
- (NSArray *)tgCells
{
if (nil == _tgCells) {
_tgCells = [TgCell objectArrayWithFilename:@"tgs.plist"];
}
return _tgCells;
}

- (void)viewDidLoad {
[super viewDidLoad];
self.tableView.rowHeight = 70;

//    self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

[self.tableView registerClass:[TgCellTableViewCell class] forCellReuseIdentifier:ID];

}

- (NSInteger)tableView:(nonnull UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return self.tgCells.count;
}

- (UITableViewCell *)tableView:(nonnull UITableView *)tableView cellForRowAtIndexPath:(nonnull NSIndexPath *)indexPath
{
TgCellTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
cell.tgcell = self.tgCells[indexPath.row];

return cell;
}
@end

/**************** TgCellTableViewCell*******************/
#import <UIKit/UIKit.h>
#import "TgCell.h"
@interface TgCellTableViewCell : UITableViewCell
@property (nonatomic, strong) TgCell *tgcell;
@end

#import "TgCellTableViewCell.h"

@interface TgCellTableViewCell()
// 图标
@property (nonatomic, weak) UIImageView *icon_imageView;
// 标题
@property (nonatomic, weak) UILabel *titel_lable;
// 价格
@property (nonatomic, weak) UILabel *price_lable;
// 购买人数
@property (nonatomic, weak) UILabel *buy_lable;

@end

@implementation TgCellTableViewCell

// 添加一个灰色的边框
- (void)awakeFromNib
{
self.layer.borderWidth = 1;
self.layer.borderColor = [UIColor colorWithRed:0.5 green:0.5 blue:0.5 alpha:0.3].CGColor;
}

// 添加所有子控件
- (nonnull instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(nullable NSString *)reuseIdentifier
{
if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
// 1.创建图标
UIImageView *icon_imageView = [[UIImageView alloc] init];
[self.contentView addSubview:icon_imageView];
self.icon_imageView = icon_imageView;

// 2.创建标题
UILabel *titel_lable = [[UILabel alloc] init];
[self.contentView addSubview:titel_lable];
self.titel_lable = titel_lable;

// 3.创建价格
UILabel *price_lable = [[UILabel alloc] init];
[self.contentView addSubview:price_lable];
price_lable.textColor = [UIColor orangeColor];
price_lable.font = [UIFont systemFontOfSize:15];
self.price_lable = price_lable;

// 4.创建购买人数
UILabel *buy_lable = [[UILabel alloc] init];
[self.contentView addSubview:buy_lable];
buy_lable.textAlignment = NSTextAlignmentRight;
buy_lable.textColor = [UIColor grayColor];
buy_lable.font = [UIFont systemFontOfSize:13];
self.buy_lable = buy_lable;

}
return self;
}

// 布局控件
- (void)layoutSubviews
{
[super layoutSubviews];

CGFloat margin = 10;
CGFloat contentW = self.contentView.frame.size.width;
CGFloat contentH = self.contentView.frame.size.height;
// 设置frame
// 1、设置图标的frame
CGFloat icon_imageViewX = margin;
CGFloat icon_imageViewY = margin;
CGFloat icon_imageViewW = 80;
CGFloat icon_imageViewH = contentH - 2 * margin;
self.icon_imageView.frame = CGRectMake(icon_imageViewX, icon_imageViewY, icon_imageViewW, icon_imageViewH);

// 2、设置标题的frame
CGFloat titel_lableX = CGRectGetMaxX(self.icon_imageView.frame) + margin;
CGFloat titel_lableY = margin;
CGFloat titel_lableW = contentW - titel_lableX - margin;
CGFloat titel_lableH = 20;
self.titel_lable.frame = CGRectMake(titel_lableX, titel_lableY, titel_lableW, titel_lableH);

// 3、设置价格的frame
CGFloat price_lableX = titel_lableX;
CGFloat price_lableH = 15;
CGFloat price_lableW = 100;
CGFloat price_lableY = CGRectGetMaxY(self.icon_imageView.frame) - price_lableH;
self.price_lable.frame = CGRectMake(price_lableX, price_lableY, price_lableW, price_lableH);

// 4、设置购买人数的frame
CGFloat buy_lableX = CGRectGetMaxX(self.price_lable.frame) + margin;
CGFloat buy_lableH = 13;
CGFloat buy_lableY = CGRectGetMaxY(self.icon_imageView.frame) - buy_lableH;
CGFloat buy_lableW = contentW - buy_lableX - margin;
self.buy_lable.frame = CGRectMake(buy_lableX, buy_lableY, buy_lableW, buy_lableH);

}

- (void)setTgcell:(TgCell *)tgcell
{
_tgcell = tgcell;

self.icon_imageView.image = [UIImage imageNamed:tgcell.icon];
self.titel_lable.text = tgcell.title;
self.price_lable.text = [NSString stringWithFormat:@"¥%@",tgcell.price];
self.buy_lable.text = [NSString stringWithFormat:@"%@人购买",tgcell.buyCount];
}

@end

/**************** TgCell*******************/
#import <Foundation/Foundation.h>

@interface TgCell : NSObject
/** 标题 */
@property (nonatomic, copy) NSString *title;
/** 购买数 */
@property (nonatomic, copy) NSString *buyCount;
/** 图片 */
@property (nonatomic, copy) NSString *icon;
/** 价格 */
@property (nonatomic, copy) NSString *price;
@end

#import "TgCell.h"

@implementation TgCell

@end
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: