Snail—UI学习之UITableView之自定义UITableViewCell

之前都是用得系统的UItableViewCell 局限性比较大 不够自由

自定义的cell满足了我们所有的需求 以后做项目的时候也是大部分都是用自定义的

后面我们要把数据放在数据模型里 数据源数组里将要存储的是model

BookModel.h

#import <Foundation/Foundation.h>

@interface WJJBookModel : NSObject

@property (nonatomic,copy) NSString * title;

@property (nonatomic,copy) NSString * price;

@property (nonatomic,copy) NSString * icon;

@property (nonatomic,copy) NSString * detail;

@end

BoookModel.m

#import "WJJBookModel.h"

@implementation WJJBookModel

@end

自定义cell  就得写一个Cell的类 继承于UITableViewCell

MyFirstCell.h

#import <UIKit/UIKit.h>
#import "WJJBookModel.h"

@interface WJJMyFirstCell : UITableViewCell

//在cell上面将要显示的imageView
@property (nonatomic,strong) UIImageView * headerView;

@property (nonatomic,strong) UILabel * titleLabel;

@property (nonatomic,strong) UILabel * detailLabel;

@property (nonatomic,strong) UILabel * priceLabel;

//得到一个Model 并且在这个方法里给cell赋值
- (void)configCellWithBook:(WJJBookModel *)book;

@end

MyFirstCell.m

#import "WJJMyFirstCell.h"

@implementation WJJMyFirstCell

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        //给属性实例化
        [self configUI];
    }
    return self;
}

- (void)configUI{
    self.headerView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 10, 70, 70)];
    //把headerView 加到视图上
    [self.contentView addSubview:self.headerView];
    self.titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(90, 10, 200, 20)];
    self.titleLabel.textColor = [UIColor purpleColor];
    self.titleLabel.font = [UIFont boldSystemFontOfSize:15];
    self.titleLabel.textAlignment = NSTextAlignmentLeft;
    [self.contentView addSubview:self.titleLabel];

    self.detailLabel = [[UILabel alloc] initWithFrame:CGRectMake(90, 30, 200, 20)];
    self.detailLabel.textColor = [UIColor redColor];
    self.detailLabel.font = [UIFont systemFontOfSize:15];
    self.detailLabel.textAlignment = NSTextAlignmentLeft;
    [self.contentView addSubview:self.detailLabel];

    self.priceLabel = [[UILabel alloc] initWithFrame:CGRectMake(90, 50, 200, 20)];
    self.priceLabel.textColor = [UIColor blueColor];
    self.priceLabel.font = [UIFont systemFontOfSize:15];
    self.priceLabel.textAlignment = NSTextAlignmentLeft;
    [self.contentView addSubview:self.priceLabel];

}

//给cell的属性赋值
- (void)configCellWithBook:(WJJBookModel *)book{

    [self.headerView setImage:[UIImage imageNamed:[NSString stringWithFormat:@"%@",book.icon]]];
    self.titleLabel.text = book.title;
    self.detailLabel.text = book.detail;
    self.priceLabel.text = book.price;

}

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

    // Configure the view for the selected state
}

@end

然后在RootViewController.m中写如下代码

#import "WJJRootViewController.h"
#import "WJJMyFirstCell.h"
#import "WJJBookModel.h"

@interface WJJRootViewController (){
    UITableView * _tableView;
    NSMutableArray * _dataArray;
}

@end

@implementation WJJRootViewController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view.
    self.title = @"书签";
    [self createDataSource];
}

- (void)createDataSource{
    _dataArray = [[NSMutableArray alloc] init];

    NSString * path = [[NSBundle mainBundle]pathForResource:@"bookData" ofType:@"plist"];
    NSArray * rootArray = [[NSArray alloc] initWithContentsOfFile:path];

    for (NSDictionary * dict in rootArray) {
        //[_dataArray addObject:dict];
        WJJBookModel * book = [[WJJBookModel alloc] init];
        //[book setValuesForKeysWithDictionary:dict];
        book.icon = [dict objectForKey:@"icon"];
        book.price = [dict objectForKey:@"price"];
        book.title = [dict objectForKey:@"title"];
        book.detail = [dict objectForKey:@"detail"];
        [_dataArray addObject:book];
    }
    NSLog(@"%@",_dataArray);
    [self createTableView];
}

- (void)createTableView{

    _tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
    _tableView.delegate = self;
    _tableView.dataSource = self;

    [self.view addSubview:_tableView];

}

//返回行数
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return _dataArray.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    WJJMyFirstCell * cell = [tableView dequeueReusableCellWithIdentifier:@"ID"];
    if (!cell) {
        cell = [[WJJMyFirstCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"ID"];
    }

    WJJBookModel * book = _dataArray[indexPath.row];
    [cell configCellWithBook:book];
    return cell;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
}

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

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-12-28 01:46:24

Snail—UI学习之UITableView之自定义UITableViewCell的相关文章

Snail—UI学习之UITableView之分组显示

之前的demo都是一个分组显示数据的 这次我们用的是带有分组的tableView #import "WJJRootViewController.h" @interface WJJRootViewController (){ UITableView * _tableView; NSMutableArray * _dataArray; } @end @implementation WJJRootViewController - (id)initWithNibName:(NSString *

ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局

本文转自 :http://www.cnblogs.com/wendingding/p/3761730.html ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局 一.实现效果 二.使用纯代码自定义一个tableview的步骤 1.新建一个继承自UITableViewCell的类 2.重写initWithStyle:reuseIdentifier:方法 添加所有需要显示的子控件(不需要设置子控件的数据和frame,  子控件要添加到contentView中

iOS开发UI基础—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局

ios开发UI基础-使用纯代码自定义UItableviewcell实现一个简单的微博界面布局 一.实现效果 二.使用纯代码自定义一个tableview的步骤 1.新建一个继承自UITableViewCell的类 2.重写initWithStyle:reuseIdentifier:方法 添加所有需要显示的子控件(不需要设置子控件的数据和frame,  子控件要添加到contentView中) 进行子控件一次性的属性设置(有些属性只需要设置一次, 比如字体\固定的图片) 3.提供2个模型 数据模型:

Snail—UI学习之自定义标签栏UITabBarController

这里的背景跟上面的差不多 不过这里要用到AppDelegate的单例进行传值 首先到AppDelegate.h文件中 <span style="color:#FF0000;">#import <UIKit/UIKit.h> @interface WJJRootViewController : UITabBarController //声明一UIButton属性 来记录当前按下的按钮 @property (nonatomic,strong) UIButton *

Snail—UI学习之自定义键盘及键盘收起(待完善)

在viewController.h中加入代理 #import <UIKit/UIKit.h> @interface WJJRootViewController : UIViewController <span style="color:#FF0000;"><UITextFieldDelegate></span> @end viewController.m中代码展示 #import "WJJRootViewController.h

Snail—UI学习之自定义导航栏NSNavigationController

首先新建一个RootViewController 再建一个FirstViewController 在RootViewController.m中写入 #import "WJJRootViewController.h" #import "WJJFirstViewController.h" @interface WJJRootViewController () @end @implementation WJJRootViewController - (id)initWit

Snail—UI学习之自定义通知NSNotification

背景是:一个界面跳转到第二个界面 然后 第一个界面发了一个通知  然后第二个界面收到这个通知后 把里面的数据取出来 在RootViewController.m中写入下面代码 #import "WJJRootViewController.h" #import "WJJFirstViewController.h" @interface WJJRootViewController (){ UITextField * _textField; } @end @implemen

Snail—UI学习之表视图TableView(一)

我们是整一个表视图 然后再表视图的上方是一个广告栏 首先,在.h文件中写上下面的代码 主要就是遵守一些代理 #import <UIKit/UIKit.h> @interface WJJRootViewController : UIViewController<UITableViewDataSource,UITableViewDelegate,UIScrollViewDelegate> @end 然后再.m文件中写上如下 #import "WJJRootViewContro

Snail—UI学习之表视图TableView(二)

接着上面的项目 ,当下面标记红色的代码写上后,我们按下右上角的edit按钮 就可以对cell进行插入.删除.移动等操作 #import "WJJRootViewController.h" @interface WJJRootViewController (){ //数据源 存放数据 NSMutableArray * _dataArray; //这就是我们的tableView UITableView * _tableView; //页面控制器 UIPageControl * _pageC