iOS: TableView中字段与LayoutConstraint (可视格式)的对齐

Question

我想在表格单元格中对齐视图，让所有垃圾箱在左边，文本字段在右边(固定宽度)，描述填充两者之间的空间。如果太长的话，顶部将打破两行的描述。

​

​

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

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

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

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

还重写UITableViewSource的GetHeightForRow以返回AutomaticDimension

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