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];
}
Objective-c

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)];
}
Objective-c

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];
}
Objective-c

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];
}
Objective-c

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];
}
Objective-c

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

};
Objective-c

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)];
}
Objective-c

For all relative view positioning options

typedef NS_ENUM(NSInteger, MCViewRelativePosition) {
    MCViewRelativePositionAboveAlignedLeft,
    MCViewRelativePositionAboveCentered,
    MCViewRelativePositionAboveAlignedRight,
    MCViewRelativePositionToTheRightAlignedTop,
    MCViewRelativePositionToTheRightCentered,
    MCViewRelativePositionToTheRightAlignedBottom,
    MCViewRelativePositionToTheLeftAlignedTop,
    MCViewRelativePositionToTheLeftCentered,
    MCViewRelativePositionToTheLeftAlignedBottom,
    MCViewRelativePositionUnderAlignedLeft,
    MCViewRelativePositionUnderCentered,
    MCViewRelativePositionUnderAlignedRight
};
Objective-c

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.

GitHub

mirego/MCUIViewLayout

778

MCUIViewLayout is a category added over UIView to easily build layouts — Read More

http://open.mirego.com

Latest commit to the master branch on 7-6-2018
Download as zip