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

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([email protected])]-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; 
}