最后设计成果:如上
1.删除Main.storyboard中的ViewController,从右边拖一个TableViewController到storyboard
2.删掉文件中的ViewController.h和ViewController.m,新建class:PlistTableViewController,subclass of UITableViewController,文件列表新增 PlistTableViewController.h,PlistTableViewController.m
3.storyboard中的custom class选择新建的PlistTableViewController
4.从右边拖一个Table View Cell 到Table View,修改属性值的Identifier:userInfoCell
5.选择TableViewController,点击Editor-->Embed In-->Navigation Controller,新增一个导航控制器到storyboard,编辑Title:用户列表
6.设计自定义cell:在storyboard的Table View Cell上从右边拖入你需要的Label,Image View等,拖拽大小布局
7.新建class:MyUserInfoCell,subclass of UITableViewCell,文件列表新增MyUserInfoCell.h,MyUserInfoCell.m
8.在storyboard自定义cell中的custom class选择新建的MyUserInfoCell
9.将MyUserInfoCell中定义的控件属性和storyboard中的空间关联好
10.新建plist文件,信息写入属性列表
11.将需要的图片文件夹复制过来
1.PlistTableViewController.m的关键代码:
#import "PlistTableViewController.h"
#import "MyUserInfoCell.h"
@interface PlistTableViewController ()
{
@private NSMutableArray *_userList;
}
@end
@implementation PlistTableViewController
- (void)viewDidLoad {
[superviewDidLoad];
// 设定pList文件路径
NSString *dataPath = [[NSBundlemainBundle]pathForResource:@"FocusUsers.plist"ofType:nil];
// 填充数组内容
_userList = [NSMutableArrayarrayWithContentsOfFile:dataPath];
// Uncomment the following line to preserve selection between presentations.
// self.clearsSelectionOnViewWillAppear = NO;
// Uncomment the following line to display an Edit button in the navigation bar for this view controller.
// self.navigationItem.rightBarButtonItem = self.editButtonItem;
}
- (void)didReceiveMemoryWarning {
[superdidReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
#pragma mark - Table view data source
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return [_userListcount];
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier =@"userInfoCell";
MyUserInfoCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
// Configure the cell...
// 实例化单元格对象
if (cell == nil) {
cell = [[MyUserInfoCellalloc]initWithStyle:UITableViewCellStyleDefaultreuseIdentifier:CellIdentifier];
}
NSDictionary *item = [_userListobjectAtIndex:indexPath.row];
//显示文本
[cell.userNameLabel1 setText:[item objectForKey:@"JobId"]];
[cell.userNameLabel2 setText:[item objectForKey:@"UserName"]];
[cell.userNameLabel3 setText:[item objectForKey:@"TelNum"]];
[cell.userNameLabel4 setText:[item objectForKey:@"Email"]];
// 显示头像
[cell.userImagesetImage:[UIImageimageNamed:[item objectForKey:@"Image"]]];
// 设定字体
[cell.userNameLabel2setFont:[UIFontfontWithName:@"Helvetica"size:16.0f]];
// 改变字体颜色
[cell.userNameLabel2setTextColor:[UIColororangeColor]];
// 调整文本居中对齐
// [cell.textLabel setTextAlignment:NSTextAlignmentCenter];
return cell;
}
@end
2.MyUserInfoCell.h的关键代码:
@interface MyUserInfoCell : UITableViewCell
@property (strong,nonatomic) IBOutletUIImageView *userImage;
@property (strong,nonatomic) IBOutletUILabel *userNameLabel1;
@property (strong,nonatomic) IBOutletUILabel *userNameLabel2;
@property (strong,nonatomic) IBOutletUILabel *userNameLabel3;
@property (strong,nonatomic) IBOutletUILabel *userNameLabel4;
@end
3.MyUserInfoCell.m的关键代码:
#import "MyUserInfoCell.h"
@implementation MyUserInfoCell
@synthesize userImage = _userImage;
@synthesize userNameLabel1 = _userNameLabel1;
@synthesize userNameLabel2 = _userNameLabel2;
@synthesize userNameLabel3 = _userNameLabel3;
@synthesize userNameLabel4 = _userNameLabel4;
- (void)awakeFromNib {
}
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
[super setSelected:selectedanimated:animated];
}
@end
<plist version="1.0">
<array>
<dict>
<key>JobId</key>
<string>1</string>
<key>UserName</key>
<string>赵一</string>
<key>TelNum</key>
<string>11111111111</string>
<key>Email</key>
<string>123@qq.com</string>
<key>Image</key>
<string>icon1.jpg</string>
</dict>
<dict>
<key>JobId</key>
<string>2</string>
<key>UserName</key>
<string>钱二</string>
<key>TelNum</key>
<string>22222222222</string>
<key>Email</key>
<string>234@qq.com</string>
<key>Image</key>
<string>icon2.jpg</string>
</dict>
<dict>
<key>JobId</key>
<string>3</string>
<key>UserName</key>
<string>孙三</string>
<key>TelNum</key>
<string>33333333333</string>
<key>Email</key>
<string>345@qq.com</string>
<key>Image</key>
<string>icon3.jpg</string>
</dict>
<dict>
<key>JobId</key>
<string>4</string>
<key>UserName</key>
<string>李四</string>
<key>TelNum</key>
<string>44444444444</string>
<key>Email</key>
<string>456@qq.com</string>
<key>Image</key>
<string>icon4.jpg</string>
</dict>
<dict>
<key>JobId</key>
<string>5</string>
<key>UserName</key>
<string>周五</string>
<key>TelNum</key>
<string>55555555555</string>
<key>Email</key>
<string>567@qq.com</string>
<key>Image</key>
<string>icon5.jpg</string>
</dict>
</array>
</plist>
5.storyboard的界面: