I am trying to implement the following layout:
Name: James
Gender: Male
Followers: Brian, Jason and Mike.
I can imagine that the top level is to use CKStackLayout, but for each entry, e.g. "Name: James", how can I make the Name right align within a Box?
I was using something like the following, wrap the text within a fixed width component and set the label component to use NSTextAlignmentRight
alignment, but it doesn't work and both left and right are just 'left-align':
static CKComponent *singleLine(NSString *left, NSString *right)
{
CKStackLayoutComponent *stackComponent =
[CKStackLayoutComponent
newWithView:{}
size:{}
style:{
.direction = CKStackLayoutDirectionHorizontal,
.alignItems = CKStackLayoutAlignItemsStretch,}
children:{
{.component = [CKStaticLayoutComponent
newWithView:{}
size:{.width = CKRelativeDimension(10)}]},
{.component =
[CKStaticLayoutComponent
newWithView:{}
size:{.width = CKRelativeDimension(88)}
children:{
{
.component =
[CKLabelComponent
newWithLabelAttributes:{
.string = left,
.alignment = NSTextAlignmentRight,
.font = [UIFont boldSystemFontOfSize:14.0],
.maximumNumberOfLines = 1
}
viewAttributes:{}],
}
}],
},
{
.component =
[CKLabelComponent
newWithLabelAttributes:{
.string = right,
.alignment = NSTextAlignmentLeft,
.font = [UIFont systemFontOfSize:14.0],
.maximumNumberOfLines = 1
}
viewAttributes:{}],
.spacingBefore = 10.0
}
}];
return stackComponent;
}
Thanks!
I think your solution is a good one. An alternate solution would be to write your own custom layout by overriding computeLayoutThatFits:
. It's best to avoid this generally, but for complex layouts like forms it can be a lifesaver.