Automatic layout of iOS development displays network request content

Source: Internet
Author: User

In the previous blog in detail about the relative layout and absolute layout of iOS development, with the change of mobile screen size, in the app development in order to adapt to different sizes of mobile phone screen, with automatic layout to complete the functions and effects we want to achieve is particularly important. I prefer to use relative layouts. In the example below we will use our storyboard to set the constraints of our components and then create new constraints in our code for our elements. The screen size of the iphone4,5 and the IPhone6 to be published is different, so the adaptation of the screen is something we have to consider in our app development.

What are we going to do? First two programs run the final result diagram, then look at the graph to see what we want to achieve

Interface Requirements:

1. The following button is refreshed on the 3.5 and 4.0-inch screen from the bottom of the bottom distance is 20 points.

2. Dynamically adjust the height of the lable based on how much of the text is requested by the network

3. When the height of the label changes, the position of the following three buttons is also relative to the position of the lable.

Here we will combine the code with the storyboard to achieve the above effect.

1. In order to simulate the network request, we need to create a new Sourcemanager class, and sourcemanagerdelegate. We use a delegate callback when we request the resource, refer to the delegate mode in the previous blog OBJC for the contents of the delegate callback. There is a Qingquweibo method in the Sourcemanager class that simulates a network request. In the Sourcemanagerdelegate protocol there is a-(void) Sourcemanager: (Sourcemanager *) SM Didreceiveweibotext: (NSString *) text; Used for callbacks.

The code in SourceManager.h is as follows:

1 #import <Foundation/Foundation.h> 2  3 @protocol sourcemanagerdelegate; 4  5 @interface Sourcemanager: NSObject 6//Callback Object 7 @property (nonatomic,weak) id<sourcemanagerdelegate>delegate; 8//Request Method 9-(void) qingquweibo;10 @end12//-----Agreement @protocol sourcemanagerdelegate <nsobject>17//SOURC E method to callback (void) Sourcemanager: (Sourcemanager *) SM Didreceiveweibotext: (NSString *) text;19 @end

The code for SOURCEMANAGER.M is as follows:

1 #import "SourceManager.h" 2  3 @implementation Sourcemanager 4  5-(void) Qingquweibo 6 {7     8     nsstring *st R 9     //random OK is that string one     int i = arc4random ()%2;12     if (i) all     {         ///Mock request to return string (s) (         str = @ ") Iphoneiphoneiphoneiphoneiphoneiphoneiphoneiphoneiphoneiphoneiphoneiphoneiphoneiphoneiphoneiphoneiphoneiphoneiphoneiphonei Phone ";     }17     else18     {         ///analog request to return a string of         str= @" IPhone ";     callback method, return Text25     [self.delegate sourcemanager:self didreceiveweibotext:str];26     27}

2. After implementing our simulation Sourcemanager class, we begin to write our Viewcontroller class.

(1) to lable and lable the following four buttons to add a constraint in storyboard, the following steps:

(2). Once the constraints have been added to each control, we need to add the vertical constraints of the controls and labels we want to use in Viewcontroller, as follows

1 vertical constraint in//lable, based on the requested text content, is used to dynamically modify the size of the label. 2 @property (Strong, nonatomic) Iboutlet nslayoutconstraint *lablevconstraint; 3  4//label used to set the requested text content 5 @property (strong, nonatomic) Iboutlet UILabel *mylabel; 6  7//Request data Source button 8 @property (Stro Ng, nonatomic) iboutlet UIButton *updatebutton; 9//sourcemanagmer; Get data one by one @property (strong, nonatomic) Sourcemanager *sourcemanager;

      

(3). Configure our data sources in Viewdidload

-(void) viewdidload{    [Super Viewdidload];    Additional setup after loading the view, typically from a nib.    New Data source    Self.sourcemanager = [[Sourcemanager alloc] init];        Register callback    self.sourceManager.delegate = self;}

  

(4). Implement Sourcemanager to callback method, the code is as follows

//sourcemanage method to callback-(void) Sourcemanager: (Sourcemanager *) SM Didreceiveweibotext: (NSString *) text{//        Adjusts the height of the mylable according to the text//removes the vertical layout of the mylabel before assigning a new value [Self.view removeConstraint:self.lableVConstraint];        Set the font size in a dictionary nsdictionary * dic = @{nsfontattributename: [Uifont systemfontofsize:17]}; Gets the range of text required to hold the request in a fixed-width area cgrect bounds = [text Boundingrectwithsize:cgsizemake ($) Options:        Nsstringdrawinguseslinefragmentorigin Attributes:dic Context:nil];        Parameters when creating a new vertical constraint nsstring *string = [NSString stringwithformat:@ "V:[_mylabel (%LF)]", bounds.size.height]; Create a new vertical constraint in mylabel nsarray *constraint = [Nslayoutconstraint constraintswithvisualformat:string options:0 metrics:       Nil views:nsdictionaryofvariablebindings (_mylabel)];        Update the value of the vertical constraint self.lablevconstraint = constraint[0];        Add a new constraint [Self.view addConstraint:self.lableVConstraint]; Sets the value of MyLabel self.myLabel.text = text;} 

Code Description:

1. Remove the original constraint before updating the label's vertical constraint, note that the constraint is added to the parent component of the constrained component.

2. Gets the size of the space required to display text in a fixed-width, specific font, and the return value is a variable of type CGRect.

3. Set the height of the acquisition area to the value of the vertical constraint of our label.

Code additions:

Click the Refresh button to start the event, click the Refresh button will open the request, so that the callback will be effective.

1//Click button to request data 2-(ibaction) Tapbutton: (ID) sender3 {4     //Call Data source Request Method 5     [Self.sourcemanager qingquweibo];6}

Is all the code and steps, welcome to criticize.

Automatic layout of iOS development displays network request content

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.