iOS 7: 将屏幕分成 x 个相同大小的元素,这些元素水平并排排列
iOS 7: Divide screen in x elements of same size, which are organized horizontally side by side
我想在屏幕上并排显示七个相同大小的项目。我的代码确实适用于 iOS 8 但不适用于 iOS 7.
这是我的代码:
View.BackgroundColor = UIColor.Black;
UILabel label1 = new UILabel ();
UILabel label2 = new UILabel ();
UILabel label3 = new UILabel ();
UILabel label4 = new UILabel ();
UILabel label5 = new UILabel ();
UILabel label6 = new UILabel ();
UILabel label0 = new UILabel ();
label1.TranslatesAutoresizingMaskIntoConstraints = false;
label2.TranslatesAutoresizingMaskIntoConstraints = false;
label3.TranslatesAutoresizingMaskIntoConstraints = false;
label4.TranslatesAutoresizingMaskIntoConstraints = false;
label5.TranslatesAutoresizingMaskIntoConstraints = false;
label6.TranslatesAutoresizingMaskIntoConstraints = false;
label0.TranslatesAutoresizingMaskIntoConstraints = false;
UIView container1 = new UIView ();
container1.BackgroundColor = UIColor.Yellow;
container1.TranslatesAutoresizingMaskIntoConstraints = false;
container1.AddSubview (label1);
UIView container2 = new UIView ();
container2.BackgroundColor = UIColor.Red;
container2.TranslatesAutoresizingMaskIntoConstraints = false;
container2.AddSubview (label2);
UIView container3 = new UIView ();
container3.BackgroundColor = UIColor.Gray;
container3.TranslatesAutoresizingMaskIntoConstraints = false;
container3.AddSubview (label3);
UIView container4 = new UIView ();
container4.BackgroundColor = UIColor.Green;
container4.TranslatesAutoresizingMaskIntoConstraints = false;
container4.AddSubview (label4);
UIView container5 = new UIView ();
container5.BackgroundColor = UIColor.Blue;
container5.TranslatesAutoresizingMaskIntoConstraints = false;
container5.AddSubview (label5);
UIView container6 = new UIView ();
container6.BackgroundColor = UIColor.Brown;
container6.TranslatesAutoresizingMaskIntoConstraints = false;
container6.AddSubview (label6);
UIView container0 = new UIView ();
container0.BackgroundColor = UIColor.Orange;
container0.TranslatesAutoresizingMaskIntoConstraints = false;
container0.AddSubview (label0);
View.AddSubviews (new UIView[] {
container1, container2, container3, container4, container5, container6, container0
});
NSMutableDictionary viewsDictionary = new NSMutableDictionary ();
viewsDictionary ["container1"] = container1;
viewsDictionary ["container2"] = container2;
viewsDictionary ["container3"] = container3;
viewsDictionary ["container4"] = container4;
viewsDictionary ["container5"] = container5;
viewsDictionary ["container6"] = container6;
viewsDictionary ["container0"] = container0;
viewsDictionary ["label1"] = label1;
viewsDictionary ["label2"] = label2;
viewsDictionary ["label3"] = label3;
viewsDictionary ["label4"] = label4;
viewsDictionary ["label5"] = label5;
viewsDictionary ["label6"] = label6;
viewsDictionary ["label0"] = label0;
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("V:|[label1]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("V:|[label2]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("V:|[label3]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("V:|[label4]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("V:|[label5]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("V:|[label6]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("V:|[label0]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("H:|[label1]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("H:|[label2]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("H:|[label3]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("H:|[label4]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("H:|[label5]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("H:|[label6]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("H:|[label0]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("V:|[container1]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("V:|[container2]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("V:|[container3]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("V:|[container4]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("V:|[container5]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("V:|[container6]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("V:|[container0]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints(NSLayoutConstraint.FromVisualFormat("H:|-0-[container1][container2(==container1)][container3(==container1)][container4(==container1)][container5(==container1)][container6(==container1)][container0(==container1)]-0-|",(NSLayoutFormatOptions)0,null,viewsDictionary));
代码是用 C# 编写的,但它不应该打扰您。您应该能够阅读视觉格式语言。如您所见,我有七个 UIView
上面有一个标签。没有标签,代码在 iOS 7 上工作正常。效果发生在 iPhone 和 iPad:
如您所见,右侧有一个黑条。这是引入的错误(可能是舍入问题?)。根本不应该有黑色space。
我试图计算 layoutSubviews
和 updateConstraints
中视图的大小,但我从来没有在没有其他错误的情况下工作。
如何为 iOS 7 正确设置约束?应该清楚的是,这应该适用于每个方向。
编辑:
iPad 的屏幕横向宽度为 1024 点。如果将其除以七,您将得到 146,2857。因此,如果前六个元素的宽度为 146,则第七个元素的宽度应为 148。现在的问题是我的约束定义所有视图应具有相同的宽度,这是不可能的。黑条来自超级视图(添加了我所有视图的 UIView),由其余两点组成。这只发生在 iOS 7 并且如果我向容器添加标签。我还尝试设置一个 spacer 元素,但我没有设法让 spacer 元素获得两点的剩余宽度。
编辑 2:
recursiveDescription
在 viewDidAppear
:
<UIWindow: 0x7b5f2f60; frame = (0 0; 768 1024); autoresize = W+H; gestureRecognizers = <NSArray: 0x7b5f3160>; layer = <UIWindowLayer: 0x7b5f2cd0>>
| <UIView: 0x7b4faf40; frame = (0 0; 768 1024); transform = [0, -1, 1, 0, 0, 0]; autoresize = W+H; layer = <CALayer: 0x7b4fa800>>
| | <_UILayoutGuide: 0x7b4fafa0; frame = (0 0; 0 20); hidden = YES; layer = <CALayer: 0x7b4fb050>>
| | <_UILayoutGuide: 0x7b4fb280; frame = (0 768; 0 0); hidden = YES; layer = <CALayer: 0x7b4fb370>>
| | <UIView: 0x7b4196e0; frame = (0 0; 146 768); layer = <CALayer: 0x7b4195e0>>
| | | <UILabel: 0x7b41bf10; frame = (0 0; 146 768); userInteractionEnabled = NO; layer = <CALayer: 0x7b4fb6d0>>
| | <UIView: 0x7b4192c0; frame = (146 0; 146 768); layer = <CALayer: 0x7b4190b0>>
| | | <UILabel: 0x7b41a1d0; frame = (0 0; 146 768); userInteractionEnabled = NO; layer = <CALayer: 0x7b41a1a0>>
| | <UIView: 0x7b4189e0; frame = (292 0; 146 768); layer = <CALayer: 0x7b418e60>>
| | | <UILabel: 0x7b419ff0; frame = (0 0; 146 768); userInteractionEnabled = NO; layer = <CALayer: 0x7b419fc0>>
| | <UIView: 0x7b418570; frame = (438 0; 146 768); layer = <CALayer: 0x7b4184f0>>
| | | <UILabel: 0x7b419e10; frame = (0 0; 146 768); userInteractionEnabled = NO; layer = <CALayer: 0x7b419de0>>
| | <UIView: 0x7b4186c0; frame = (584 0; 146 768); layer = <CALayer: 0x7b418230>>
| | | <UILabel: 0x7b419c30; frame = (0 0; 146 768); userInteractionEnabled = NO; layer = <CALayer: 0x7b419c00>>
| | <UIView: 0x7b418050; frame = (730 0; 146 768); layer = <CALayer: 0x7b4180b0>>
| | | <UILabel: 0x7b419a50; frame = (0 0; 146 768); userInteractionEnabled = NO; layer = <CALayer: 0x7b419a20>>
| | <UIView: 0x7b417d70; frame = (876 0; 146 768); layer = <CALayer: 0x7b417dd0>>
| | | <UILabel: 0x7b419870; frame = (0 0; 146 768); userInteractionEnabled = NO; layer = <CALayer: 0x7b419840>>
可以看到每个视图的宽度都是 146 点。剩下的 2 分会怎样?该如何应对?
可能的解决方案?
现在我把整个东西放到一个子视图中,因为我的真实项目使用它作为子视图,我让它为视图控制器工作而不是子视图(多次尝试)。首先我遇到了同样的问题,但是当我在 UILabel
约束 iOS 之后为 容器 设置约束时,现在可以正确渲染它。代码与上面的代码几乎相同。不知道我是否可以调用此解决方案,因为我无法相信。
同一个方法中添加约束的顺序好像很重要!
我修复了一些问题,但它们又出现在另一边。现在我切换到一种全新的方法:UICollectionView
。这里也有一些缺陷(有时你必须手动调用 invalidateLayout
,但我已经习惯了),但唯一能够不破坏 iOS 上完整布局的一个 7. 我使用自定义 UICollectionViewFlowLayout
,我自己计算尺寸。我将屏幕除以 7(包括舍入),最后一个元素使用剩余的 space。因为布局现在是准确的,所以我没有任何舍入问题。
现在我可以毫无问题地将屏幕分成七块!现在有一些开销,但这是解决 iOS 7.
中错误的唯一方法
我想在屏幕上并排显示七个相同大小的项目。我的代码确实适用于 iOS 8 但不适用于 iOS 7.
这是我的代码:
View.BackgroundColor = UIColor.Black;
UILabel label1 = new UILabel ();
UILabel label2 = new UILabel ();
UILabel label3 = new UILabel ();
UILabel label4 = new UILabel ();
UILabel label5 = new UILabel ();
UILabel label6 = new UILabel ();
UILabel label0 = new UILabel ();
label1.TranslatesAutoresizingMaskIntoConstraints = false;
label2.TranslatesAutoresizingMaskIntoConstraints = false;
label3.TranslatesAutoresizingMaskIntoConstraints = false;
label4.TranslatesAutoresizingMaskIntoConstraints = false;
label5.TranslatesAutoresizingMaskIntoConstraints = false;
label6.TranslatesAutoresizingMaskIntoConstraints = false;
label0.TranslatesAutoresizingMaskIntoConstraints = false;
UIView container1 = new UIView ();
container1.BackgroundColor = UIColor.Yellow;
container1.TranslatesAutoresizingMaskIntoConstraints = false;
container1.AddSubview (label1);
UIView container2 = new UIView ();
container2.BackgroundColor = UIColor.Red;
container2.TranslatesAutoresizingMaskIntoConstraints = false;
container2.AddSubview (label2);
UIView container3 = new UIView ();
container3.BackgroundColor = UIColor.Gray;
container3.TranslatesAutoresizingMaskIntoConstraints = false;
container3.AddSubview (label3);
UIView container4 = new UIView ();
container4.BackgroundColor = UIColor.Green;
container4.TranslatesAutoresizingMaskIntoConstraints = false;
container4.AddSubview (label4);
UIView container5 = new UIView ();
container5.BackgroundColor = UIColor.Blue;
container5.TranslatesAutoresizingMaskIntoConstraints = false;
container5.AddSubview (label5);
UIView container6 = new UIView ();
container6.BackgroundColor = UIColor.Brown;
container6.TranslatesAutoresizingMaskIntoConstraints = false;
container6.AddSubview (label6);
UIView container0 = new UIView ();
container0.BackgroundColor = UIColor.Orange;
container0.TranslatesAutoresizingMaskIntoConstraints = false;
container0.AddSubview (label0);
View.AddSubviews (new UIView[] {
container1, container2, container3, container4, container5, container6, container0
});
NSMutableDictionary viewsDictionary = new NSMutableDictionary ();
viewsDictionary ["container1"] = container1;
viewsDictionary ["container2"] = container2;
viewsDictionary ["container3"] = container3;
viewsDictionary ["container4"] = container4;
viewsDictionary ["container5"] = container5;
viewsDictionary ["container6"] = container6;
viewsDictionary ["container0"] = container0;
viewsDictionary ["label1"] = label1;
viewsDictionary ["label2"] = label2;
viewsDictionary ["label3"] = label3;
viewsDictionary ["label4"] = label4;
viewsDictionary ["label5"] = label5;
viewsDictionary ["label6"] = label6;
viewsDictionary ["label0"] = label0;
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("V:|[label1]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("V:|[label2]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("V:|[label3]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("V:|[label4]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("V:|[label5]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("V:|[label6]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("V:|[label0]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("H:|[label1]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("H:|[label2]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("H:|[label3]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("H:|[label4]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("H:|[label5]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("H:|[label6]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("H:|[label0]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("V:|[container1]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("V:|[container2]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("V:|[container3]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("V:|[container4]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("V:|[container5]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("V:|[container6]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints (NSLayoutConstraint.FromVisualFormat ("V:|[container0]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints(NSLayoutConstraint.FromVisualFormat("H:|-0-[container1][container2(==container1)][container3(==container1)][container4(==container1)][container5(==container1)][container6(==container1)][container0(==container1)]-0-|",(NSLayoutFormatOptions)0,null,viewsDictionary));
代码是用 C# 编写的,但它不应该打扰您。您应该能够阅读视觉格式语言。如您所见,我有七个 UIView
上面有一个标签。没有标签,代码在 iOS 7 上工作正常。效果发生在 iPhone 和 iPad:
如您所见,右侧有一个黑条。这是引入的错误(可能是舍入问题?)。根本不应该有黑色space。
我试图计算 layoutSubviews
和 updateConstraints
中视图的大小,但我从来没有在没有其他错误的情况下工作。
如何为 iOS 7 正确设置约束?应该清楚的是,这应该适用于每个方向。
编辑:
iPad 的屏幕横向宽度为 1024 点。如果将其除以七,您将得到 146,2857。因此,如果前六个元素的宽度为 146,则第七个元素的宽度应为 148。现在的问题是我的约束定义所有视图应具有相同的宽度,这是不可能的。黑条来自超级视图(添加了我所有视图的 UIView),由其余两点组成。这只发生在 iOS 7 并且如果我向容器添加标签。我还尝试设置一个 spacer 元素,但我没有设法让 spacer 元素获得两点的剩余宽度。
编辑 2:
recursiveDescription
在 viewDidAppear
:
<UIWindow: 0x7b5f2f60; frame = (0 0; 768 1024); autoresize = W+H; gestureRecognizers = <NSArray: 0x7b5f3160>; layer = <UIWindowLayer: 0x7b5f2cd0>>
| <UIView: 0x7b4faf40; frame = (0 0; 768 1024); transform = [0, -1, 1, 0, 0, 0]; autoresize = W+H; layer = <CALayer: 0x7b4fa800>>
| | <_UILayoutGuide: 0x7b4fafa0; frame = (0 0; 0 20); hidden = YES; layer = <CALayer: 0x7b4fb050>>
| | <_UILayoutGuide: 0x7b4fb280; frame = (0 768; 0 0); hidden = YES; layer = <CALayer: 0x7b4fb370>>
| | <UIView: 0x7b4196e0; frame = (0 0; 146 768); layer = <CALayer: 0x7b4195e0>>
| | | <UILabel: 0x7b41bf10; frame = (0 0; 146 768); userInteractionEnabled = NO; layer = <CALayer: 0x7b4fb6d0>>
| | <UIView: 0x7b4192c0; frame = (146 0; 146 768); layer = <CALayer: 0x7b4190b0>>
| | | <UILabel: 0x7b41a1d0; frame = (0 0; 146 768); userInteractionEnabled = NO; layer = <CALayer: 0x7b41a1a0>>
| | <UIView: 0x7b4189e0; frame = (292 0; 146 768); layer = <CALayer: 0x7b418e60>>
| | | <UILabel: 0x7b419ff0; frame = (0 0; 146 768); userInteractionEnabled = NO; layer = <CALayer: 0x7b419fc0>>
| | <UIView: 0x7b418570; frame = (438 0; 146 768); layer = <CALayer: 0x7b4184f0>>
| | | <UILabel: 0x7b419e10; frame = (0 0; 146 768); userInteractionEnabled = NO; layer = <CALayer: 0x7b419de0>>
| | <UIView: 0x7b4186c0; frame = (584 0; 146 768); layer = <CALayer: 0x7b418230>>
| | | <UILabel: 0x7b419c30; frame = (0 0; 146 768); userInteractionEnabled = NO; layer = <CALayer: 0x7b419c00>>
| | <UIView: 0x7b418050; frame = (730 0; 146 768); layer = <CALayer: 0x7b4180b0>>
| | | <UILabel: 0x7b419a50; frame = (0 0; 146 768); userInteractionEnabled = NO; layer = <CALayer: 0x7b419a20>>
| | <UIView: 0x7b417d70; frame = (876 0; 146 768); layer = <CALayer: 0x7b417dd0>>
| | | <UILabel: 0x7b419870; frame = (0 0; 146 768); userInteractionEnabled = NO; layer = <CALayer: 0x7b419840>>
可以看到每个视图的宽度都是 146 点。剩下的 2 分会怎样?该如何应对?
可能的解决方案?
现在我把整个东西放到一个子视图中,因为我的真实项目使用它作为子视图,我让它为视图控制器工作而不是子视图(多次尝试)。首先我遇到了同样的问题,但是当我在 UILabel
约束 iOS 之后为 容器 设置约束时,现在可以正确渲染它。代码与上面的代码几乎相同。不知道我是否可以调用此解决方案,因为我无法相信。
同一个方法中添加约束的顺序好像很重要!
我修复了一些问题,但它们又出现在另一边。现在我切换到一种全新的方法:UICollectionView
。这里也有一些缺陷(有时你必须手动调用 invalidateLayout
,但我已经习惯了),但唯一能够不破坏 iOS 上完整布局的一个 7. 我使用自定义 UICollectionViewFlowLayout
,我自己计算尺寸。我将屏幕除以 7(包括舍入),最后一个元素使用剩余的 space。因为布局现在是准确的,所以我没有任何舍入问题。
现在我可以毫无问题地将屏幕分成七块!现在有一些开销,但这是解决 iOS 7.
中错误的唯一方法