MVVMCross FluentLayout 水平间距相等

Question

我正在 MVVMCross 中使用 Cirrious.FluentLayout 创建一个 TableCell 以添加约束。
我已经向 ContentView 添加了四张图片，并且不得不通过计算构造函数中的边距手动 space 将它们（水平）移除

var gap = (ContentView.Frame.Width - (imagesize * 3) - 40) /6;

然后我使用计算出的间隙作为约束

        _signalStrength.ToRightOf(_batteryLevel, gap),
        _childLockImage.ToRightOf(_signalStrength, gap),

目前这可以正常工作，因为应用程序只能在纵向模式下运行，但我担心如果我们启用横向模式那么这将无法工作。

是否有更好的方法让这些图像在 table 单元格中均匀分布？

Answer 1

我建议您 use a UIStackView 在水平模式下等间距分布。 UIStackView 是在 iOS 9 中添加的，它确实有助于解决这些情况并消除对大量约束的需求。

在你的例子中，有 4 个视图，以相等的间距水平放置，代码看起来像：

var views = new UIView[] { view1, view2, view3, view4 };
var stackView = new UIStackView(views)
{
    Axis = UILayoutConstraintAxis.Horizontal,
    Distribution = UIStackViewDistribution.EqualSpacing
};

然后您只需约束您的 stackView，子视图就会在其中布局。

Answer 2

@Cheesebaron 的 UIStackView 回答是一个很好的方法。

但是，如果您关心 iOS 7-8（UIStackView 适用于 9+），那么您可以执行以下操作：

view.AddConstraints(
    i1.WithSameCenterX(view).WithMultiplier(1 / 4f),
    i2.WithSameCenterX(view).WithMultiplier(3 / 4f),
    i3.WithSameCenterX(view).WithMultiplier(5 / 4f),
    v4.WithSameCenterX(view).WithMultiplier(7 / 4f)
);

i1-i3 是相同大小的图像，v4 是其他一些不同大小的视图。无需人工计算。

在纵向模式下工作：

和横向：

这个精彩的回答解释了这个想法：

如果您的视图大小不同，这可能不是您想要的：

MVVMCross FluentLayout 水平间距相等

MVVMCross FluentLayout Equal Horizontal Spacing

ios

mvvmcross

xamarin

cirrious.fluentlayout