您的位置:首页 > 移动开发 > IOS开发

iOS-NSLayoutConstraint-代码实现自动布局的函数用法说明

2015-03-20 17:01 513 查看
适配建议1、以后的应用程序,都使用AutoLayout, 不要再用绝对定位。2、使用类似网页的方式来设计界面。3、设计师好,程序员也好,尽量使用点这个单位进行思考,而不要使用像素。比如,你需要做44 x 66个点的按钮,2x模式,就乘以2, 3x模式就乘以3。这样的思考方式可以大致估计到真实的物理长度。44个点,就是手机上导航栏,工具栏的高度。假如用像素思考,容易使得做出的图片过大或者过小。4、非矢量素材,就可以做尺寸最大的,之后再进行缩小。比如你需要兼容3x的屏幕,就直接做最高那种图片。5、而当使用Flash之类的矢量工具来做素材的时候,应该直接做点那个尺寸。比如44 x 66个点的按钮。就建立一个44 x 66的场景。之后再导出成2倍图,3倍图,因为矢量放大不失真。不要建立一个3x的场景,导出成大图片,再进行缩小,这样就容易失真。更理想的是直接使用矢量图。6、假如是那种导航栏,工具栏之类的背景图,需要横跨整个屏幕。可以只切一小块,让程序拉伸,拉伸方式是保持两边的像素不动,只拉伸最中间的一列像素。需要拉伸的话,横方向就不要出现一些渐变色。7、按钮的点击区域,不应该少于44像素,就算按钮的图片看起来比较小,也应该使得点按钮周围的透明区也有反应。8、可以按照你当前最方便测试机子的型号来做一些主要预览图,效果图。比如你手头有iPhone 5,可以按照iPhone 5的尺寸,320 x 568个点,需要兼容iPhone 6 Plus,就使用3x的模式。这样方便将图片放进手机里面看实际的效果。有多个测试机,就选较大的,之后再进行一些细调。假如支持iPhone 6 Plus的横屏模式,需要另外处理。9、上面说的是应用的处理方式,游戏会有些特殊。现在很多游戏,按照1136 x 768的像素尺寸来设计场景,这样可以同时兼容iPad和iPhone,并只使用一份图。iPad 1x模式下尺寸是1024 x 768像素,iPhone 6在2x模式下,是1136 * 640。这种尺寸,可以简单将场景居中显示,各自将场景拉伸到最大。NSLayoutConstraint-代码实现自动布局的函数用法说明 
1234567
[NSLayoutConstraint
constraintWithItem:(id)item
                             
attribute:(NSLayoutAttribute)attribute
                             
relatedBy:(NSLayoutRelation)relation
                                
toItem:(id)otherItem
                             
attribute:(NSLayoutAttribute)otherAttribute
                            
multiplier:(CGFloat)multiplier
                              
constant:(CGFloat)constant]
参数说明:第一个参数:指定约束左边的视图view1第二个参数:指定view1的属性attr1,具体属性见文末。第三个参数:指定左右两边的视图的关系relation,具体关系见文末。第四个参数:指定约束右边的视图view2第五个参数:指定view2的属性attr2,具体属性见文末。第六个参数:指定一个与view2属性相乘的乘数multiplier第七个参数:指定一个与view2属性相加的浮点数constant这个函数的对照公式为:view1.attr1 <relation> view2.attr2 * multiplier + constant注意:1.如果你想设置的约束里不需要第二个view,要将第四个参数设为nil,第五个参数设为NSLayoutAttributeNotAnAttribute举例:
1234567
[NSLayoutConstraint
constraintWithItem:view1
                             
attribute:NSLayoutAttributeLeft
                             
relatedBy:NSLayoutRelationEqual
                                
toItem:view2
                             
attribute:NSLayoutAttributeRight
                            
multiplier:1
                              
constant:10]
翻译过来就是:view1的左侧,在,view2的右侧,再多10个点,的地方。附视图的属性和关系的值:
1234567891011121314151617181920
typedef
 
NS_ENUM(NSInteger,
NSLayoutRelation) 
{
    
NSLayoutRelationLessThanOrEqual
= -1,          
//小于等于
    
NSLayoutRelationEqual
= 0,                     
//等于
    
NSLayoutRelationGreaterThanOrEqual
= 1,        
//大于等于
};
typedef
 
NS_ENUM(NSInteger,NSLayoutAttribute) {
    
NSLayoutAttributeLeft= 1,                     
//左侧
    
NSLayoutAttributeRight,                        
//右侧
    
NSLayoutAttributeTop,                          
//上方
    
NSLayoutAttributeBottom,                       
//下方
    
NSLayoutAttributeLeading,                      
//首部
    
NSLayoutAttributeTrailing,                     
//尾部
    
NSLayoutAttributeWidth,                        
//宽度
    
NSLayoutAttributeHeight,                       
//高度
    
NSLayoutAttributeCenterX,                      
//X轴中心
    
NSLayoutAttributeCenterY,                      
//Y轴中心
    
NSLayoutAttributeBaseline,                     
//文本底标线
                                                                                                                                                   
 
    
NSLayoutAttributeNotAnAttribute= 0            
//没有属性
};
NSLayoutAttributeLeft
/
NSLayoutAttributeRight
 和
NSLayoutAttributeLeading
/
NSLayoutAttributeTrailing
的区别是left/right永远是指左右,而leading/trailing在某些从右至左习惯的地区会变成,leading是右边,trailing是左边。屏幕兼容的问题为了让我们的应用在不容尺寸的屏幕下都能 “正常”的表示,我们尽量不要把数据写死。大多数可视元素都是一个矩形区域,当然这个矩形区域有坐标的,我们有了这个区域坐标就能确定可视元素的现实位置了。但是iphone5 和以前的屏幕不一样了,在以前的设备中,我们可以添加一个 xx.@2x.png 来适应retina屏幕,但是iphoen5咋办呢?ios 引入了 Auto Layout 的东东,这个要和UIViewAutoresizing 区分下。看下面代码- (void)viewDidLoad{    [super viewDidLoad];            UIView *aView = [[UIView alloc] init];    aView.backgroundColor = [UIColor redColor];//为了不和autosizing冲突,我们设置No    [aView setTranslatesAutoresizingMaskIntoConstraints:NO];    [self.view addSubview:aView];        UIView *bView = [[UIView alloc] init];    bView.backgroundColor = [UIColor blueColor];    [bView setTranslatesAutoresizingMaskIntoConstraints:NO];    [self.view addSubview:bView];        NSDictionary *views = NSDictionaryOfVariableBindings(aView, bView);//NSDictionaryOfVariableBindings  宏  其实 NSDictionaryOfVariableBindings(v1, v2, v3) 等效于 [NSDictionary dictionaryWithObjectsAndKeys:v1, @"v1", v2, @"v2", v3, @"v3", nil];        [self.view addConstraints:    [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(>=50)-[aView(100)]"                                             options:0                                             metrics:nil                                               views:views]];        [self.view addConstraints:     [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(>=100)-[aView(50)]"                                             options:0                                             metrics:nil                                               views:views]];       [self.view addConstraints:     [NSLayoutConstraint constraintsWithVisualFormat:@"H:[bView(==aView)]"                                             options:0                                             metrics:nil                                               views:views]];    [self.view addConstraints:     [NSLayoutConstraint constraintsWithVisualFormat:@"V:[bView(==aView)]"                                             options:0                                             metrics:nil                                               views:views]];        [self.view addConstraint:     [NSLayoutConstraint constraintWithItem:bView                                  attribute:NSLayoutAttributeLeft                                  relatedBy:NSLayoutRelationEqual                                     toItem:aView                                  attribute:NSLayoutAttributeRight                                 multiplier:1                                   constant:10]];    //添加一个限制  等效于 bView.frame.origin.x  = (aView.frame.origin.x +aView.frame.size.width)  * 1  + 10,好像是这样的!个人觉得!  它是一种依赖关系,bView依赖aView,这样就算aView变了,bView也会跟着变换。    [self.view addConstraint:     [NSLayoutConstraint constraintWithItem:bView                                  attribute:NSLayoutAttributeTop                                  relatedBy:NSLayoutRelationEqual                                     toItem:aView                                  attribute:NSLayoutAttributeTop                                 multiplier:1                                   constant:0]];        [aView release];    [bView release];}

constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:

Create a constraint of the form "view1.attr1 <relation> view2.attr2 * multiplier + constant".属性最后的结果就是 “view1.attr1  <       >=    或者 ==   或者    <=       >  view2.attr2 * multiplier + constant”   这个博客写的也比较好:   http://www.cnblogs.com/warrior/p/3630372.html   另一个例子:    UIView *view1 = [[UIView alloc] init];    UIView *view2 = [[UIView alloc] init];    [self.view addSubview:view1];    [self.view addSubview:view2];    view1.translatesAutoresizingMaskIntoConstraints = NO;    view2.translatesAutoresizingMaskIntoConstraints = NO;    view1.backgroundColor = [UIColor blueColor];    view2.backgroundColor = [UIColor grayColor];        //set view1 height and width10    [view1 addConstraint:[NSLayoutConstraint                          constraintWithItem:view1                          attribute:NSLayoutAttributeWidth                          relatedBy:NSLayoutRelationEqual                          toItem:nil                          attribute:NSLayoutAttributeNotAnAttribute                          multiplier:1                          constant:100]];        [view1 addConstraint:[NSLayoutConstraint                          constraintWithItem:view1                          attribute:NSLayoutAttributeHeight                          relatedBy:NSLayoutRelationEqual                          toItem:nil                          attribute:NSLayoutAttributeNotAnAttribute                          multiplier:1                          constant:100]];        //set relationship between topView and view119    [self.view addConstraint:[NSLayoutConstraint                              constraintWithItem:view1                              attribute:NSLayoutAttributeLeft                              relatedBy:NSLayoutRelationEqual                              toItem:self.view                              attribute:NSLayoutAttributeLeading                              multiplier:1                              constant:50]];        [self.view addConstraint:[NSLayoutConstraint                              constraintWithItem:view1                              attribute:NSLayoutAttributeCenterY                              relatedBy:NSLayoutRelationEqual                              toItem:self.view                              attribute:NSLayoutAttributeCenterY                              multiplier:1                              constant:0]];           //set view2 height and width13    [self.view addConstraint:[NSLayoutConstraint                              constraintWithItem:view2                              attribute:NSLayoutAttributeWidth                              relatedBy:NSLayoutRelationEqual                              toItem:view1                              attribute:NSLayoutAttributeWidth                              multiplier:1                              constant:0]];        [self.view addConstraint:[NSLayoutConstraint                              constraintWithItem:view2                              attribute:NSLayoutAttributeHeight                              relatedBy:NSLayoutRelationEqual                              toItem:view1                              attribute:NSLayoutAttributeHeight                              multiplier:1                              constant:0]];            //set relationship between view1 and view216    [self.view addConstraint:[NSLayoutConstraint                              constraintWithItem:view2                              attribute:NSLayoutAttributeLeft                              relatedBy:NSLayoutRelationEqual                              toItem:view1                              attribute:NSLayoutAttributeRight                              multiplier:1                              constant:100]];        [self.view addConstraint:[NSLayoutConstraint                              constraintWithItem:view1                              attribute:NSLayoutAttributeCenterY                              relatedBy:NSLayoutRelationEqual                              toItem:view2                              attribute:NSLayoutAttributeCenterY                              multiplier:1                              constant:0]];
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: