Xamarin iOS:使用 LayoutConstraint(视觉格式)对齐 TableView 中的字段

Xamarin iOS: alignment of fields in a TableView with LayoutConstraint (visual format)

我想对齐 table 单元格中的视图,使所有垃圾桶在左侧,文本字段在右侧(固定宽度),描述填充在 space 之间他们俩。如果太长,顶部将在两行中破坏描述。

我正在尝试使用视觉格式的布局约束,但我不确定这是否是正确的方法。

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 具有低抗压缩和压缩。我仍然需要设置边距、颜色等等…… 有人可以给我一些提示吗?

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

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);

并将表格视图的行高设置为 AutomaticDimension

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

同时将 UITableViewSource 的 GetHeightForRow 覆盖为 return AutomaticDimension

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