iOS开发：自定义列表

tableview几乎是ios里面最常用的布局了，这里用纯代码的方式实现了自定义列表cell的界面

预览

思路

• 自定义cell类，在里面添加图片文字等内容
• 在主view的tableview委托函数里面进行重用和数据关联

自定义cell

//
//  AppDelegate.h
//  CardList
//
//  Created by yxhe on 16/5/17.
//  Copyright © 2016年 yxhe. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface AppDelegate : UIResponder <UIApplicationDelegate>

@property (strong, nonatomic) UIWindow *window;


@end

//
//  CustomCellView.m
//  CardList
//
//  Created by yxhe on 16/5/17.
//  Copyright © 2016年 yxhe. All rights reserved.
//

#import "CustomCellView.h"

#define LOGO_WIDTH 152
#define LOGO_HEIGHT 58

@interface CustomCellView ()

@end

@implementation CustomCellView



#pragma mark - cellview delegate
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    //custom the cell style
    if (self)
    {
        //add textlabel
        self.cardNumberLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, self.contentView.frame.size.width, self.contentView.frame.size.height/2)];
        
        [self.contentView addSubview:self.cardNumberLabel];
        
        //add image logo
        self.quickPassLogo = [[UIImageView alloc] initWithFrame:CGRectMake(self.contentView.frame.size.width - LOGO_WIDTH, 0, LOGO_WIDTH, LOGO_HEIGHT)];
        
        [self.contentView addSubview:self.quickPassLogo];
        
    }
    
//    [self setNeedsDisplay]; //refresh the cell?
    
//    NSLog(@"custome cell init");
    return self;
}

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

#pragma mark - called by other objects
//custom the cell string logo and row color
- (void)setTextLabel:(NSString *)cardNumberStr withImage:(UIImage *)img atRow:(NSInteger)row
{
    self.cardNumberLabel.text = cardNumberStr; //set string
    self.quickPassLogo.image = img; //set image
    self.contentView.backgroundColor = row%2 ? [UIColor greenColor]:[UIColor yellowColor]; //set background color for each line
}

@end

主view里面绑定关联

#pragma mark - view delegate
- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    //init the tableview
    UITableView *cardTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 30, self.view.bounds.size.width, self.view.bounds.size.height)];
//    cardTableView.backgroundColor = [UIColor greenColor];
    cardTableView.dataSource = self;
    cardTableView.delegate = self;
    [self.view addSubview:cardTableView];
    
    
    //parse the json file
    NSString* path = [[NSBundle mainBundle] pathForResource:@"CardProperty" ofType:@"json"];
    NSData *jsonData = [[NSData alloc] initWithContentsOfFile:path];
    
    NSError *error;
    
    id jsonObj = [NSJSONSerialization JSONObjectWithData:jsonData
                                                 options:NSJSONReadingMutableContainers error:&error];
    
    if (!jsonObj || error)
        NSLog(@"JSON parse failed!");
    
    self.listData = [jsonObj objectForKey:@"Record"];
    
    
    //tableview must reload data
    [cardTableView reloadData];
    
}

数据是从json文件里读取的

#pragma mark - tableview delegate
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.listData.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    //reuse the customized cell
    static NSString *CellIdentifier = @"UITableViewCell";
    CustomCellView *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil)
        cell = [[CustomCellView alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];

    //set image and text after the cell init
    UIImage *img = [UIImage imageNamed:[self.listData[indexPath.row] objectForKey:@"imgLogo"]]; //fetch the dictionary
    [cell setTextLabel:[self.listData[indexPath.row] objectForKey:@"cardNumber"] withImage:img atRow:indexPath.row];
    
    return cell;
    
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    //set the tableview cell height
    return 100;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSLog(@"you clicked %dth row", indexPath.row);
    UIAlertView *alerView = [[UIAlertView alloc] initWithTitle:@"message"
                                                       message:[NSString stringWithFormat:@"cell %d clicked", indexPath.row]
                                                      delegate:self
                                             cancelButtonTitle:@"ok"
                                             otherButtonTitles:nil];
    [alerView show];


}

源代码下载

csdn： 列表自定义
github： CardList