上一个QQ界面真实无心插柳,想不到一个新手的普通界面能够上首页推荐,在这谢谢那些csdn工作者对新手的支持,谢谢soledadzz 的特别推荐;
下面这个界面也是师傅锻炼我的题目主要是让我熟悉table的使用;我想尽量的去用mvc,尽量的去实现界面与数据的分离,但是一个水平没有达到,不知道这样的界面算不算一个真正的分离,还差多少,如果您看出了问题,请留一下言,帮忙扶一把,谢谢!
文件原代码到底部的链接下载,谢谢,需要一分来赚点外块,如果没有积分可以留言,或者留下QQ我发给大家。
由于本人ps技术的原因,没能够将底部的四张小图片弄出来,致使底部的tabBar 没有图片,大家可以自己加上。
先来说下文件:
因为最近看可代码规范的一些东西,刚开始用,我想名字什么的尽量的去做到,看到名字就知道是干嘛的。
在personalcentreTable文件中放得是 界面中间的table和cell 下面personalcentreHeadview 是界面头部也就是 头像,蓝色背景那部分
personalcentreview 就是整个的界面部分了;
其他地方没有必要介绍了;
先在Appdelegate中实现了tabBar
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // Override point for customization after application launch. _window = [[UIWindow alloc]initWithFrame:[[UIScreen mainScreen]bounds]]; UIViewController *vc1 = [[UIViewController alloc]init]; vc1.view.backgroundColor = [UIColor redColor]; vc1.title = @"首页"; UIViewController *vc2 = [[UIViewController alloc]init]; vc2.view.backgroundColor = [UIColor grayColor]; vc2.title = @"商家"; UIViewController *vc3 = [[UIViewController alloc]init]; vc3.view.backgroundColor = [UIColor greenColor]; vc3.title = @"购物车"; ViewController *vc4 = [[ViewController alloc]init]; vc4.title = @"个人中心"; NSArray *arrayVC = @[vc1,vc2,vc3,vc4]; self.tabBarC = [[UITabBarController alloc]init]; self.tabBarC.viewControllers = arrayVC; _window.rootViewController = self.tabBarC; [_window makeKeyAndVisible]; return YES; }构造数据:
NSDictionary *dictionary = @{@"personal_protrait":@"icon.png", @"personal_name":@"雪松", @"personal_integral":@"200", @"personal_welfare":@"59", @"personal_table":@{@"待付款订单":@"10", @"待发货订单":@"5", @"已发货订单":@"4"} };
先来看下cell吧
@property (nonatomic,strong) UILabel *nameLabel; @property (nonatomic,strong) UILabel *numberLabel; @property (nonatomic,strong) UIImageView *rightImageView;
一个名字 ,一个数字,一个图标 可以对照图一看就明白;
- (id)initWithName:(NSString *)name number:(NSString *)number rightImage:(UIImage *)image { self = [super init]; if (self) { //设置文字 _nameLabel = [[UILabel alloc]initWithFrame:CGRectMake(20, 10, 100, 20)]; _nameLabel.text =name; [self addSubview:_nameLabel]; //设置标识数字 _numberLabel = [[UILabel alloc]initWithFrame:CGRectMake(250, 10, 30, 20)]; _numberLabel.text = number; _numberLabel.textAlignment = 1; _numberLabel.textColor = [UIColor redColor]; [self addSubview:_numberLabel]; //设置右边图片 _rightImageView = [[UIImageView alloc]initWithFrame:CGRectMake(290, 10, 15, 20)]; _rightImageView.image = image; [self addSubview:_rightImageView]; } return self; }
接下来是table了
@interface PersonalCentreTable : UITableView<UITableViewDataSource,UITableViewDelegate> @property (nonatomic,copy) NSDictionary *dataDictionary; //传递的数据 - (id)initWithDictionary:(NSDictionary *)dictionary; @end
在实现table时我想 有4个section 而且行数也不一样,每行的内容也不一样,这样在
- (UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
怎么写啊,要一个一个if的去判断是哪个section 然后判断是哪一行吗?这样费劲了,于是我想到了数组。一个老手应该自然会想到,但是作为新手能用还是蛮高兴的;
tableArray = @[@[@"待付款订单", @"待发货订单", @"已发货订单"], @[@"已完成订单"], @[@"售后服务"], @[@"设置"]];
这个数组然后与下面的代码结合起来就简洁多了
- (UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { PersonalCentreTableCell *cell ; if (indexPath.section == 0) { NSString *name = [(NSArray *)[tableArray objectAtIndex:indexPath.section] objectAtIndex:indexPath.row]; cell = [[PersonalCentreTableCell alloc] initWithName:name number:[_dataDictionary objectForKey:name] rightImage:[UIImage imageNamed:@"rightImage.png"]]; } else { cell = [[PersonalCentreTableCell alloc] initWithName:[(NSArray *)[tableArray objectAtIndex:indexPath.section] objectAtIndex:indexPath.row] number:@"" rightImage:[UIImage imageNamed:@"rightImage.png"]]; } return cell; }
- (NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return section == 0? 3:1; //return ((NSArray *)[_dataArray objectAtIndex:section]).count; }
这里我想说的是我们应该多去用 ?: 少去写if,应该先考虑?: 这样我们的代码更加整洁;
说完这些小部分,那让我们来看看整个部分吧personalcentreview;
<span style="font-size:12px;">@interface PersonalCentreView : UIView @property (nonatomic,strong) UILabel *titleLabel;//标题 @property (nonatomic,strong) PersonalCentreHeadView *personalCentreHeadView;//头部 个人头像部分 @property (nonatomic,strong) PersonalCentreTable *personalCentreTable;//表格部分 @property (nonatomic,copy) NSDictionary *dataDictionary;//数据 - (id)initWithDictionary:(NSDictionary *)dictionary; @end</span>
- (id)initWithDictionary:(NSDictionary *)dictionary { self = [super init]; if (self) { _dataDictionary = dictionary; //self.frame = CGRectMake(0, 0, 320, 480); self.backgroundColor = [UIColor colorWithRed:238/255.0 green:238/255.0 blue:238/255.0 alpha:1]; // 设置标题 _titleLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 30, 280, 20)]; _titleLabel.text = @"个人中心"; _titleLabel.textAlignment = 1;//居中 // _titleLabel.textColor = [UIColor whiteColor]; [self addSubview:_titleLabel]; //设置头像部分 _personalCentreHeadView = [[PersonalCentreHeadView alloc]initWithPortrait:[dictionary objectForKey:@"personal_image"] Name:[dictionary objectForKey:@"personal_name"] Integral:[dictionary objectForKey: @"personal_integral"] Welfare:[dictionary objectForKey:@"personal_welfare"]]; [self addSubview:_personalCentreHeadView]; //设置表格 _personalCentreTable = [[PersonalCentreTable alloc]initWithDictionary:[dictionary objectForKey:@"personal_table"]]; [self addSubview:_personalCentreTable]; } return self; }
源码下载地址:http://download.csdn.net/detail/u010123208/7805865
再次说一下,这些东西是给我们新手看的,或许能够帮到你们,因为我在学习的时候也想有个完整的例子来练一练手。
大神们,建议意见,我们希望你们能留下。“一个简单的界面,也好意思说。。。”这样的话我们不希望看到,我就不相信,一年两年之后你还会比我们强。