iOS Learning 3_ui Development Pure Code/storyboard/xib

Source: Internet
Author: User

As the Android development time is longer, according to the Android experience, the general development interface is to use XML to write layout files, rarely completely use code to write layout, recently just learned iOS, found that many are directly using code to write layout. Watching video learning just see this nice little project, so do a little bit of tidying up.

To achieve the effect as follows, click on the plus sign to add a, click on the recovery bid delete the bottom one, click Delete will delete the current one. Clicking on the header will change the text in the middle. Delete/Add will accompany the animation.


1. Write layouts using pure code


Click the Add button

-(Ibaction) Add: (Uibarbuttonitem *) sender{    UIView * v = [self getrowview];    UIView * Lastview = [[Self.view subviews] lastobject];    NSLog (@ "%@", Lastview);    CGFloat rowy = lastview.frame.origin.y + lastView.frame.size.height + 1;    V.frame = CGRectMake (_screenwidth, Rowy, _screenwidth, kheight);    V.alpha = 0;    [Self.view addsubview:v];        [UIView animatewithduration:0.5 animations:^{        v.alpha = 1;        V.frame = CGRectMake (0, Rowy, _screenwidth, kheight);    }];    [Self.removeitem setenabled:true];}

Click the Recycle button on the last face

-(Ibaction) Remove: (Uibarbuttonitem *) sender{    UIView * Lastview = [[Self.view subviews] lastobject];    [UIView animatewithduration:0.5 animations:^{        cgrect Tempf = lastview.frame;        tempf.origin.x = _screenwidth;        Lastview.frame = Tempf;        Lastview.alpha = 0;    } completion:^ (BOOL finished) {        [Lastview Removefromsuperview];        [Self.removeitem setEnabled:self.view.subviews.count > 1];}];}
the Getrowview function is a layout view that gets a row of item

-(UIView *) getrowview{uiview * view = [[UIView alloc]init];    View.bounds = CGRectMake (0, 0, self.view.frame.size.width, kheight);        [View Setbackgroundcolor:[uicolor Graycolor];    Create Text UILabel * label = [[UILabel alloc]init];    Label.frame = CGRectMake (0, 0, self.view.frame.size.width, kheight);    Label.text =_allnames[arc4random_uniform (_allnames.count)];    Label.textcolor = [Uicolor blackcolor];    Label.textalignment = Nstextalignmentcenter;    Label.tag = 10;        [View Addsubview:label];    Create Avatar UIButton * icon = [[UIButton alloc]init];    Icon.frame = CGRectMake (0, Kheight, kheight);    int randomindex = Arc4random_uniform (9);    NSString *iconname = [NSString stringwithformat:@ "01%d.png", Randomindex];    Set picture [icon Setimage:[uiimage Imagenamed:iconname] forstate:uicontrolstatenormal];    Add Listener [icon addtarget:self action: @selector (Iconclick:) forcontrolevents:uicontroleventtouchupinside];        [View Addsubview:icon];  Create Delete button  UIButton * Deleteicon = [UIButton buttonwithtype:uibuttontyperoundedrect];    [Deleteicon setcenter:cgpointmake (280, KHEIGHT/2)];    Deleteicon.bounds = CGRectMake (0, 0, 60, 30);    [Deleteicon settitle:@ "Delete" forstate:uicontrolstatenormal];    [Deleteicon addtarget:self Action: @selector (Deleteclick:) forcontrolevents:uicontroleventtouchupinside];    [View Addsubview:deleteicon]; return view;}
Click the response function of the picture

-(void) Iconclick: (UIButton *) btn{    UILabel * label = (UILabel *) [[btn Superview] viewwithtag:10];    NSString * oristr = [Label text];    NSString * Newstr = [NSString stringwithformat:@ "%@+%@", oristr,oristr];    Label.text = Newstr;}
Click the button to delete an item

-(void) Deleteclick: (UIButton *) btn{    [UIView animatewithduration:0.5 animations:^{cgrect        Tempf = [ Btn.superview frame];        tempf.origin.x = _screenwidth;        Btn.superview.frame = Tempf;    } completion:^ (BOOL finished) {                //moves all of the following items up        int startIndex = [Self.view.subviews indexOfObject:btn.superview ];        [Btn.superview Removefromsuperview];        [UIView animatewithduration:0.5 animations:^{for            (int i = StartIndex; i < Self.view.subviews.count; i++) {                U IView *child = self.view.subviews[i];                CGRect Tempf = child.frame;                TEMPF.ORIGIN.Y-= kheight + 1;                Child.frame = Tempf;}}        ];            }];}
It can be seen that using code to write layout is very troublesome, using storyboard drag control can be wired to reduce the amount of code, the above code, the content of adding an item is very cumbersome.

2. Use Xib as the load layout for each item

Benefit: You don't need to use code to do this line of layout

Cons: The problem is that you also need to add a click event through the code.


The layout of each row is generated in the same way that the Xib file is loaded, as follows
-(UIView *) getrowview{    nsarray * views = [[NSBundle mainbundle] loadnibnamed:@ "item" Owner:nil Options:nil];    UIView * view = views[0];        UIButton * icon = view.subviews[0];    UILabel * label = view.subviews[1];    UIButton * Deleteicon = view.subviews[2];    NSLog (@ "%@ +%@ +%@", Icon,label,deleteicon);    NSString *iconname = [NSString stringwithformat:@ "01%d.png", Arc4random_uniform (9)];        [Icon Setimage:[uiimage Imagenamed:iconname] forstate:uicontrolstatenormal];        Label.text = _allnames[arc4random_uniform (_allnames.count)];    [Deleteicon addtarget:self Action: @selector (Deleteclick:) forcontrolevents:uicontroleventtouchupinside];    return  view;}
3. Using Xib and wiring

Benefit: You don't need to add a click event Trigger yourself. Specifies that the fileower,fileower is guaranteed to be wired, specifying the fileower of a xib that specifies its management class.

Cons: The problem with this is that there is too much coupling between the code,

In theory, when you create a line, that is, in the Getrowview method, you do not need to pay attention to the specifics of the details, do not need to focus on his child controls, the best thing is to pass only the data we need to display, the rest of us do not need to deal with. And it is not good to implement code reuse.


Note: You must specify file ' s ower to otherwise be unable to connect, and specify this parameter when loading with code. Fileower does not have to be this class, any class is possible.

-(UIView *) getrowview{    Nsarray *views = [[NSBundle mainbundle] loadnibnamed:@ "item" Owner:self Options:nil];    UIView *view = views[0];    UIButton * icon = view.subviews[0];    UILabel * label = view.subviews[1];    NSString *iconname = [NSString stringwithformat:@ "01%d.png", Arc4random_uniform (9)];    [Icon Setimage:[uiimage Imagenamed:iconname] forstate:uicontrolstatenormal];    Label.text = _allnames[arc4random_uniform (_allnames.count)];return view;}
4. Custom View


Note: You cannot specify the properties of the file owner and set the view's Class property to our custom view to connect.

The class methods in MyView are as follows

+ (MyView *) Myviewwithicon: (UIImage *) iconimage Andlabel: (NSString *) labelstr{    MyView *view = [[NSBundle mainbundle ] loadnibnamed:@ "Item" Owner:nil options:nil][0];    [View.iconbtn setimage:iconimage forstate:uicontrolstatenormal];        View.label.text = Labelstr;    return view;}

This creates a line of view with the code

-(UIView *) getrowview{    MyView * view = [MyView myviewwithicon:[uiimage imagenamed:[nsstring stringwithformat:@ "1% D.png ", Arc4random_uniform (9)] Andlabel:_allnames[arc4random_uniform (_allnames.count)]];return view;}

Using MyView to create a row of view can be completely separate from the rest of the code, because the business of its child controls is handled by himself.

The above content is organized from the video

iOS Learning 3_ui Development Pure Code/storyboard/xib

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.