iOS Development UI chapter-a simple Browser viewer program

iOS Development UI chapter-a simple Browser viewer program

First, the implementation requirements of the program

1. Requirements

2. Interface Analysis

(1) controls that need to read or modify properties need to set properties

Ordinal label

Image

Picture description

Left button

Right button

(2) need to listen to the object of the response event, need to add a listening method

Left button

Right button

Second, the implementation of basic functions of the program

  1//2//YYVIEWCONTROLLER.M 3//03-Image Browser Preliminary 4//5//Created by Apple on 14-5-21. 6//Copyright (c) 2014 itcase.  All rights reserved.    7//8 9 #import "YYViewController.h" #define POTOIMGW #define POTOIMGH #define POTOIMGX #define POTOIMGY @interface Yyviewcontroller () 18 19//Variable declaration! @property (Nonatomic,strong) UILabel *firstlab; @property (Nonatomic,strong) UILabel *lastlab; @property (Nonatomic,strong) Uiimageview *icon; @property (Nonatomic,strong) UIButton *leftbtn; @property (Nonatomic,strong) UIButton *rightbtn; -(void) change; @property (nonatomic, assign) int i; @end @implementation Yyviewcontroller-(void) viewdidload [Super Viewdidload]; self.i= 0; 36//Create a lable control to display the serial number UILabel *headlab=[[uilabel Alloc]initwithframe:cgrectmake (20, 10, 300, 30)]; [Headlab settext:@ "1/5"]; [Headlab Settextalignment:nstextalignmentcenter];[Headlab Settextcolor:[uicolor Blackcolor]; [Self.view Addsubview:headlab]; Self.firstlab=headlab; 45 46 47 48//Create a control to load a picture Uiimageview *potoimg=[[uiimageview Alloc]initwithframe:cgrectmake (POTO IMGX, Potoimgy, POTOIMGW, POTOIMGH)]; UIImage *image=[uiimage imagenamed:@ "Biaoqingdi"]; Potoimg.image=image; [Self.view addsubview:potoimg]; self.icon=potoimg; 56 57 58 59//Create the bottom-most description picture of the lable control UILabel *desclab=[[uilabel Alloc]initwithframe:cgrectmake (20, 4 00, 300, 30)]; //[Desclab settext:@] The expression is weak! "]; [Desclab Settextalignment:nstextalignmentcenter]; [Self.view Addsubview:desclab]; Self.lastlab=desclab; 65 66 68//Create two arrow key buttons 69//set to custom type 70//1. Using classes to create Objects UIButton *leftbtn=[uibutton buttonwithtype: Uibuttontypecustom]; 72 73//2. Set the properties of an object (do not forget to set coordinates) leftbtn.frame=cgrectmake (0, Self.view.center.y, 40, 40);[Leftbtn setbackgroundimage:[uiimage imagenamed:@ "Left_normal"] forstate:uicontrolstatenormal]; [Leftbtn setbackgroundimage:[uiimage imagenamed:@ "left_highlighted"] forstate:uicontrolstatehighlighted]; 77 78//3. Submit object to view [Self.view addsubview:leftbtn]; Self.leftbtn=leftbtn Bayi;      [Leftbtn addtarget:self Action: @selector (Leftclick:) forcontrolevents:uicontroleventtouchupinside]; 83 84 UIButton *rightbtn=[uibutton Buttonwithtype:uibuttontypecustom]; Rightbtn.frame=cgrectmake (potoimgx+potoimgw+10, Self.view.center.y, 40, 40); [Rightbtn setbackgroundimage:[uiimage imagenamed:@ "Right_normal"] forstate:uicontrolstatenormal]; [Rightbtn setbackgroundimage:[uiimage imagenamed:@ "right_highlighted"] forstate:uicontrolstatehighlighted]; [Self.view ADDSUBVIEW:RIGHTBTN]; SELF.RIGHTBTN=RIGHTBTN; 94 [Rightbtn addtarget:self Action: @selector (rightclick:) Forcontrolevents:uicontroLeventtouchupinside]; 95 96//This is an initialization method that calls change to complete the initialization of the work ("Self"); 98}-(void) change101 {102 [Self.firstlab settext:[nsstring stringwithformat:@ "%D/5", self.i+1]];103 switch (SELF.I) {104 case 0:105 [email protected] "What a weak expression!"             "; 106 self.icon.image=[uiimage imagenamed:@" Biaoqingdi "];107 break;108 case 1:109         [email protected] "case"; self.icon.image=[uiimage imagenamed:@ "Bingli"];111 break;112             Case 2:113 [email protected] "Wang Ba", Self.icon.image=[uiimage imagenamed:@ "Wangba"];115 break;116 case 3:117 [email protected] "eat steak"; 118 self.icon.image=[uiimage I magenamed:@ "Chiniupa"];119 break;120 case 4:121 [email protected] "Egg hurts!" "; 122 self.icon.image=[uiimage imagenamed:@" Danteng "];123 break;124}125//Control button click, asIf the result is 5 then the right key fails, if 1, then the left key fails 126 self.leftbtn.enabled= (self.i!=0); 127 self.rightbtn.enabled= (self.i!=4); 128 129}130 131//To Right button-(void) RightClick: (UIButton *) btn133 {134 self.i++;135 [self change];136//nslog (@ "point Me"); 137}138-(voi     d) Leftclick: (UIButton *) btn139 {self.i--;141 [self change];142}143-(void) didReceiveMemoryWarning144 {145 [Super didreceivememorywarning];146//Dispose of any resources, can be recreated.147}148 149 @end

Third, program optimization

  1//2//YYVIEWCONTROLLER.M 3//03-Image Browser Preliminary 4//5//Created by Apple on 14-5-21. 6//Copyright (c) 2014 itcase.  All rights reserved.    7//8 9 #import "YYViewController.h" #define POTOIMGW #define POTOIMGH #define POTOIMGX #define POTOIMGY @interface Yyviewcontroller () 18 19//Variable declaration! @property (Nonatomic,strong) UILabel *firstlab; @property (Nonatomic,strong) UILabel *lastlab; @property (Nonatomic,strong) Uiimageview *icon; @property (Nonatomic,strong) UIButton *leftbtn; @property (Nonatomic,strong) UIButton *rightbtn; @property (Nonatomic,strong) Nsarray *array; -(void) change; @property (nonatomic, assign) int i; @end @implementation Yyviewcontroller-(void) viewdidload + [Super Viewdidload]; PNS self.i= 0; 38//Create a lable control to display the serial number UILabel *headlab=[[uilabel Alloc]initwithframe:cgrectmake (20, 10, 300, 30)]; +//[Headlab settext:@ "1/5"];     42[Headlab Settextalignment:nstextalignmentcenter]; [Headlab Settextcolor:[uicolor Blackcolor]]; [Self.view Addsubview:headlab]; Self.firstlab=headlab; 47 48 49 50//Create a control that loads pictures uiimageview *potoimg=[[uiimageview alloc]initwithframe:cgrectmake (POTO IMGX, Potoimgy, POTOIMGW, POTOIMGH)]; UIImage *image=[uiimage imagenamed:@ "Biaoqingdi"]; Potoimg.image=image; [Self.view addsubview:potoimg]; self.icon=potoimg; 58 59 60 61//Create the bottom-most description picture of the lable control UILabel *desclab=[[uilabel Alloc]initwithframe:cgrectmake (20, 4 00, 300, 30)]; //[Desclab settext:@] The expression is weak! "]; [Desclab Settextalignment:nstextalignmentcenter]; [Self.view Addsubview:desclab]; Self.lastlab=desclab; 67 68 69 70//Create two arrow key buttons 71//set to custom type 72//1. Using classes to create objects UIButton *leftbtn=[uibutton buttonw Ithtype:uibuttontypecustom];    74 75//2. Set the properties of an object (do not forget to set the coordinates) 76 Leftbtn.frame=cgrectmake (0, Self.view.center.y, 40, 40); [Leftbtn setbackgroundimage:[uiimage imagenamed:@ "Left_normal"] forstate:uicontrolstatenormal]; [Leftbtn setbackgroundimage:[uiimage imagenamed:@ "left_highlighted"] forstate:uicontrolstatehighlighted]; 79 80//3. Submit object to view Bayi [Self.view addsubview:leftbtn]; SELF.LEFTBTN=LEFTBTN;      [Leftbtn addtarget:self Action: @selector (Leftclick:) forcontrolevents:uicontroleventtouchupinside]; 85 86 UIButton *rightbtn=[uibutton Buttonwithtype:uibuttontypecustom]; Rightbtn.frame=cgrectmake (potoimgx+potoimgw+10, Self.view.center.y, 40, 40); [Rightbtn setbackgroundimage:[uiimage imagenamed:@ "Right_normal"] forstate:uicontrolstatenormal]; [Rightbtn setbackgroundimage:[uiimage imagenamed:@ "right_highlighted"] forstate:uicontrolstatehighlighted]; [Self.view ADDSUBVIEW:RIGHTBTN]; 94 self.rightbtn=rightbtn; [Rightbtn Addtarget:seLF Action: @selector (RightClick:) forcontrolevents:uicontroleventtouchupinside]; 97//Put here, it will only be created once, but this part and [self change], part has very strict order requirements, not human, you can consider using lazy loading features 98//Nsdictionary *[email protected]{@ " Name ": @" Biaoqingdi "@" desc ": @" what expression is weak! " "}; Nsdictionary *[email protected]{@ "name": @ "Bingli", @ "desc": @ "case"};100//Nsdictionary *[email protec ted]{@ "name": @ "Wangba", @ "desc": @ "turtle"};101//nsdictionary *[email protected]{@ "name": @ "Chiniupa" @ "desc": @ " Eat steak "};102//nsdictionary *[email protected]{@" name ": @" Danteng ", @" desc ": @" egg ache "};103//104//[EMAIL PR OTECTED][DICT1,DICT2,DICT3,DICT4,DICT5];105//This is an initialization method that calls change to complete the initialization of the work 106 [self change];107}108 109-(void) ch ange110 {111//each call needs to be created? Is there any way out? Nsdictionary *[email protected]{@ "name": @ "Biaoqingdi", @ "desc": @ "what expression is weak!" "};113//nsdictionary *[email protected]{@" name ": @" Bingli ", @" desc ": @" case "};114//Nsdictionary *[EMAIL PR otected]{@ "name": @ "WAngba ", @" desc ": @" turtle "};115//nsdictionary *[email protected]{@" name ": @" Chiniupa "@" desc ": @" Eat steak "};116//Nsdict Ionary *[email protected]{@ "name": @ "Danteng", @ "desc": @ "egg ache"};117//118//Nsarray *[email protected][dict 1,DICT2,DICT3,DICT4,DICT5];119 120 121//SET photo 122//First remove the elements from the array according to SELF.I, then take out the values corresponding to the key values in the element (dictionary) 123//SELF.ICON.I Mage=[uiimage imagenamed:array[self.i][@ "name"]];124//self.lastlab.text=array[self.i][@ "desc"];125//NSLog (@ "%@" , array[self.i][@ "desc"]); 126 127 self.icon.image=[uiimage imagenamed:self.array[self.i][@ "name"]];128 Self.las tlab.text=self.array[self.i][@ "desc"];129 [self.firstlab settext:[nsstring stringwithformat:@ "%D/5", Self.i+1]] ; 131/switch (SELF.I) {133//Case 0:134//[email protected] "What a weak expression!"             "; 135//Self.icon.image=[uiimage imagenamed:@" Biaoqingdi "];136//break;137//Case 1:138// [email protected] "case"; 1//Self.icon.image=[uiimage imagenamed:@ "Bingli"];140//break;141//Case 2:142// [email protected] "Wang Ba"; 143//Self.icon.image=[uiimage imagenamed:@ "Wangba"];144//break;14 5//Case 3:146//[email protected] "eat steak"; 147//Self.icon.image=[uiimage imagenamed:@ "ch Iniupa "];148//break;149//Case 4:150//[email protected]" The egg hurts! "; 151//Self.icon.image=[uiimage imagenamed:@" Danteng "];152//break;153//}154//Control button click, as If the result is 5 then the right key fails, if 1, then the left key fails 155 self.leftbtn.enabled= (self.i!=0); 156 self.rightbtn.enabled= (self.i!=4); 157 158}159 Rray Get Method 161-(Nsarray *) array162 {163 NSLog (@ "need to get Array"); 164//Instantiate only once 165 if (_array==nil) {166 NSLog (@ "instanced array"); 167 nsdictionary *[email protected]{@ "name": @ "Biaoqingdi", @ "desc": @ "what expression is weak!" "};168 nsdictionary *[email protected]{@" name ": @" Bingli@ "desc": @ "case"};169 nsdictionary *[email protected]{@ "name": @ "Wangba", @ "desc": @ "turtle"};170 Nsdictiona Ry *[email protected]{@ "name": @ "Chiniupa", @ "desc": @ "Eat steak"};171 nsdictionary *[email protected]{@ "name": @ "Danteng", @ "desc": @ "egg ache"};172 [email protected][dict1,dict2,dict3,dict4,dict5];173}174//Nsdictionar Y *[email protected]{@ "name": @ "Biaoqingdi", @ "desc": @ "what expression is weak!" "};175//nsdictionary *[email protected]{@" name ": @" Bingli ", @" desc ": @" case "};176//Nsdictionary *[EMAIL PR otected]{@ "name": @ "Wangba", @ "desc": @ "turtle"};177//nsdictionary *[email protected]{@ "name": @ "Chiniupa" @ "desc" : @ "Eat steak"};178//nsdictionary *[email protected]{@ "name": @ "Danteng", @ "desc": @ "egg ache"};179//[email p rotected][dict1,dict2,dict3,dict4,dict5];181 return _array;182}183 184//Right button 185-(void) RightClick: (UIButton *) btn18 6 {187 self.i++;188 [self change];189}190 191//Left button 192-(void) Leftclick: (UIButton *) btn193 {194 self.i--;195 [self change];196}197 198 199-(void) didReceiveMemoryWarning200 {201 [su Per didreceivememorywarning];202}203 204 @end

Description

1> Define control Properties, note: The property must be strong, the sample code is as follows:

@property (nonatomic, strong) Uiimageview *icon;

2> lazy Loading in the getter method of the property, the sample code is as follows:

1-(Uiimageview *) icon 2  3 {4  5     if (!_icon) {6  7         //Calculate position parameter 8  9         cgfloat imagew = 200;10 11
   cgfloat ImageX = (320-imagew)/2;12-         cgfloat imageh = 200;14 cgfloat imagey         = 80;16         //materialized image view Figure         _icon = [[Uiimageview alloc] Initwithframe:cgrectmake (ImageX, Imagey, Imagew, Imageh)];20         // Add an image view to the main viewing         [Self.view addsubview:_icon];24     }26     return _icon;28 29}

Iv. use of plist files

(1) Purpose of using the Plist file: separating data from code

(2) Loading method:

NSString *path = [[NSBundle mainbundle] pathforresource:@ "ImageData" oftype:@ "plist"];

_imagelist = [Nsarray Arraywithcontentsoffile:path];

Hint: The file word usually appears in the method, usually need to pass the full path of the files as parameters

(3) Code example

  1//2//YYVIEWCONTROLLER.M 3//03-Image Browser Preliminary 4//5//Created by Apple on 14-5-21. 6//Copyright (c) 2014 itcase.  All rights reserved.    7//8 9 #import "YYViewController.h" #define POTOIMGW #define POTOIMGH #define POTOIMGX #define POTOIMGY @interface Yyviewcontroller () 18 19//Variable declaration! @property (Nonatomic,strong) UILabel *firstlab; @property (Nonatomic,strong) UILabel *lastlab; @property (Nonatomic,strong) Uiimageview *icon; @property (Nonatomic,strong) UIButton *leftbtn; @property (Nonatomic,strong) UIButton *rightbtn; @property (Nonatomic,strong) Nsarray *array; -(void) change; @property (nonatomic, assign) int i; @end @implementation Yyviewcontroller-(void) viewdidload + [Super Viewdidload]; PNS self.i= 0; 38//Create a lable control to display the serial number UILabel *headlab=[[uilabel Alloc]initwithframe:cgrectmake (20, 10, 300, 30)]; +//[Headlab settext:@ "1/5"];     42[Headlab Settextalignment:nstextalignmentcenter]; [Headlab Settextcolor:[uicolor Blackcolor]]; [Self.view Addsubview:headlab]; Self.firstlab=headlab; 47 48 49 50//Create a control that loads pictures uiimageview *potoimg=[[uiimageview alloc]initwithframe:cgrectmake (POTO IMGX, Potoimgy, POTOIMGW, POTOIMGH)]; UIImage *image=[uiimage imagenamed:@ "Biaoqingdi"]; Potoimg.image=image; [Self.view addsubview:potoimg]; self.icon=potoimg; 58 59//Create the bottom description picture of the lable control UILabel *desclab=[[uilabel Alloc]initwithframe:cgrectmake (20, 400, 300, 30)]; //[Desclab settext:@] The expression is weak! "]; [Desclab Settextalignment:nstextalignmentcenter]; [Self.view Addsubview:desclab]; Self.lastlab=desclab; 65 66 67//Create two arrow key buttons 68//set to custom Type 69//1. Using classes to create Objects UIButton *leftbtn=[uibutton buttonwithtype: Uibuttontypecustom]; 71 72//2. Set the properties of an object (do not forget to set coordinates) Leftbtn.frame=cgrectmakE (0, Self.view.center.y, 40, 40); [Leftbtn setbackgroundimage:[uiimage imagenamed:@ "Left_normal"] forstate:uicontrolstatenormal]; [Leftbtn setbackgroundimage:[uiimage imagenamed:@ "left_highlighted"] forstate:uicontrolstatehighlighted]; 76 77//3. Submit object to view [Self.view addsubview:leftbtn]; SELF.LEFTBTN=LEFTBTN;      Bayi [leftbtn addtarget:self Action: @selector (Leftclick:) forcontrolevents:uicontroleventtouchupinside]; 82 83 UIButton *rightbtn=[uibutton Buttonwithtype:uibuttontypecustom]; Rightbtn.frame=cgrectmake (potoimgx+potoimgw+10, Self.view.center.y, 40, 40); [Rightbtn setbackgroundimage:[uiimage imagenamed:@ "Right_normal"] forstate:uicontrolstatenormal]; [Rightbtn setbackgroundimage:[uiimage imagenamed:@ "right_highlighted"] forstate:uicontrolstatehighlighted]; [Self.view ADDSUBVIEW:RIGHTBTN]; SELF.RIGHTBTN=RIGHTBTN; [Rightbtn addtarget:self Action: @selector (RighTclick:) forcontrolevents:uicontroleventtouchupinside]; 94 [self change]; -(void) Change 98 {self.icon.image=[uiimage imagenamed:self.array[self.i][@ "name"]];100 Self.lastla b.text=self.array[self.i][@ "desc"];101 102 [Self.firstlab settext:[nsstring stringwithformat:@ "%D/5", self.i+1]];10  3 104 self.leftbtn.enabled= (self.i!=0), self.rightbtn.enabled= (self.i!=4), 106 107}108 109//array Get method 110 -(Nsarray *) array111 {NSLog (@ "need to get Array"); 113//Instantiate only once if (_array==nil) {nsstring *p Ath=[[nsbundle Mainbundle] pathforresource:@ "Data" oftype:@ "plist"];117//array from file get 118//_array=[nsarray         arraywithcontentsoffile:path];119 _array=[[nsarray alloc]initwithcontentsoffile:path];120//Print View the location of the package 121 NSLog (@ "%@", Path), 122 123 NSLog (@ "instanced array"), 124}125 126 return _array;127}128 129//Right button 130- (void) RightClick: (UIButton *) btn131 {self.i++;133 [selfchange];134}135 136//Left button 137-(void) Leftclick: (UIButton *) btn138 {139 self.i--;140 [self change];141}142 143- (void) didReceiveMemoryWarning144 {145 [Super didreceivememorywarning];146}147 148 @end

(4) plist file

(5) Achieve effect

V. Supplementary

Development ideas:

1. Complete the basic function

2. Consider performance

(1) (Initialize operation, can call change directly)

(2) because you want to control the number and picture two variables, so consider using a dictionary instead of switch

(3) Each click, the dictionary needs to be created once, the efficiency of the underground, you can consider the creation of this part of the initialization method to go, so that only need to create once on the OK.

(4) Consider the drawbacks (the order of the code is very strict)

(5) Lazy loading (load only when needed, then when it is needed, and when the Get method is called)

(6) Come here every time? Inefficient-"Only the first call to the Get method is empty, when the array is instantiated and created, and other times the member variables are returned directly (only once)

Note the point:

1. The Call stack (order) of the method.

2. Use plist: Let the data operation more flexible, the data to go outside, decoupling, so that coupling is not too strong. is actually an XML, which is a special format of XML defined by Apple.

3.bundle-package (Read only)

iOS Development UI chapter-a simple Browser viewer program