Autoresizingmask use of automatic layout (Storyboard&code)
Http://www.cocoachina.com/ios/20141216/10652.html
AutoLayout must be disabled to use Autoresizingmask
Now that it's not the same size as it used to be, the minimum iphone development needs to fit at least three sizes. So we used to use hard coordinates to set the position of each control, but now it's not possible, we need to do the adaptation, maybe you say you can use two sets of UI or more than two sets of UI, but that is not efficient and does not conform to the design. iOS has two big automatic layouts: autoresizing and AutoLayout (AutoLayout is added after IOS6). Autoresizing is the attribute of UIView, always exists, the use is relatively simple, but not autolayout as powerful. If your interface is simple and the details are not that high, then you can use Autoresizing to automate the layout. The following will be discussed for autoresizing.
0, autoresizing before the use of the explanation:
Uiviewautoresizing is an enumeration type that defaults to Uiviewautoresizingnone, which means no processing is done.
| 123456789 |
typedef NS_OPTIONS(NSUInteger, UIViewAutoresizing) { UIViewAutoresizingNone = 0, UIViewAutoresizingFlexibleLeftMargin = 1 << 0, UIViewAutoresizingFlexibleWidth = 1 << 1, UIViewAutoresizingFlexibleRightMargin = 1 << 2, UIViewAutoresizingFlexibleTopMargin = 1 << 3, UIViewAutoresizingFlexibleHeight = 1 << 4, UIViewAutoresizingFlexibleBottomMargin = 1 << 5}; |
Each attribute explains:
| uiviewautoresizingnone |
Does not change with the parent view |
| uiviewautoresizingflexibleleftmargin |
automatically adjusts the left margin of the view and parent views to ensure that the right margin is not changed |
| |
automatically adjusts the width of the view to ensure that the left and right margins are constant |
| < Span class= "S1" >uiviewautoresizingflexiblerightmargin |
automatically adjusts the view and parent view right margin to ensure that the left margin is not changed |
| uiviewautoresizingflexibletopmargin |
automatically adjusts the top margin of the view and parent views to ensure that the bottom margin is not changed |
| uiviewautoresizingflexibleheight |
automatically adjusts the height of the view, To ensure that the top and bottom margins are constant |
| uiviewautoresizingflexiblebottommargin |
automatically adjusts the bottom margin of view and parent to ensure that the top margin is not changed |
It is explained here that if you use Storyboard/xib to set up autoresizing, it is easy to get an understanding error if the transformation uses code settings autoresizing. For example, Uiviewautoresizingflexibletopmargin, may be mistaken for the top distance is the same, in fact, the bottom distance is unchanged. This solution is also very simple, just to use the code and use storyboard settings autoresizing, they are the opposite, just need to remember it.
Autoresizing combination using:
That is, the values in the enumeration can be separated by |, with multiple values, which can be changed for different scenarios. For example:
| 1 |
UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleBottomMargin |
This means: the width of the view is scaled according to the width of the parent view, and the distance from the top of the parent view remains the same.
The other combinations are similar, and I don't list them here.
Attention:
1) When the Autoresizessubviews property of view is Yes (default is YES), autoresizing will not take effect.
2) starting with XCODE6, Storyboard&xib is automatically layout by default, so we need to adjust manually to use autoresizing.
Action (Open the storyboard file, you will see the following image of the interface):
Here is a simple example to give you a more intuitive understanding, and will be attached to the demo at the end of this article, please continue to watch OH.
Demo:
1) The distance from the top of the parent view is unchanged
2) width is stretched by parent view scale
3) The left and right margins of the view and parent views are unchanged
First, use code to control Autoresizingmask
Here is the macro that the project uses:
| 12345678 |
#define topSpace 64#define kMargin 20#define kTopViewHeight 44#define kTopViewWidth 300#define kTextLabelWidth 200#define kTextLabelHeight 30 |
Did not do the pre-fit code:
| 12345678910111213141516 |
// 以Iphone4(320, 480)为基础,设置各控件的位置// 注意:必须所有控件都按照Iphone4(320, 480)为基础初始化一次,不然按比例缩放时会发生错误!UIView *topView = [[UIView alloc] initWithFrame:CGRectMake(kMargin, topSpace, kTopViewWidth, kTopViewHeight)];CGFloat textLabelTop = (topView.frame.size.width - kTextLabelWidth) / 2;CGFloat textLabelWidth = (topView.frame.size.height - kTextLabelHeight) / 2;UILabel *textLabel = [[UILabel alloc] initWithFrame:CGRectMake(textLabelTop, textLabelWidth, kTextLabelWidth, kTextLabelHeight)]; // 设置文字及居中[textLabel setText:@"Garvey"];[textLabel setTextAlignment:NSTextAlignmentCenter];// 分别设置样式[topView setBackgroundColor:[UIColor redColor]];[textLabel setTextColor:[UIColor whiteColor]];// 添加视图[topView addSubview:textLabel];[self.view addSubview:topView]; |
It will show:
Interface adaptation with autoresizing:
Add: You can initialize the controls on the interface first by the other device dimensions, because the autoresizing will change as the parent view changes.
| 123456789101112131415161718192021222324252627 |
// 以Iphone4(320, 480)为基础,设置各控件的位置// 注意:必须所有控件都按照Iphone4(320, 480)为基础初始化一次,不然按比例缩放时会发生错误!UIView *topView = [[UIView alloc] initWithFrame:CGRectMake(kMargin, kTopSpace, kTopViewWidth, kTopViewHeight)];CGFloat textLabelTop = (topView.frame.size.width - kTextLabelWidth) / 2;CGFloat textLabelWidth = (topView.frame.size.height - kTextLabelHeight) / 2;UILabel *textLabel = [[UILabel alloc] initWithFrame:CGRectMake(textLabelTop, textLabelWidth, kTextLabelWidth, kTextLabelHeight)]; // 设置文字及居中[textLabel setText:@"Garvey"];[textLabel setTextAlignment:NSTextAlignmentCenter];// 分别设置样式[topView setBackgroundColor:[UIColor redColor]];[textLabel setTextColor:[UIColor whiteColor]];// 设置文字控件的宽度按照上一级视图(topView)的比例进行缩放[textLabel setAutoresizingMask:UIViewAutoresizingFlexibleWidth];// 设置View控件的宽度按照父视图的比例进行缩放,距离父视图顶部、左边距和右边距的距离不变[topView setAutoresizingMask:UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleLeftMargin];// 添加视图[topView addSubview:textLabel];[self.view addSubview:topView];// 注意:重新设置topView位置的代码,必须要写在添加视图的后面,不然autoresizing的位置计算会出错!CGFloat topViewWidth = kUIScreen.size.width - kMargin * 2;[topView setFrame:CGRectMake(kMargin, kTopSpace, topViewWidth, kTopViewHeight)]; |
Last show:
Second, in the storyboard control Autoresizingmask
There are only two controls on the storyboard, View and Label.
If we don't do any of the adaptation options, it will show:
By default it is close to the upper left and can be seen on the autoresizing:
In fact, to achieve the target display is very simple, two controls are set as follows:
It means:
1) The distance from the top of the parent view is unchanged
2) width is stretched by parent view scale
3) The left and right margins of the view and parent views are unchanged
Last show:
Summary:
Compared with the above two methods of use, it is not felt that the use of code to carry out autoresizing control, will be compared to the more troublesome.
If you are using Stroyboard/xib, it will be very simple, just click a few places on it, to see which method you choose.
Demo Download: Http://pan.baidu.com/s/1qWnxsZU
Autoresizingmask use of automatic layout (Storyboard&code)