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;
}
我想对齐 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;
}