IOS shopping-personal Center interface, ios Shopping Center interface

Source: Internet
Author: User

IOS shopping-personal Center interface, ios Shopping Center interface

The last QQ interface was a real plug-in. I could not think of a beginner's normal interface which could be recommended on the home page. Here, I would like to thank the csdn workers for their support for new users and soledadzz for their special recommendations;

The following interface is also the Exercise of the master. It mainly familiarized me with the use of tables. I want to use mvc as much as possible to achieve the separation of interfaces and data, however, when the level is not reached, I don't know whether such an interface is a real separation. The difference is much. If you see the problem, please leave it for help. Thank you!

Download the original file code to the bottom link. Thank you. I need one minute to earn extra points. If there are no points, I can leave a message or leave QQ to send it to you.

Due to my ps technology, I was not able to get the four small pictures at the bottom, so there was no picture in the tabBar at the bottom. You can add it by yourself.

Let's talk about the file:


Because I recently looked at some code-standard things and used them at the beginning. I tried my best to do what I wanted to do by name. I knew what I did when I saw the name.

In the personalcentreTable file, the table in the middle of the interface and the personalcentreHeadview in the cell are the interface header, that is, the portrait, and the blue background.

Personalcentreview is the entire interface;

There is no need to introduce it elsewhere;

First, tabBar is implemented in Appdelegate.

-(BOOL) application :( UIApplication *) application didfinishlaunchingwitexceptions :( 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 = @ "Homepage"; UIViewController * vc2 = [[UIViewController alloc] init]; vc2.view. backgroundColor = [UIColor grayColor]; vc2.title = @ ""; UIViewController * vc3 = [[UIViewController alloc] init]; vc3.view. backgroundColor = [UIColor greenColor]; vc3.title = @ "Shopping Cart"; ViewController * vc4 = [[ViewController alloc] init]; vc4.title = @ "personal Center "; NSArray * arrayVC = @ [vc1, vc2, vc3, vc4]; self. tabBarC = [[UITabBarController alloc] init]; self. tabBarC. viewControllers = arrayVC; _ window. rootViewController = self. tabBarC; [_ window makeKeyAndVisible]; return YES ;}
Construct Data:

NSDictionary * dictionary =@ {@ "personal_protrait": @ "icon.png", @ "personal_name": @ "cedar", @ "personal_integral": @ "200 ", @ "personal_welfare": @ "59", @ "personal_table": @ {@ "order to be paid": @ "10", @ "Order to be delivered ": @ "5", @ "delivered order": @ "4 "}};


Let's take a look at cell.

@property (nonatomic,strong) UILabel *nameLabel;@property (nonatomic,strong) UILabel *numberLabel;@property (nonatomic,strong) UIImageView *rightImageView;

A name, a number, and an icon can be viewed as follows;

-(Id) initWithName :( NSString *) name number :( NSString *) number rightImage :( UIImage *) image {self = [super init]; if (self) {// set the text _ nameLabel = [[UILabel alloc] initWithFrame: CGRectMake (20, 10,100, 20)]; _ nameLabel. text = name; [self addSubview: _ nameLabel]; // set the ID number _ numberLabel = [[UILabel alloc] initWithFrame: CGRectMake (250, 10, 30, 20)]; _ numberLabel. text = number; _ numberLabel. textAlignment = 1; _ numberLabel. textColor = [UIColor redColor]; [self addSubview: _ numberLabel]; // set the picture on the right _ rightImageView = [[UIImageView alloc] initWithFrame: CGRectMake (290, 10, 15, 20)]; _ rightImageView. image = image; [self addSubview: _ rightImageView];} return self ;}

Next is the table.

@ Interface PersonalCentreTable: UITableView <UITableViewDataSource, Region> @ property (nonatomic, copy) NSDictionary * dataDictionary; // transmitted data-(id) initWithDictionary :( NSDictionary *) dictionary; @ end


When implementing table, I want to have four sections with different rows and different contents in each row.

-(UITableViewCell *) tableView :( UITableView *) tableView cellForRowAtIndexPath :( NSIndexPath *) indexPath

How to Write? Should we determine which section is one by one if and then which line? So I thought of arrays. A veteran should naturally think of it, but he is very happy to be a newbie;

TableArray = @ [@ [@ "order to be paid", @ "Order to be delivered", @ "order delivered"], @ [@ "Order completed"], @ [@ "after-sales service"], @ [@ "set"];

This array is much simpler to combine with the following code.

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

What I want to say here is that we should use more? : Do you want to write less if statements first? : In this way, our code is more neat;

After talking about these small parts, let's take a look at the entire part of personalcentreview;

<Span style = "font-size: 12px;"> @ interface PersonalCentreView: UIView @ property (nonatomic, strong) UILabel * titleLabel; // Title @ property (nonatomic, strong) personalCentreHeadView * personalCentreHeadView; // The personal profile picture part in the header @ property (nonatomic, strong) PersonalCentreTable * personalCentreTable; // The table part @ property (nonatomic, copy) NSDictionary * dataDictionary; // data-(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]; // set the title _ titleLabel = [[UILabel alloc] initWithFrame: CGRectMake (0, 30,280, 20)]; _ titleLabel. text = @ "personal Center"; _ titleLabel. textAlignment = 1; // center // _ titleLabel. textColor = [UIColor whiteColor]; [self addSubview: _ titleLabel]; // set the Avatar part _ 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]; // set table _ personalCentreTable = [[PersonalCentreTable alloc] initWithDictionary: [dictionary objectForKey: @ "personal_table"]; [self addSubview: _ personalCentreTable];} return self ;}

Source code: http://download.csdn.net/detail/u010123208/7805865

Once again, these things are for our new users and may help you, because I also want to have a complete example to practice it.

Thank you for your suggestions. We hope you can stay here. "A simple interface ..." In this case, we don't want to see it. I don't believe it. You will be better than us in a year or two.



How can I display the complete interface of my IOS Simulator?

This is the result of direct compilation.

Xcode-> Open Developer Tool-> iOS Simulator can Open the Simulator separately and display the full version. if the system is not refreshed, your software should still be there.
 
How to customize the user interface in iOS 5

Using the same standard Apple user interface makes it difficult for consumers to get favor from crowded app stores. In fact, many popular apps in App Store present standard iOS user interface elements in a non-standard form: 1. twitter uses the custom UITabBar2.Instagram, And the custom UITabBar and UINavigationBar3.Epicurious (iPad) use the custom elements of the standard split-view. Before iOS5 is launched, you must customize the standard interface, it is not that simple for developers. Although creating a drawRect subclass or overwriting the drawRect class is a good method, developers will be overwhelmed by this.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.