你好,游客 登录 注册 搜索
背景:
阅读新闻

iOS 购物—个人中心界面

[日期:2014-08-25] 来源:Linux社区  作者:雪-松 [字体: ]

上一个QQ界面真实无心插柳,想不到一个新手的普通界面能够上首页推荐,在这谢谢那些csdn工作者对新手的支持,谢谢soledadzz  的特别推荐;

下面这个界面也是师傅锻炼我的题目主要是让我熟悉table的使用;我想尽量的去用mvc,尽量的去实现界面与数据的分离,但是一个水平没有达到,不知道这样的界面算不算一个真正的分离,还差多少,如果您看出了问题,请留一下言,帮忙扶一把,谢谢!

文件原代码到底部的链接下载,谢谢,需要一分来赚点外块,如果没有积分可以留言,或者留下QQ我发给大家。

由于本人ps技术的原因,没能够将底部的四张小图片弄出来,致使底部的tabBar 没有图片,大家可以自己加上。

先来说下文件:

iOS 购物—个人中心界面

因为最近看可代码规范的一些东西,刚开始用,我想名字什么的尽量的去做到,看到名字就知道是干嘛的。

在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;
}

这里我想说的是我们应该多去用 ?: 少去写if,应该先考虑?: 这样我们的代码更加整洁;

 

说完这些小部分,那让我们来看看整个部分吧personalcentreview

@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

 

- (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://linux.linuxidc.com/

用户名与密码都是www.linuxidc.com

具体下载目录在 /2014年资料/8月/25日/iOS 购物—个人中心界面

下载方法见 http://www.linuxidc.com/Linux/2013-07/87684.htm

------------------------------------------分割线------------------------------------------
 
再次说一下,这些东西是给我们新手看的,或许能够帮到你们,因为我在学习的时候也想有个完整的例子来练一练手。
 
大神们,建议意见,我们希望你们能留下。“一个简单的界面,也好意思说。。。”这样的话我们不希望看到,我就不相信,一年两年之后你还会比我们强。

本文永久更新链接地址http://www.linuxidc.com/Linux/2014-08/105804.htm

linux
相关资讯       iOS 购物—个人中心界面 
本文评论   查看全部评论 (0)
表情: 表情 姓名: 字数

       

评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款