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(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; 
}