0

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!

lorixx
  • 780
  • 1
  • 8
  • 13
  • I ended up using ".size = CKRelativeSizeRange(CKRelativeSize(CKRelativeDimension(88), 0), {})" within the `CKStaticLayoutComponent`. Basically adding a min width to the `CKLabelComponent` and then the text is right alignment within that bounds. – lorixx Aug 31 '15 at 04:45

2 Answers2

1

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.

Adam Ernst
  • 52,440
  • 18
  • 59
  • 71
0

May be you should give the outer stacklout(which wrap multil single line, and has the vertical layout direction): .alignItems = CKStackLayoutAlignItemsStretch

darkangel
  • 41
  • 8