歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

iOS 購物—個人中心界面

上一個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;
}

這裡我想說的是我們應該多去用 ?: 少去寫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

------------------------------------------分割線------------------------------------------
 
再次說一下,這些東西是給我們新手看的,或許能夠幫到你們,因為我在學習的時候也想有個完整的例子來練一練手。
 
大神們,建議意見,我們希望你們能留下。“一個簡單的界面,也好意思說。。。”這樣的話我們不希望看到,我就不相信,一年兩年之後你還會比我們強。

Copyright © Linux教程網 All Rights Reserved