Xamarin iOS：TableView中的字段与LayoutConstraint的对齐（可视格式）

Question

我想在表格单元格中对齐视图以使左侧的所有垃圾箱，右侧的文本字段（具有固定宽度）以及描述填充两者之间的空间。如果时间太长，那么top会破坏两行中的描述。

我尝试使用可视格式的布局限制，但我不确定它是否是正确的方法。

var views = new UIView[] { btnRemove, lblDescription, txtQuantity };
var stkRoot = IOSUtils.CreateStackView(views, UILayoutConstraintAxis.Horizontal);
this.AddSubview(stkRoot);

var viewMetrics = new Object[] {
    "stack", stkRoot,
    "remove", btnRemove,
    "label", lblDescription,
    "field", txtQuantity,
    "margin", 8
};

List<NSLayoutConstraint> constraints = new List<NSLayoutConstraint>();
constraints.AddRange(
    NSLayoutConstraint.FromVisualFormat(
        "V:|-margin-[stack]-margin-|",
        NSLayoutFormatOptions.AlignAllLeading,
        viewMetrics
    )
);
constraints.AddRange(
    NSLayoutConstraint.FromVisualFormat(
        "H:|-margin-[remove]-margin-[label(>=70)]-margin-[field(60@20)]-margin-|",
        NSLayoutFormatOptions.DirectionLeftToRight | NSLayoutFormatOptions.AlignAllCenterY,
        viewMetrics
    )
);

AddConstraints(constraints.ToArray());

btnRemove和txtQuantity是一个UIButton和一个UITextField，具有很强的抗压缩和拥抱能力，lblDescription是一个UILabel，具有较低的抗拥抱和压缩能力。我仍然需要设置边距，颜色等... 有人可以给我一些提示吗？

Answer 1

我没有使用视觉格式。这也将完成工作。

ContentView.AddSubviews (btnRemove, lblDescription, txtQuantity);

btnRemove.TranslatesAutoresizingMaskIntoConstraints = false;
lblDescription.TranslatesAutoresizingMaskIntoConstraints = false;
txtQuantity.TranslatesAutoresizingMaskIntoConstraints = false;

// add leading space to btnRemove
var btnRemoveLeading = NSLayoutConstraint.Create (btnRemove, NSLayoutAttribute.Leading,
                                  NSLayoutRelation.Equal, ContentView, NSLayoutAttribute.Leading, 1, 8);
ContentView.AddConstraint (btnRemoveLeading);

// add center-y contraint to btnRemove
var btnRemoveCenterY = NSLayoutConstraint.Create (btnRemove, NSLayoutAttribute.CenterY,
                                  NSLayoutRelation.Equal, ContentView, NSLayoutAttribute.CenterY, 1, 0);
ContentView.AddConstraint (btnRemoveCenterY);

// add trailing space to txtQuantity
var txtQuantityTrailing = NSLayoutConstraint.Create (txtQuantity, NSLayoutAttribute.Trailing,
                                     NSLayoutRelation.Equal, ContentView, NSLayoutAttribute.Trailing, 1, -8);
ContentView.AddConstraint (txtQuantityTrailing);

// add center-y contraint to txtQuantity
var txtQuantityCenterY = NSLayoutConstraint.Create (txtQuantity, NSLayoutAttribute.CenterY, NSLayoutRelation.Equal, ContentView, NSLayoutAttribute.CenterY, 1, 0);
ContentView.AddConstraint (txtQuantityCenterY);

// add horizontal space between btnRemove and lblDescription
var hsBtnRemoveTolblDescription = NSLayoutConstraint.Create (btnRemove, NSLayoutAttribute.Right,
                                         NSLayoutRelation.Equal, lblDescription, NSLayoutAttribute.Left, 1, 8);
ContentView.AddConstraint (hsBtnRemoveTolblDescription);

// add horizontal space between txtQuantity and lblDescription
var hstxtQuantityTolblDescription = NSLayoutConstraint.Create (txtQuantity, NSLayoutAttribute.Left,
                                           NSLayoutRelation.Equal, lblDescription, NSLayoutAttribute.Right, 1, 8);
ContentView.AddConstraint (hsBtnRemoveTolblDescription);

// add center-y contraint to lblDescription
var lblDescriptionCenterY = NSLayoutConstraint.Create (btnRemove, NSLayoutAttribute.CenterY,
                                  NSLayoutRelation.Equal, ContentView, NSLayoutAttribute.CenterY, 1, 0);
ContentView.AddConstraint (lblDescriptionCenterY);

编辑：还将宽度约束添加到按钮和文本字段，以便标签伸展。

var btnRemoveWidth = NSLayoutConstraint.Create (btnRemove, NSLayoutAttribute.Width,
                                  NSLayoutRelation.Equal, null, NSLayoutAttribute.NoAttribute, 1, 32);
ContentView.AddConstraint (btnRemoveWidth);

var txtQuantityWidth = NSLayoutConstraint.Create (txtQuantity, NSLayoutAttribute.Width,
                                  NSLayoutRelation.Equal, null, NSLayoutAttribute.NoAttribute, 1, 40);
ContentView.AddConstraint (txtQuantityWidth);

使标签成为多行，并根据标签所具有的行数使UITableviewCell增长，将顶部和底部约束添加到标签并将高度设置为大于某个值：

var vSlblDescriptionToTop = NSLayoutConstraint.Create (lblDescription, NSLayoutAttribute.Top, NSLayoutRelation.Equal, ContentView, NSLayoutAttribute.Top, 1, 8);
ContentView.AddConstraint (vSlblDescriptionToTop);

var vSlblDescriptionBottom = NSLayoutConstraint.Create (lblDescription, NSLayoutAttribute.Bottom, NSLayoutRelation.Equal, ContentView, NSLayoutAttribute.Bottom, 1, -8);
ContentView.AddConstraint (vSlblDescriptionBottom);

var lblDescriptionHeight = NSLayoutConstraint.Create (lblDescription, NSLayoutAttribute.Height,
                                                                  NSLayoutRelation.GreaterThanOrEqual, null, NSLayoutAttribute.NoAttribute, 1, 32);
ContentView.AddConstraint (lblDescriptionHeight);

并将tableview的行高设置为AutomaticDimension

myTableView.EstimatedRowHeight = 44;
myTableView.RowHeight = UITableView.AutomaticDimension;
myTableView.Source = ....

还覆盖UITableViewSource的GetHeightForRow以返回AutomaticDimension

public override nfloat GetHeightForRow (UITableView tableView, NSIndexPath indexPath)
{
    return UITableView.AutomaticDimension;
}