A category added over UIView to easily build layouts
MCUIViewLayout
MCUIViewLayout is a category added over UIView to make layouting the views easier. It provide shortcut methods to set width, height, position based without the need to always resort to using CGGeometry functions.
Using
All methods are prefixed mc_
at the moment. This is to avoid colisions as described in
Programming with Objective-C.
Change z-ordering of a view
You've just added a view and need it bellow all other views or the other way
around? Don't need to play with the subviews
array of the superview
.
- (void)funWithZOrdering
{
UIView *view = [[UIView alloc] init];
[view mc_bringToFront];
[view mc_sendToBack];
}
Managing the size of the view
Using setFrame:
or setBounds:
just to change the size is a pain because
one need to preserve positioning. Here are some convinience methods to do so.
- (void)funWithSize
{
UIView *view = [[UIView alloc] init];
// set only width
view.mc_width = 42;
[view mc_setWidth:42];
// set only height
view.mc_height = 12;
[view mc_setHeight:12];
// Set both with and height
view.mc_size = CGSizeMake(42,12);
[view mc_setSize:CGSizeMake(42,12)];
}
Absolute positioning
Using setFrame:
or setBounds:
just to change the position is wonky because
one needs to preserve the size.
- (void)funWithPositions
{
UIView *view = [[UIView alloc] init];
// X position
view.mc_xPosition = 44;
[view mc_positionAtX:44];
// Y position
view.mc_yPosition = 22;
[view mc_positionAtY:22];
// Set both x and y position
view.mc_origin = CGPointMake(44,22);
[view mc_setOrigin:CGSizeMake(44,22)];
// ... or use combo methods
[view mc_positionAtX:44 andY:22];
[view mc_positionAtX:44 andY:22 withWidth:42];
[view mc_positionAtX:44 andY:22 withHeight:12];
[view mc_positionAtX:44 withHeight:12];
}
Positioning in superview
- (void)funWithSuperview
{
UIView *view = [[UIView alloc] init];
// +---------------------+
// | *** |
// | *** |
// | |
// +---------------------+
[view mc_positionRightOfSuperViewWithSpacing:5];
// +---------------------+
// | *** |
// | *** |
// | |
// +---------------------+
[view mc_positionLeftOfSuperViewWithSpacing:5];
// +---------------------+
// | |
// | |
// |*** |
// |*** |
// | |
// | |
// | |
// | |
// +---------------------+
[view mc_positionTopOfSuperViewWithSpacing:2];
// +---------------------+
// | |
// | |
// | |
// | |
// |*** |
// |*** |
// | |
// | |
// +---------------------+
[view mc_positionBottomOfSuperViewWithSpacing:2];
// +---------------------+
// | |
// | |
// | *** |
// | *** |
// | |
// | |
// +---------------------+
[view mc_centerInSuperView];
// Centered minus 1/8th of the height of the superview
[view mc_centerInSuperView];
}
Or if you prefer being more specific about your positions use MCViewPosition and
UIEdgeInsets
thanks to UIEdgeInsetMake(top,left,bottom,right)
and UIEdgeInsetZero
- (void)evenMoreFunWithPositioningAndSuperviews
{
UIView *view = [[UIView alloc] init];
// Just position
[view mc_setPosition:MCViewPositionCenter withMargins:UIEdgeInsetZero] // Same as mc_centerInSuperView
// Position and size in one.
[view mc_setPosition:MCViewPositionBottomRight withMargins:UIEdgeInsetMake(0,0,10,20) size:CGSizeMake(100,200)];
// Above is equivalent to:
// [view mc_setWidth:100];
// [view mc_setHeight:200];
// [view mc_positionRightOfSuperViewWithSpacing:20];
// [view mc_positionBottomOfSuperViewWithSpacing:10];
}
The different MCViewPosition options:
// MCViewPosition
typedef NS_OPTIONS(NSInteger, MCViewPosition) {
MCViewPositionHCenter = (0x1 << 0),
MCViewPositionVCenter = (0x1 << 1),
MCViewPositionTop = (0x1 << 2),
MCViewPositionBottom = (0x1 << 3),
MCViewPositionLeft = (0x1 << 4),
MCViewPositionRight = (0x1 << 5),
MCViewPositionTopLeft = MCViewPositionTop | MCViewPositionLeft,
MCViewPositionTopHCenter = MCViewPositionTop | MCViewPositionHCenter,
MCViewPositionTopRight = MCViewPositionTop | MCViewPositionRight,
MCViewPositionBottomLeft = MCViewPositionBottom | MCViewPositionLeft,
MCViewPositionBottomHCenter = MCViewPositionBottom | MCViewPositionHCenter,
MCViewPositionBottomRight = MCViewPositionBottom | MCViewPositionRight,
MCViewPositionVCenterLeft = MCViewPositionVCenter | MCViewPositionLeft,
MCViewPositionCenters = MCViewPositionVCenter | MCViewPositionHCenter,
MCViewPositionVCenterRight = MCViewPositionVCenter | MCViewPositionRight
};
Positioning view relative to other views
- (void)funWithRelativePositioning
{
UIView *view = [[UIView alloc] init];
UIView *otherView = [[UIView alloc] init];
// centers "view" directly above "otherView" with no margin
[view mc_setPosition:MCViewRelativePositionAboveCentered relativeToView:otherView withMargins:UIEdgeInsetZero];
// position "view" left of "otherView" centered horizontally.
[view mc_setPosition:MCViewRelativePositionToTheLeftCentered relativeToView:otherView withMargins:UIEdgeInsetZero size:CGSizeMake(100,200)];
// center view inside otherview
[view mc_setPosition:MCViewPositionCenter inView:otherView withMargins:UIEdgeInsetZero]
// ... same with size
[view mc_setPosition:MCViewPositionCenter inView:otherView withMargins:UIEdgeInsetZero size:CGSizeMake(100,200)];
}
For all relative view positioning options
typedef NS_ENUM(NSInteger, MCViewRelativePosition) {
MCViewRelativePositionAboveAlignedLeft,
MCViewRelativePositionAboveCentered,
MCViewRelativePositionAboveAlignedRight,
MCViewRelativePositionToTheRightAlignedTop,
MCViewRelativePositionToTheRightCentered,
MCViewRelativePositionToTheRightAlignedBottom,
MCViewRelativePositionToTheLeftAlignedTop,
MCViewRelativePositionToTheLeftCentered,
MCViewRelativePositionToTheLeftAlignedBottom,
MCViewRelativePositionUnderAlignedLeft,
MCViewRelativePositionUnderCentered,
MCViewRelativePositionUnderAlignedRight
};
And more...
Not all the positioning methods are described here. This is still a work in progress. Find all the positiong methods in
UIView+MCLayout.h
.
Adding to your project
If you're using CocoaPods
, there's nothing simpler.
Add the following to your Podfile
and run pod install
pod 'MCUIViewLayout', :git => 'https://github.com/mirego/MCUIViewLayout.git'
Don't forget to #import "UIView+MCLayout.h"
where it's needed.