sobri909/mgboxkit

Simple, quick iOS tables, grids, and more

API Reference, Guides, and Changelog

• API Reference
• Introduction and Basic Concepts
• Positioning and Layout Guide
• Tables and Grids Guide
• Changelog

Layout Features

• Table layouts (similar to UITableView, but less fuss)
• Grid layouts (similar to UICollectionView, but less fuss)
• Optionl box caching for smooth scrolling and low memory use
• Table rows automatically layout NSStrings, UIImages, NSAttributedStrings, and multiline text
• Table rows accept Mush lightweight markup for bold, italics, underline, monospacing, text colour, and background colour.
• Animated adding/removing/reordering rows, boxes, sections, etc
• CSS-like margin, padding, zIndex, fixedPosition, and more
• Separate top/right/bottom/left border colours
• Automatically keeps input fields above the keyboard

Code Convenience Features

• Blocks based tap, swipe, and hold gesture recognisers
• Blocks based touch event handling
• UIView easy frame accessors

Setup

Add pod 'MGBoxKit' to your Podfile

mgboxkit's Issues

Best way to observe touchesBegan on an MGLine?

Hey there,

Loving MGBox2 so far. I'm looking to change the state of a MGLine when the user taps on it, before the finger is released, a lot like the selection highlight on a UITableViewCell.

Any ideas?

Thanks!

Line with Input Field

Hi,

I'm trying to setup a line with an input field below it, like the image below however i'm not able to do it. It adds it to the same line, but I can't get it to wrap like below. Any thoughts?

Rotation-Question

I use a MGTableStyledBox and want full landscape support so i use this code

- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)orient
                                         duration:(NSTimeInterval)duration {

  BOOL portrait = UIInterfaceOrientationIsPortrait(orient);
  float width = portrait ? IPHONE_PORTRAIT_WIDTH : IPHONE_LANDSCAPE_WIDTH;

  [scroller setSize:(CGSize){width, self.view.frame.size.heigth}];

  // apply to each line in boxes
  for (MGTableStyledBox *box in scroller.boxes) {
    for (MGLine *line in box.topLines) {
        if(line.size.heigth == 44){
            line.setSize((CGSize){width, 44});
        }
    }
  }

  // relayout the sections
  [self.scroller layoutWithSpeed:duration completion:nil];
}

It works perfectly, but there are some multiLine MGLine's. They are simply ignored because their height isn't 44 sure, but how can i resize them to fit the landscape size?

Maybe you have an idea?

thanks a lot!

MGLine right component disappear

Hi, First of all, thank you for these awesome boxes.

However, i would like to fix an issue:

On a MGline, if the left component is too long (for instance a NSString), the right component disappear (for instance a UISwitch).

I would like to know how can i do in order to keep the right component even if the left component is too long ? ( i want in this case to show only a part on the left component of to resize fonts or whatever).

Thank you for your help,

Set Position of boxes

How do I set the position of a box? I tried changing the frame but that didn't move it anywhere? Also, can I make boxes smaller in size, there seems to be some restriction on making them smaller. Also what's the difference between the content layout modes? Sorry for all of the questions but I didn't see these mentioned in the documentation.

Please add semantic version tags

I’ve recently added MGBox2 to the CocoaPods package manager repo.

CocoaPods is a tool for managing dependencies for OSX and iOS Xcode projects and provides a central repository for iOS/OSX libraries. This makes adding libraries to a project and updating them extremely easy and it will help users to resolve dependencies of the libraries they use.

However, MGBox2 doesn't have any version tags. I’ve added the current HEAD as version 0.0.1, but a version tag will make dependency resolution much easier.

Semantic version tags (instead of plain commit hashes/revisions) allow for resolution of cross-dependencies.

In case you didn’t know this yet; you can tag the current HEAD as, for instance, version 1.0.0, like so:

$ git tag -a 1.0.0 -m "Tag release 1.0.0"
$ git push --tags

Publish the development branch

There's a bunch of requested features and fixes that are either finished or nearly finished in my local development branch, but they haven't been properly QAed or just aren't quite ready for the release version. I should start publishing the development branch to Github.

This ticket is just a reminder, to push me to get the MGBox development process a bit more out in public.

Where are the images being downloaded?

Hi I'm a newbie here, I wonder where is the code of the images being downloaded?

Thanks a lot.

I found it! Sorry about that.

Is it possible to add a custom View to MGBox?

Hi all,

I tried to add a custom view, which handles a lot of CoreText, but this view is not visibly added - the whole line is not shown at all. In detail, I'm trying to float some text around an image, I also tried using the options

+ (id)lineWithLeft:(NSObject *)left right:(NSObject *)right;
+ (id)lineWithLeft:(NSObject *)left right:(NSObject *)right size:(CGSize)size;

but as the text does not float around the image this ain't an option for me.

I also tried adding the subview directly to the line and setting the size, but no success either - the line is not displayed.

Has anyone a solution for this particular use-case?
Thank you very much.

Found Bugs with the newest commits

I found some Bugs with the newest commits:
1.
When you open an EKEventEditViewController with an MGTableBoxStyled Line you will get an

-[UIApplication currentFirstResponder]: unrecognized selector sent to instance 

A simple solution is to check in Line 189 in MGScrollView

if([UIApplication.sharedApplication respondsToSelector:@selector(currentFirstResponder)])

Now it works :)

With the removal of the rasterise in the latest commit the MGTableBoxStyle tanimation seems to be buggy. The seperatorlines appear very white and fade out. When i add the rasterise again this behavior is gone.

Any idea?

Thanks a lot!
CrEaK

Border for MGLine

How can I add a border to the bottom if a MGLine? In version 1 it was set by default, but when I upgraded, it disappeared.

How to stop a scroll (without trigger a selection)?

After pulling down a long table and try to stop the scrolling, it may trigger a new selection.

For example, in the demo app,

• a long table is pulled down
• tap on screen
• if the finger happens last-touch on a row (e.g. Animated layout)
• the screen stops, and expands, opens "Animated layout" section ...

It does not behave like the default iPhone tableview, which only triggers the selections if the tableview is idle (not scrolling).

MGTableBox toplines/middlelines mix-up

So I added two lines to a boxes toplines property. Then I add multiple lines to the middlelines property. Before I add lines to the middlelines property I remove all existing lines. Then I draw the box again to display the changes. But when I do [box.middlelines removeAllObjects]; it also clears the top lines also...but why?

Update: when I check how many items are in the middlelines property, it does say there are two; but I am not adding them to middles lines, only toplines.

Can I freeze the contentOffset while doing layoutWithSpeed?

I'm adding/removing items from the MGScrollView, but I'd like to keep the scroll view 'locked' on the currently visible view or equivalent contentOffset while this is happening.

e.g. say I have a scrollView with 10 boxes, each 100px tall, and I'm at contentOffset {0,500} (i.e. I'm scrolled to the 6th box):

I insert another box somewhere at the top of the list:

  [scrollView.boxes insertObject:box atIndex:1];
  [scrollView layoutWithSpeed:1.0 completion:nil];

I want the user to see nothing happen, and contentOffset should now be {0, 600} i.e. adjusted for the new item.

What I've tried:

• Setting this in the layoutWithSpeed:completion: block. It looks bad because the new item shifts everything down and then it movies back at the end
• Setting an animation to happen at the same time (both with UIViewAnimationOptionBeginFromCurrentState and without). This doesn't seem to work at all
• Calling [scrollView layout] in an animation block. This also doesn't seem to work.

Possible to add onTap action to leftItem and one for rightItem?

I'd love to be able to split a single row into two tappable entities, is there a way to do this?

Custom bottom/top/etc border UIView

I've got a design spec with some simple yet baroque borders around what I believe will be instances of MGBox. I noticed that MGBox has properties of type UIView for the four borders.

Does anyone have a recommendation for how I might go about creating these borders? A quick little test indicated that simply setting these properties on a generic MGBox doesn't actually draw them. Would I be extending MGBox and then implementing a custom layout method?

Thanks for any suggestions/tips.

Julian

Adding records from a Core Data store?

I would appreciate your thoughts on loading data into MGBoxTables from a Core Data store. Is this practical, or is there some reason I should not attempt it?

Many thanks

how handle left/right swipes?

If there's only one swiper attached to a box, how to handle left AND right swipes?

Squared Edges

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

Thanks!

What's the best way to create custom layout animations?

I want to create my own custom layout animation. I want each row/mgline of my mgtablebox to slide from left to right across the screen. What's the best way to do this? Do I need to subclass MGBox or MGLine? Should I override the layout or setup methods?

Current commit is broken

sobri909-MGBox2-5fc4228/Demo App/Demo App/DemoViewController.m:54:37: Use of undeclared identifier 'MGLayoutStackHorizontalWithWrap'

Overriding layoutWithSpeed to use custom animation?

I'm having trouble figuring out a way to override layoutWithSpeed to use my own custom animations because, browsing the source code, I notice that layoutWithSpeed calls MGLayoutManager and several other functions. Whats the best way to override layoutWithSpeed so that I can retain core functionality of that method while adding my own animations?

Shortened text if text starts with Tu

If I start a text with "Tu" in a MGLineStyled, the text gets shortened. It kinda looks like a feature, but I cannot find a way to not shorten my text.

MGLineStyled *head = [MGLineStyled lineWithLeft:@"**Tu**|mush" right:turkompisenNedlastingButton size:ROW_SIZE];

http://imgur.com/59r0LpO

Build failures, Unexpected @ in the program

There are quite a few errors, when I am trying to build mgbox2, which say

Unexpected @ in the program,

This is just one of the errors:

NSMutableArray *gone = @[].mutableCopy;

Am i missing something here

dynamic box height

I was wondering if there is a way to add boxes that have a defined size to a parent box that didnt have its size defined(declared using [MGBox box];) Cause I have a dynamic sized array.

Is this possible?

Scroll to tapped box?

Hi there, Could you tell me how to scroll to an item on tap? If I were to change the height of an attached line for a collapsible content area and scroll to the tapped line to bring it into focus? Another question would be a toggle on an already tapped item to have it collapse before uncollapsing another line?

NSGenericException

Hey,

i recieved an interesting new Crashlog from a user of my app. Maybe its helpful for you:

Main Exception:

*** Terminating app due to uncaught exception 'NSGenericException', reason: '*** Collection <__NSOrderedSetM: 0x203f1750> was mutated while being enumerated.'

... 0x00092311 +[MGLayoutManager layoutBoxesIn:withSpeed:completion:] (MGLayoutManager.m:106)
... 0x000983db -[MGScrollView layoutWithSpeed:completion:] (MGScrollView.m:98)

The affected lines in the MGLayoutManager.m are this:

for (id box in container.boxes) {
  [box layout];
}

But i must say the app isnt using the newest commit of MGBox2, so maybe the bug is already fixed in the newest commit?

Thanks a lot!

Could not find CAlayer in MGLine.h and imageView.layer in MGBox

First of all I need to thank you.

I had to add #import <QuartzCore/QuartzCore.h> on above two file to work with these library. When I use MGBox1 I haven't need to to this.

Thanks

How to remove onControlEvent?

I want to replace an event block on a button with a new event block. How do I first remove the old event block? If I don't do this, then both the old and new event blocks get called.

Cannot update text of a line on tap

I am trying to update the text of a line in a box. I am also changing the background of the line and that does work, so I am missing something super simple here. This is my code;

//Configure the Box
MGBox *testTable;
testTable = MGBox.box;
testTable.contentLayoutMode = MGLayoutTableStyle;
testTable.sizingMode = MGResizingExpandWidthToFill;
testTable.boxLayoutMode = MGBoxLayoutNone;
testTable.leftPadding = -8;
[self.scroller.boxes addObject:testTable];

//Set up the menu   
MGTableBoxStyled *menu = MGTableBoxStyled.box;
[testTable.boxes addObject:menu];

// header line
MGLineStyled  *header = [MGLineStyled lineWithLeft:@"Test Table" right:nil size:(CGSize){320, 60}];
header.font = [UIFont fontWithName:@"HelveticaNeue" size:18];
[menu.topLines addObject:header];

//Add Line in with formating
MGLineStyled *line1 = MGLineStyled.line;
line1.font = [UIFont fontWithName:@"HelveticaNeue" size:16];
line1.leftItems = (id)@"Test line 1";
line1.size = (CGSize){320, 60};
line1.backgroundColor = [UIColor redColor];

[menu.topLines addObject:line1];

line1.onTap = ^{
    if (line1.backgroundColor == [UIColor redColor]) {
        line1.backgroundColor = [UIColor greenColor];
        line1.leftItems[0] = (id)@"The background is green";
    }else{
        line1.backgroundColor = [UIColor redColor];
        line1.leftItems[0] = (id)@"The background is green";
    }

};

Get notification if MGBox is visible or visibility changes

if there any notification I can listen to to see if my MGBox is visible or becomes visible? I have a lot of thumbnails and memory becomes an issue when loading 200+ thumbnails.

Having the ability to load or clear images based on visibility would be huge.

setting to MGBoxLayoutFixedPosition does not trigger taps on boxes

I've noticed this with the demo application, if I would set box.boyLayoutMode = MGBoxLayoutFixedPosition for PhotoBox (photobox.m), the tap block is not triggered, it is only triggered in auto layout. Is something need to be done for tap event to work if changing the layout to fixed position?

thanks.

Why don't mgboxes given an attachedTo value animate?

I have mgboxes added to a parent mgbox. They all animate fine with layoutWithSpeed, but any mgbox which has been attachedTo a UIView doesn't animate, even though its been added via box:addObjects. Why doesn't it animate?

Add PhotoBox to MGLine

When I add a Photobox to a MGLine scrolling does not draw the MGLine after a small scroll.

It only happens on the device.

What is the best way to add a PhotoBox in MGLine?

Slide to reveal / slide to open

I'm curious about implementing the equivalent of "slide to reveal" animations with MGBox2. I believe with zIndex and reworking the built-in animation calculations, I may be able to extend MGBox to do this. I'm wondering if anyone has tried or has some code to share, or pointers/suggestions.

Thanks.

leftItems and rightItems alignment of MGLine

As described here: https://github.com/sobri909/MGBox/issues/16

can't support 4.3

Xcode 4.5 still support 4.3 target ,and there are many Device is 4.3 ,please support it

Where to ask questions about MGBox2?

MGBox2 is great and it's already playing a pivotal role in my app. I'm wondering where the best place is to ask questions about it...I don't want to fill the issues tab with noise. I have questions such as "What's the best way to initialize a MGBox with a nib?", etc. Would it be better to use a Google Group or a MGBox2 tag on Stackoverfow?

MGLine : Fonts not applied to "right"

When passing in two strings, and applying a different font only the left is affected.

#define test_font       [UIFont fontWithName:@"Chalkduster" size:12]

MGLine *lastLine = [MGLine lineWithLeft:@"6:00 PM" right:@"Event" 
                                     size:(CGSize){300,20}];
lastLine.font = test_font;

Box disappears on iPhone 4

There seems be a general problem with boxes disappearing when scrolling on older iPhones (4 and below).

Setting a row's background?

I looked through the issues and I was trying to duplicate my app's current layout using your library.

I would like to have my rows within a "section" have a background like this:

Obviously, my section headers are just clear MGLines but the bg of a sound row, I would like to randomly grab a bg.

I've tried creating an imageview and adding it as a subview but it's getting ignored.

Any tips?

MGBox Block properties keep my Allocations up // ARC Memory Issue?

So — I was running into some small, nagging allocation issues. I was just looking at the profile of my general app architecture before I get too deep into things and ran some tests. (Earlier versions of this project had some knock-out memory issues.)

I noticed that some of my MGBox subclasses weren't going away even though I was clearing them out of their containing MGBox and setting them to "nil" — unless I set their onTap property to nil as well. (It's set to a small block to do onTap-y things.)

That makes sense — but I wonder if that's something that one would expect to do in this case? I mean — I don't set all the properties of a class instance to nil. And I understand that blocks are different and all, but..did I miss something in some Apple "best practices" document?

Is the property definition for onTap okay as it is (nonatomic, copy)? Or do I just need to be diligent and nil out any property that has (nonatomic, copy)?

Julian

Best way to do custom 'grouped style' backgrounds

I'm trying to mimick UITableViewStyleGrouped but with a custom style (e.g. different borders, inner shadow, etc.). To do this I need to specify different scalable background images for the top, middle and bottom cells in a group.

Do you have any suggestions for the simplest way to do this and to make it re-usable? Can a MGBox tell me if it's the first or last view in a MGTableBox?

Scrolling To Top

Hello:
I am trying to get scroll to top working for all my view controllers (I have created a custom navigation system). I have gone as far as trying to setScrollsToTop for all viewControllers and subviews that respond to "setScrollsToTop:" to NO and then only enabling it for the top viewcontroller's scroll subview (to be sure that only one scrollview has the property set). The only one that isn't responding is the MGScroller. I have even set the delegate method of the scroller to my own view controller and trying to implement the delegate within the mgscroller to no avail. Is there something I'm missing to why it's not working?

Dismiss textbox

I must be missing something simple (again). Trying to dismiss the keyboard from UITextField in a box. Here is what I am doing;

//Configure the Box
MGBox *testTable;
testTable = MGBox.box;
testTable.contentLayoutMode = MGLayoutTableStyle;
testTable.sizingMode = MGResizingExpandWidthToFill;
testTable.boxLayoutMode = MGBoxLayoutNone;
[self.scroller.boxes addObject:testTable];

//Set up the menu   
MGTableBoxStyled *menu = MGTableBoxStyled.box;
[testTable.boxes addObject:menu];

// header line
MGLineStyled  *header = [MGLineStyled lineWithLeft:@"Test Table" right:nil size:(CGSize){320, 60}];
header.font = [UIFont fontWithName:@"HelveticaNeue" size:18];
[menu.topLines addObject:header];

//Add Line in with UITextField
myTextField = [[UITextField alloc] initWithFrame:CGRectMake(0, 0, 272, 30)];
myTextField.borderStyle = UITextBorderStyleRoundedRect;
myTextField.font = [UIFont fontWithName:@"HelveticaNeue" size:15];
myTextField.placeholder = @"My Text";
myTextField.autocorrectionType = UITextAutocorrectionTypeNo;
myTextField.keyboardType = UIKeyboardTypeDefault;
myTextField.returnKeyType = UIReturnKeyDone;
myTextField.clearButtonMode = UITextFieldViewModeWhileEditing;
myTextField.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;

MGLineStyled *line1 = MGLineStyled.line;
line1.leftItems[0] = myTextField;

[menu.topLines addObject:line1];    

Then have the following methods

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    [myTextField resignFirstResponder];
}


-(BOOL)textFieldShouldReturn:(UITextField *)textField{
    [myTextField resignFirstResponder];
    return YES;
}

Image and multiline text in an MGLine

As described here: https://github.com/sobri909/MGBox/issues/14

This shouldn't be too hard to implement. The biggest issue will be what the API should look like. I'm imagining something like:

// multiline text on the right
MGLine *row = [MGLine lineWithLeft:[UIImage imageNamed:@"thing"] multilineRight:@"a long string" width:304];

// multiline text on the left
MGLine *row = [MGLine lineWithMultilineLeft:@"a long string" right:[UIImage imageNamed:@"thing"] width:304];

And provide properties like thus:

row.multilineLeft = @"a long string";
row.multilineRight = @"a long string";

MGLine now also accepts middle items, so perhaps it would make sense to allow multiline text for the centre as well.

MGUnderlineNone not working

Hey,
very nice Project, it helps me alot! But i found some Bugs.

I tried to set the underlineType of an MGLine to MGUnderlineNone, but the Lines are still shown. It doesn't matter if its a normal MGLine or an multiText MGLIne.

In MGBox1 it worked like a charm.

Maybe i made something wrong?

How to set MGLine leftItem vertically alignment close to the box top while rightItem is multiline?

I mean, right now the leftItem is placed vertically in the middle of the box, or I might have missed something?

MGButton's onTap crashes app

Tapping on an MGButton after assigning a block to its onTap attribute causes a crash with this error:

Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[UIButton setOnTap:]: unrecognized selector sent to instance 0x1e048290'

My button code:

MGButton *myButton = [MGButton buttonWithType:UIButtonTypeInfoDark];
myButton.onTap = ^{

}

What's the equivilent of "reloadData" for mgbox2?

How do I reload a mgbox or mgtablebox with new rows/data? Do I need to remove the subviews and boxes, then call layout on the parent mgbox, then create new rows, and call layout once more?