Autolayout (Elementary) and iosautolayout for screen adaptation in iOS

Source: Internet
Author: User

Autolayout (Elementary) and iosautolayout for screen adaptation in iOS

This is the second blog. Come and come. Hi, today we are talking about iOS screen adaptation. as APPLE launches more and more mobile phones, the screen size is also increasing, the adaptation of the screen is indeed quite troublesome. Today I want to talk about it. It may have been online for a long time. I just want to express my understanding (maybe not, do not spray it ....)

Autolayout is actually a constraint. Today we are talking about adding constraints to the code. The third party we use is Masonry. I believe all the code writing constraints know this third-party library. Well, let's not talk about it. The Code starts up.

First, you need to download a Masonry, or use cocoapods to add it to the project. Let's take a simple example. Next, let's take a look at the annotations.

UIView * view1 = [[UIView alloc] init]; view1.backgroundColor = [UIColor blackColor]; [self. view addSubview: view1]; [view1 mas_makeConstraints: ^ (MASConstraintMaker * make) {// make the midpoint coordinate of view1 equal to self. make. center. similar to (self. view); // set the size of view1 to 300 in width and 300 in height. Here, mas_intent to seems to be used to set a specific value, but intent to is not make. size. mas_intent to (CGSizeMake (300,300);}];

Running Effect

UIView * view1 = [[UIView alloc] init]; view1.backgroundColor = [UIColor blackColor]; [self. view addSubview: view1]; UIView * view2 = [[UIView alloc] init]; view2.backgroundColor = [UIColor cyanColor]; [self. view addSubview: view2]; [view1 mas_makeConstraints: ^ (MASConstraintMaker * make) {// The left distance from view1 to self. the left distance of the view is 20 make. left. similar to (self. view. mas_left ). offset (20); // The distance between the right side of view1 and the left side of view2 is-10. Why is it a negative number? It is actually positive to the right, the left side is negative (I understand it), and top and buttom are also the same. right. pointer to (view2.mas _ left ). offset (-10); // This sentence means that the Y value equals self in the midpoint of view1. make. centerY. mas_pointer to (self. view. mas_centerY); // The height of view1 is 150. The object make is used here. height. mas_intent to (@ 150); // The width of view1 is equal to view2 make. width. pointer to (view2) ;}]; [view2 mas_makeConstraints: ^ (MASConstraintMaker * make) {// The left side of view2 is 10 away from the right side of view1. In fact, the interval is 10. make. left. pointer to (view1.mas _ right ). offset (10); // the right distance of view2 from self. the distance to the right of the view is-30. Why is it negative? make. right. similar to (self. view. mas_right ). offset (-30); // This sentence means that the Y value equals self in the midpoint of view2. make. centerY. mas_pointer to (self. view. mas_centerY); // The height of view2 is 150. The object make is used here. height. mas_intent to (@ 150); // The width of view2 is equal to view1 make. width. redirect to (view1);}];

The running effect is as follows:

Is it awesome? Let's write another three views. The positions of the two views are the same as those above. The third view is on the right side of the second view, and the distance is 15, the right side of the third view is 20 away from the parent view. I hope my friends can try it on their own. If you can try it again, it will prove that Masonry is getting started.

UIView * view1 = [[UIView alloc] init]; view1.backgroundColor = [UIColor blackColor]; [self. view addSubview: view1]; UIView * view2 = [[UIView alloc] init]; view2.backgroundColor = [UIColor cyanColor]; [self. view addSubview: view2]; UIView * view3 = [[UIView alloc] init]; view3.backgroundColor = [UIColor redColor]; [self. view addSubview: view3]; [view1 mas_makeConstraints: ^ (MASConstraintMaker * make) {// The left distance from view1 to self. the left distance of the view is 20 make. left. similar to (self. view. mas_left ). offset (20); // The distance between the right side of view1 and the left side of view2 is-10. Why is it a negative number? It is actually positive to the right, the left side is negative (I understand it), and top and buttom are also the same. right. pointer to (view2.mas _ left ). offset (-10); // This sentence means that the Y value equals self in the midpoint of view1. make. centerY. mas_pointer to (self. view. mas_centerY); // The height of view1 is 150. The object make is used here. height. mas_intent to (@ 150); // The width of view1 is equal to view2 make. width. coming to (view2) ;}]; [view2 mas_makeConstraints: ^ (MASConstraintMaker * make) {// The left distance from view2 to the right of view1 is 10 make. left. pointer to (view1.mas _ right ). offset (10); // make. right. pointer to (view3.mas _ left ). offset (-15); // This sentence means that the Y value equals self in the midpoint of view2. make. centerY. mas_pointer to (self. view. mas_centerY); // The height of view2 is 150. The object make is used here. height. mas_intent to (@ 150); // The width of view2 is equal to view3 make. width. preview to (view3) ;}]; [view3 mas_makeConstraints: ^ (MASConstraintMaker * make) {// The left side of view3 is 15 make from the right side of view2. left. pointer to (view2.mas _ right ). offset (15); // the right distance of view3 from self. the distance to the right of the view is-20. Why is it negative? make. right. similar to (self. view. mas_right ). offset (-20); // This sentence means that the Y value equals self in the midpoint of view3. make. centerY. mas_pointer to (self. view. mas_centerY); // The height of view3 is 150. The object make is used here. height. mas_intent to (@ 150); // The width of view3 is equal to view1 make. width. redirect to (view1);}];

Running Effect

Today's blog is written here. I hope you can get started. This constraint has not yet been used in the project. It is applicable to proportional writing (in fact, the effect is not very good, but it is not as troublesome as Autolayout ), I will try Masonry write adaptation in future projects. In fact, this is my own understanding. If not, please correct me. Thank you.

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.