Squared Edges

[johnrickman]

How can I implement squared edges like in the Flowies screenshot?

Thanks!

[sobri909]

For that I would subclass MGLine and provide a new setup method which defines the desired row fonts, padding, etc. And instead of using MGTableBoxStyled I would simply use MGTableBox or MGBox as the table container. MGTableBoxStyled is designed to have rounded corners, so it's not much use in this case.

For Flowies I have an MGLine subclass called StyledLine, which has this setup method:

- (void)setup {
  [super setup];

  // text style
  self.font = [UIFont fontWithName:@"HelveticaNeue-Bold" size:18];
  self.textColor = UIColor.whiteColor;

  // etched borders
  self.borderStyle = MGBorderEtchedTop | MGBorderEtchedBottom;

  // padding
  self.leftPadding = 16;
  self.rightPadding = 16;
}

And a convenience line method to return a line with the default size, like this:

+ (id)line {
  return [self boxWithSize:(CGSize){320, 60}];
}

Then I would make the table something like this:

MGBox *table = MGBox.box;
[self.scroller.boxes addObject:table];

StyledLine *line1 = StyledLine.line;
line1.leftItems = (id)@"Some text on the left";
[table.boxes addObject:line1];

StyledLine *line2 = StyledLine.line;
line2.leftItems = (id)@"Some text on the left";
[table.boxes addObject:line2];

[self.scroller layoutWithSpeed:0.3 completion:nil];

[johnrickman]

Thanks that very helpful.

[johnrickman]

Hi: This is an unrelated question but I dont want to open a new thread.

I wanted to create a grid hierarchy, as such...

this is my code.. I get error "Assertion failure in +[MGLayoutManager layoutBoxesIn:] NSInternalInconsistencyException', reason: 'Items in the boxes set must conform to MGLayoutBox"

Could you point out where my errors are?

//main box
__weak MGBox *movieGrid = [MGBox boxWithSize:CGSizeMake(_table.frame.size.width, 160.0)];
movieGrid.padding = UIEdgeInsetsMake(10.0, 10.0, 0.0, 10.0);
movieGrid.contentLayoutMode = MGLayoutGridStyle;

//purple box
MGBox *infoBoxGrid = [MGBox boxWithSize:CGSizeMake((movieGrid.size.width - (movieGrid.leftPadding + movieGrid.rightPadding)) * .8, 160.0)];
infoBoxGrid.contentLayoutMode = MGLayoutGridStyle;

//items in purple box
StyledLine *movieInfoBox = [StyledLine lineWithSize:CGSizeMake(infoBoxGrid.size.width, infoBoxGrid.size.height)];
movieInfoBox.leftItems = [NSMutableArray arrayWithObject:thumbImage];
header.rightItems = [NSMutableArray arrayWithObject:nameLabel];
movieInfoBox.backgroundColor = UIColor.redColor;

    [infoBoxGrid.boxes addObject:movieInfoBox];

    [movieGrid.boxes addObject:infoBoxGrid];

//red box
MGBox *controlBoxGrid = [MGBox boxWithSize:CGSizeMake((movieGrid.size.width - (movieGrid.leftPadding + movieGrid.rightPadding)) * .2, 160.0)];
controlBoxGrid.contentLayoutMode = MGLayoutGridStyle;

//items in red box
UIGlossyButton *socialButton = [[UIGlossyButton alloc] initWithFrame:CGRectMake(0.0, 0.0, (movieGrid.size.width - (movieGrid.leftPadding + movieGrid.rightPadding)) * .2, 80.0)];
//[socialButton setImage:[UIImage imageNamed:@""] forState:<#(UIControlState)#>];

    [controlBoxGrid.boxes addObject:socialButton];

    [movieGrid.boxes addObject:controlBoxGrid];

    movieGrid.onTap = ^() {
        VideoPlayerController *videoController = [[VideoPlayerController alloc] init];
        videoController.asset = [AVAsset assetWithURL:movieURL];
        [self presentViewController:videoController animated:YES completion:nil];
    };

    [_table.boxes addObject:movieGrid];

[sobri909]

You're adding socialButton to boxes, but it's not an MGLayoutBox (eg MGBox, MGLine, etc). You can only add MGLayoutBox objects to boxes. You should instead add it to subviews.

[johnrickman]

Thanks. How can I make my list scroll horizontally?

[sobri909]

There's currently no horizontal layout strategy, unless you use a grid layout and resize the container's width to accommodate. Perhaps that would work for you?