带有多个标签的UITableViewCell AutoLayout

时间:2015-07-03 06:21:14

标签: ios objective-c xcode uitableview autolayout

我正在尝试在UITableViewCell中使用AutoLayout,其中多个标签包含百分比计算。我希望标签之间的空间相等但宽度不同。此外,纵向和宽度的宽度和空间也不同。横向模式如下图所示。

Protrait Display

Landscape Display

我希望空间在纵向中为4,在横向中为8。

在肖像中 标签1宽度 - 50% Label2宽度 - 20% Label3宽度 - 30%

在风景中 标签1宽度 - 50% Label2宽度 - 15% Label3宽度 - 20% Label4宽度 - 15%

我使用了水平间距以及顶部和底部约束,但它没有产生适当的宽度和宽度。空间对齐。第一行也是标题,所以它不应该有披露指标,剩下的行应该有它。任何帮助,将不胜感激。

注意:它是一个通用的应用程序,我在iPad中使用splitview。在肖像中,它应该显示3个标签,如在iPhone和横向中,它应该显示如上所述的4个标签。此外,我的主视图控制器始终可见。

5 个答案:

答案 0 :(得分:1)

由于尺寸等级不区分纵向iPad和横向iPad,因此不能使用尺寸等级。您可以在xib中定义所需的所有约束,如下所示

  1. 定义标签之间的空间约束,并在视图类中为它创建IBOutlet,让它命名为“gapConstraint”。

  2. 定义每个标签宽度的约束,该约束与superview的宽度成比例,例如:更大的标签约束将是更大的标签。宽度= superView.width * 0.5。

  3. 对于您需要纵向和横向不同宽度的标签,请为宽度定义两个约束(每个方向一个)并将一个约束的优先级设置为750(高 - 比如肖像)和其他约束500(低 - 让我们说景观)。为所有这些约束创建出口。我们需要为每个标签定义两个宽度约束(一个用于纵向,一个用于横向),因为NSLayoutConstraint的乘数属性是只读的,因此一旦分配了乘数,我们就无法更改其值。为了解决这个问题,我们定义了两个约束,并且在基于方向的代码中,我们将通过更改优先级来激活更合适的约束。

  4. 覆盖UpdateConstraints方法,在此方法中,您可以检查当前的设备方向。如果设备方向是纵向更改,则gapConstraint(在point1中创建)常量值为4,而在横向中,将gapConstraint(在point1中创建)常量值更改为8.对于标签宽度;在纵向方向上,将纵向宽度约束的优先级更改为750,并将横向宽度约束的优先级降低到500,而在横向方向上,将纵向宽度约束的优先级更改为500,同时将横向宽度约束的优先级提高到750。

答案 1 :(得分:0)

您可以通过以下方式实现所需的布局

方法1:使用VFL

  1. 每当更改设备的方向时,您的tableview会自动重新加载,因此将调用cellForRowIndexPath函数。
  2. 检查cellForRowIndexPath中的设备方向 3.删除所有子视图及其约束 4.使用VFL再次使用所需规范添加所有子视图。
  3. 方法2:使用不同的自定义UItableViewCell

    您可以为每个方向使用不同的自定义UItableviewCell。

答案 2 :(得分:-1)

首先我们讨论的问题是你想要画像中的空间4和LandScape中的8。

如果您非常了解尺寸等级然后使用它们,请从故事板的底部选择所需的尺寸等级(纵向模式中使用的尺寸等级)您可以使用尺寸等级"紧凑宽度常规高度& #34;在纵向模式下设置所有Iphone的约束。

现在在按钮之间设置水平间距约束,在放置水平间距约束后,您可以从不需要此约束的大小类中禁用它,即在横向模式中使用的那些大小类。

要禁用任何大小类的特定约束,只需选择该约束,然后在属性检查器中,您将看到一个名为" Installed"的复选框。这意味着为此大小类启用了此约束。默认情况下,"已安装"用于" Any Any" size类,表示此约束适用于所有大小类,只需取消选中该复选框。

在"已安装"的左侧checkBox有一个图标" +"它可以帮助您启用或禁用特定大小类的约束,因此从该图标中选择所需的大小类并检查该大小类的checkBox。参见Image1 enter image description here

现在为横向添加另一个水平间距约束,并从" Any Any"中禁用它。 size类和启用它为Any Width,Compact Height在Landscape中表示iphone,现在你添加了两个相同的约束,其中不同的常量适用于不同的情况(一个是纵向,另一个是Landscape)。

现在针对您希望标签大小成比例的实际问题。现在就像约束一样,您可以为不同大小的类启用或禁用视图,因此在故事板上拖动四个标签并禁用第四个标签以获得" Compact Width regular Height"大小等级。

要启用或禁用特定尺寸类别的视图,请选择标签,然后使用相同的"已安装" attributerted inspector中的复选框,并禁用" Compact Width regular Height"的第四个标签。大小等级。

现在唯一剩下的就是你想为横向和纵向设置不同的宽度。为此,我们必须为每个标签设置两个宽度约束(只有第四个标签有一个宽度约束),一个用于纵向,另一个用于横向。

现在根据需要为肖像的每个标签设置宽度约束,并仅为" Compact Width regular Height"设置这些约束。大小等级。所以他们只能在肖像中工作。

现在从storty board的底部将尺寸等级更改为" Regular Width Compact height"并且这次使用不同的常量再次将宽度约束放在标签上。您将观察到的一件事是,这次您可以为第四个标签设置约束,因为此标签仅在此尺寸类中可见。

就是这样:)希望这会对你有所帮助,告诉我这是否有效。

答案 3 :(得分:-1)

附加代码是您在iPhone中解决问题的方法。它的工作方式与iPhone在纵向和横向模式下提到的问题完全相同。您可以在iPad中为拆分视图更新此逻辑。如果您发现任何问题,请在此处发表评论。

iOS 8中的大小类按照以下逻辑解决了这个问题。

1)添加总宽度的参考视图(黄色视图) - 标签之间的总空间

根据您在上面提到的问题,您希望按照单元格宽度添加标签。所以,你需要。参考宽度,因为您不能使用contentView作为参考。所以我们必须在我的演示代码中为这个黄色视图添加一个额外的视图。额外的空间用于管理间距黑白标签。

2)然后通过乘数

为参考视图指定相等的宽度

现在你需要。第一个标签的宽度为50%,因此使用乘法器逻辑可以实现它。 例如,如果您想要100px第一个标签,那么设置"参考。视图"宽度200。 同样的方式我管理其他标签到20%和30%的宽度比率参考。图。

3)对于纵向模式,为纵向尺寸类添加一个约束

在纵向模式下,你需要。只有3个标签,所以使用size class将第4个标签的宽度指定为0。

这一切都在代码

之下完成

查看我的代码大小等级

Download

答案 4 :(得分:-1)

在UITableViewCell中具有相等的间距,您可以添加视图b / w标签,然后将constarint设置为所有标签的宽度和高度相同。

in potrait in the landscape