Autolayout:原点和大小应根据宽度和高度因素而改变

这是我需要的一个场景。

我已经在IB(尺寸iPhone4英寸)上放置了一个UIButton,其IB上的初始帧是x:100,y:100,w:100,h:100 。 我想要根据设备大小来改变原点和高度。 例如iPhone6的宽度和高度是375X667,因此宽度因子(375/320 = 1.1718)和高度因子(667/568 = 1.1742) 。 在这个场景中,我想通过乘以宽度因子(1.1718)和原点Y和高度乘以高度因子(1.1782)来更改我的button原点X和宽度。 在这种情况下,我的button应显示在x:100X1.1718,y:100X1.1742,w:100X1.1718,h:100X1.1742

iPhone6 +也需要同样的东西。

在这里输入图像说明

我可以通过设置这个自动调整掩码来轻松实现。 我怎样才能达到相同的使用自动布局? 我应该遵循什么步骤,我应该适用什么限制?

我以前的这个问题

我附上了一些截图,我需要使用Autolayout(上图中显示的自动修复掩码实现)。

我附上一些截图,我需要使用自动调整。

在这里输入图像说明

在这里输入图像说明

在这里输入图像说明

我的尝试: –

第一步: – 在IB上取一个尺寸为100X100的button。 设置其X = 100和Y = 100。 在这里输入图像说明 第二步: – 应用这个约束。 在这里输入图像说明在这里输入图像说明在这里输入图像说明在这里输入图像说明在这里输入图像说明

作为你的问题之前,你可以设置这个约束到你的UIButton。


您不需要更改您为UIButton的高度和宽度设置的约束。


1.)您需要将水平空间设置为Button.LeadingSuperview.Trailing

设置常量= 0优先级= 1000乘数= 100:320,因为我已经在下面的图像设置。

在这里输入图像说明


2.)您需要将水平空间设置为Button.TopSuperview.Bottom

设置常量= 0优先级= 1000乘数= 100:568,因为我已经在下面的图像设置。

在这里输入图像说明


结果


在这里输入图像说明

在这里输入图像说明

在这里输入图像说明

希望这可以解决你的问题。

使用约束的乘数。 因此,build立一个约束,button的宽度等于顶视图的宽度乘以100:320(您可以使用这个比率forms来表示乘数)。 将约束条件的常量设置为0.button的高度与顶视图高度(比率100:568)成比例。 对于button的位置,将button的顶部视图的宽度限制为100:320,button的顶部到顶部视图的高度的比率为100:568。

如果您想要在故事板(或XIB)中完全执行此操作,则需要使用间隔视图。

首先,在根视图的左上angular放置一个间隔视图。 将其顶部和左侧边缘限制为距离超级视图为零。 将其宽度限制为100:320到其超视图宽度(并确保约束的第一项是间隔符)。 将其高度限制在100:568的高度。 这些宽度和高度约束将控制button的位置。

现在,将button的顶边限制在隔离件的底部边缘,并将button的左边缘限制在隔离件的右边缘。 创buildbutton和超级视图之间的比例宽度和高度约束。

将spacer视图设置为隐藏。 隐藏的视图不可见,不会触及,但仍然参与布局。

…如果你想在代码中做到这一点,只需使用autoresizing掩码,并将translatesAutoresizingMaskIntoConstraints设置为YES

对于高度和宽度,在Interface Builder中创build一个“长宽比”约束,将button链接到超级视图。 没有宽高比的属性; 它将在创build时使用这些值来设置乘数(如果iPhone <= 5宽度,并将超级视图链接到button宽度,它将是320:100)。 为连接button高度和超级视图高度的纵横比添加第二个约束(如果您不希望高度与iPhone 5一起伸展,则可以将button纵横比与自身链接)。

对于起源,我不认为有一种方法来链接视图的来源和视图的大小。 要根据屏幕大小将原点设置为任意高度或宽度,您需要创build一个间隔视图。 不雅,但必要。 添加视图并将其设置为隐藏状态(并将其命名为左侧的对象轮廓,在IB中处理自动布局时,您可能需要处理所有事情以使约束可读,但在此处可以轻松find) 。 将创build约束设置为零,将其链接到button和顶部布局指南,并将其设置为superview.leading和button引导。

要调整间距,可以创build宽高比约束,同时设置超视图宽度和超视图高度,或者将其设置为等于button的宽度和高度。

试试这个解决scheme

  1. 设置视图顶部alignment到supercenterY并设置乘数84:240
  2. 将视图左alignment设置为超级中心X并将乘数设置为100:160
  3. 用倍数100:320和比例高度100:568设置比例宽度

反映以上财产的形象将左对齐到superview centerX

顶部到超级景观中心Y

希望这可以解决你的问题

您可以使用2个帮手视图在IB中完成所有工作。 Top helperLeft Helper 。 其余的就是设置它,使每个高度和宽度与视图的大小成正比。 我设置了一个例子。 这里有几个截图和不同的视图大小。

在这里输入图像说明在这里输入图像说明