EZLayout, 在使用百分比的iOS布局上,一个新的 再见自动版式

分享于 

21分钟阅读

GitHub

  繁體 雙語
A new take on iOS layouts using percentages. Goodbye autolayout.
  • 源代码名称:EZLayout
  • 源代码网址:http://www.github.com/jhurray/EZLayout
  • EZLayout源代码文档
  • EZLayout源代码下载
  • Git URL:
    git://www.github.com/jhurray/EZLayout.git
    Git Clone代码到本地:
    git clone http://www.github.com/jhurray/EZLayout
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/jhurray/EZLayout
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    EZLayout

    使用百分比进行iOS布局的新方案。 想象UIStackViews在裂缝中。再见自动版式。

    完整的API Cheatsheet

    ###Usage

    克隆 repo 并手动添加 EZLayout 中的文件,或者将以下内容添加到你的Podfile中

    
    pod 'EZLayout', '~> 0.1.1'
    
    
    
    

    然后导入以下标题。

    #import"EZLayout.h"

    ###Why 我现在做EZLayout是唯一的事情。 几乎每个人都采用了它,并且它垄断了布局游戏。 在这个过程中,我们已经建立了无数库来尝试简化它,但是在这一天结束时,它仍然没有为我做。

    自动版式的#####Cons:

    • 它比基于框架的布局慢
    • 很难制作动态布局( 动画,调整 等等 大小)
    • 在一个设备上工作的约束可能会在另一个设备上崩溃
    • 难以对纵向和横向方向进行不同的约束

    我想制作一个基于框架的布局库,可以轻松处理变量的屏幕大小和方向变化。

    我用EZLayout调用 Tuneder 构建了一个简单的应用程序。 它类似于快速播放列表。 这里有许多很棒的示例代码。

    ##Layout 类

    UIView子类的每个子类现在都有一个 ezSize ezAlignment 属性。 任何为英镑的视图的视图都将按照下列属性进行布局。

    ###EZLayoutAlignment

    EZLayoutAlignment用于表示视图在它的superview中的对齐方式。 默认为居中。

    // The view will be in the top right of the superviewmyView.ezAlignment = [EZLayoutAlignment topRight];

    完整的EZLayoutAlignment选项列表

    ###EZLayoutSize

    EZLayoutSize允许你表示视图的大小。 它可以是相对于superviews大小的百分比,也可以是固定大小的。

    // The view will be 50% of the superviews height and 85% of the superviews widthmyView.ezSize = [EZLayoutSize heightPercentage:0.5widthPercentage:0.85];// OR// The view will be 85% of the superviews width and the height will scale to 75% of the width (75% of 85% of the superviews width)myView.ezSize = [EZLayoutSize widthPercentage:0.85scaleFactor:0.75];

    完整的EZLayoutAlignment选项列表

    ###EZLayoutContainerView EZLayoutContainerView是一个帮助视图布局的UIViewSubclass。 它的所有subviews都是根据大小和对齐值来布置的。

    完整的EZLayoutContainerView方法列表。

    #####Horizontal + 垂直堆栈布局一个基本容器视图应该附加到视图控制器或者单元格。

    EZLayoutContainerView *base = [EZLayoutContainerView containerWithViewController:self];

    #####Horizontal + 垂直堆栈布局容器可以使用百分比水平或者垂直排列视图。

    [container verticallyLayoutViews:@[v1, v2, coolStuffContainer] withPercentages:@[@0.5, @0.5]];

    #####Blank 空间容器Containers可以使用 kEZBlankSpace的空白空间来布局视图。

    [container verticallyLayoutViews:@[v1, kEZBlankSpace, v2] withPercentages:@[@0.3, @0.4 @0.3]];

    #####Fixed 大小容器可以使用固定宽度布局视图。 你可以在这些方法中混合使用灵活的宽度。

    // ezFlexDefault is a macro value that says that view 2 will have a flexible height.[container verticallyLayoutViews:@[view1, view2, view3] withFixedHeights:@[@20, ezFlexDefault, @22]];// You can give ratios of flexibilities as well. Here both view2 and view3 are of flexible height, but view3 is twice the height of view2.[container verticallyLayoutViews:@[view1, view2, view3] withFixedHeights:@[@20, ezFlexRatio(1.0), ezFlexRatio(2.0)]];

    #####Landscape 布局容器可以为纵向和横向模式设置不同的布局方案。 如果你不设置景观布局,那么默认的景观布局将与纵向布局相同。

    [container horizontallyLayoutLandscapeViews:@[descriptionContainer, coolStuffContainer] withLandscapePercentages:@[@0.5, @0.5]];

    #####Adding Subviews容器也可以将它的他容器视图作为Subviews添加。

    base = [EZLayoutContainerView container];
    subview = [UIView ezMake:^(UIView *make) {
     make.ezSize = [EZLayoutSize heightPercentage:0.8widthPercentage:0.8];
    }];// subview will be laid out with the appropriate size and alignment in the base container.[subview attachToContainerView:base];

    #####Subview Heirarchy容器将按标签组织它的subviews。 更大的标签将在较小或者零标记之上。

    UIView *v1 = [UIView ezMakeBasic];
    UIView *v2 = [UIView ezMakeBasic];
    EZLayoutContainerView *base = [EZLayoutContainerView container];// v2 will be 上面 v1v1.tag = 5;
    v2.tag = 10;
    [v1 attachToContainerView:base];
    [v2 attachToContainerView:base];

    如果你不想这样做的话,你可以将 orderSubviewsByTag 属性设置为 false

    ##UIView+EZLayout

    ###Initializers的UIView+EZLayout 类别提供了EZLayout的初始化。

    // Standard initializerUIView *view1 = [UIView ezMakeBasic];// A block initializer that will return a view configured in the blockUIButton *button = [UIButton ezMake:^(UIView *make) {
     make.ezSize = [EZLayoutSize heightPercentage:0.8widthPercentage:0.85];
     make.ezAlignment = [EZLayoutAlignment top];
    }];// A block initializer that will return an array of views configured in the block.NSArray *imageViews = [UIImageView ezMakeViews:3make:^(UIView *make, NSUIntegerindex) {
     UIImageView *imageView = (UIImageView *)make;
     imageView.image = [UIImage imageNamed:@"default"];
     imageView.ezSize = [EZLayoutSize widthPercentage:0.85scaleFactor:1.0];
    }];

    ###FrameWasSetBlock

    frameWasSetBlock 属性是在设置视图框架后调用的块。 这是设置角半径和其他依赖于视图框架的特性的理想位置。

    view.frameWasSetBlock = ezFrameWasSetBlock() {
     self.view.layer.cornerRadius = self.view.ezHeight/2.0;
    };

    ###Helpers

    下列属性是视图框架值的快捷方式。 这些属性是完全可以设置和可以设置的。

    #pragma mark - EZLayout Helpers
    @property (nonatomic) CGFloat ezX;
    @property (nonatomic) CGFloat ezY;
    @property (nonatomic) CGFloat ezHeight;
    @property (nonatomic) CGFloat ezWidth;

    查看视图如何布局的##Debug 模式可以将kEZDebugMode标志设置为是。 这将在EZLayoutContainerViews中布置的所有视图周围添加虚线。 它对调试非常有用。 你可以在 EZLayoutConstants.h 中找到这个标志。

    /* DEBUG */// YES: Dotted Lines will appear around all views to show their containment.// NO: No dotted lines around views#definekEZDebugModeYES

    ##Precalculated 值

    EZLayoutConstants.h 中,有大量的预先计算的值代表不同的百分比。 这应该使布局计算轻而易举。

    [container verticallyLayoutViews:@[view1, view2, view3] 
     withLandscapePercentages:@[kEZSeventh, kEZTwoSevenths, kEZFourSevenths]];

    ##Shorthand 有些方法有点笨重。 如果你是EZLayout专家并且希望更短的类名和方法,请导入以下标题。

    #import"EZLayout+Shorthand.h"
    // EZLayoutContainerView -> EZContainerView// EZLayoutSize -> EZSize// EZLayoutAlignment -> EZAlignmentview.ezAlignment = [EZLayoutAlignment topPercentage:0.1rightFixed:40];// becomesview.ezAlignment = [EZAlignment tP:0.1rF:40];// There are many more shorthand methods for the classes 上面. Try it out!

    ## API Cheatsheet

    ### EZLayoutAlignment

    #pragma mark - Absolute
    + (instancetype) center; // default val+ (instancetype) top;
    + (instancetype) bottom;
    + (instancetype) left;
    + (instancetype) right;
    + (instancetype) topLeft;
    + (instancetype) topRight;
    + (instancetype) bottomLeft;
    + (instancetype) bottomRight;
    #pragma mark - Percentage
    + (instancetype) topPercentage:(CGFloat)topMarginPercentage;
    + (instancetype) bottomPercentage:(CGFloat)bottomMarginPercentage;
    + (instancetype) leftPercentage:(CGFloat)leftMarginPercentage;
    + (instancetype) rightPercentage:(CGFloat)rightMarginPercentage;
    + (instancetype) topPercentage:(CGFloat)topMarginPercentage leftPercentage:(CGFloat)leftMarginPercentage;
    + (instancetype) topPercentage:(CGFloat)topMarginPercentage rightPercentage:(CGFloat)rightMarginPercentage;
    + (instancetype) bottomPercentage:(CGFloat)bottomMarginPercentage leftPercentage:(CGFloat)leftMarginPercentage;
    + (instancetype) bottomPercentage:(CGFloat)bottomMarginPercentage rightPercentage:(CGFloat)rightMarginPercentage;
    @property (nonatomic) CGFloat topMarginPercentage;
    @property (nonatomic) CGFloat bottomMarginPercentage;
    @property (nonatomic) CGFloat leftMarginPercentage;
    @property (nonatomic) CGFloat rightMarginPercentage;
    #pragma mark - Fixed
    + (instancetype) topFixed:(CGFloat)topMarginFixed;
    + (instancetype) bottomFixed:(CGFloat)bottomMarginFixed;
    + (instancetype) leftFixed:(CGFloat)leftMarginFixed;
    + (instancetype) rightFixed:(CGFloat)rightMarginFixed;
    + (instancetype) topFixed:(CGFloat)topMarginFixed leftFixed:(CGFloat)leftMarginFixed;
    + (instancetype) topFixed:(CGFloat)topMarginFixed rightFixed:(CGFloat)rightMarginFixed;
    + (instancetype) bottomFixed:(CGFloat)bottomMarginFixed leftFixed:(CGFloat)leftMarginFixed;
    + (instancetype) bottomFixed:(CGFloat)bottomMarginFixed rightFixed:(CGFloat)rightMarginFixed;
    @property (nonatomic) CGFloat topMarginFixed;
    @property (nonatomic) CGFloat bottomMarginFixed;
    @property (nonatomic) CGFloat leftMarginFixed;
    @property (nonatomic) CGFloat rightMarginFixed;
    #pragma mark - Percentage + Fixed
    + (instancetype) topPercentage:(CGFloat)topMarginPercentage leftFixed:(CGFloat)leftMarginFixed;
    + (instancetype) topFixed:(CGFloat)topMarginFixed leftPercentage:(CGFloat)leftMarginPercentage;
    + (instancetype) topPercentage:(CGFloat)topMarginPercentage rightFixed:(CGFloat)rightMarginFixed;
    + (instancetype) topFixed:(CGFloat)topMarginFixed rightPercentage:(CGFloat)rightMarginPercentage;
    + (instancetype) bottomPercentage:(CGFloat)bottomMarginPercentage leftFixed:(CGFloat)leftMarginFixed;
    + (instancetype) bottomFixed:(CGFloat)bottomMarginFixed leftPercentage:(CGFloat)leftMarginPercentage;
    + (instancetype) bottomPercentage:(CGFloat)bottomMarginPercentage rightFixed:(CGFloat)rightMarginFixed;
    + (instancetype) bottomFixed:(CGFloat)bottomMarginFixed rightPercentage:(CGFloat)rightMarginPercentage;

    ### EZLayoutSize

    /*** EZLayoutSizeTypeHeightAndWidth: heightPercentage and widthPercentage set: scale factor plays no role. EZLayoutSizeTypeHeightAndScale: heightPercentage and scaleFactor set: widthPercentage = MIN(1.0, heightPercentage*scaleFactor) EZLayoutSizeTypeWidthAndScale: widthPercentage and scaleFactor set: heightPercentage = MIN(1.0, widthPercentage*scaleFactor) EZLayoutSizeTypeFixed: fixed height and width in frame pixels. Does not need to be between 1.0 and 0.0***/// Dynamic+ (instancetype) heightPercentage:(CGFloat)heightPercentage widthPercentage:(CGFloat)widthPercentage;
    + (instancetype) heightPercentage:(CGFloat)heightPercentage scaleFactor:(CGFloat)scaleFactor;
    + (instancetype) widthPercentage:(CGFloat)widthPercentage scaleFactor:(CGFloat)scaleFactor;// Fixed+ (instancetype) heightFixed:(CGFloat) heightFixed widthFixed:(CGFloat) widthFixed;// Fixed + Dynamic+ (instancetype) heightFixed:(CGFloat) heightFixed widthPercentage:(CGFloat)widthPercentage;
    + (instancetype) widthFixed:(CGFloat)widthFixed heightPercentage:(CGFloat)heightPercentage;// Dynamic@property (nonatomic) CGFloat heightPercentage;
    @property (nonatomic) CGFloat widthPercentage;
    @property (nonatomic) CGFloat scaleFactor;// Fixed@property (nonatomic) CGFloat fixedWidth;
    @property (nonatomic) CGFloat fixedHeight;

    ### EZLayoutContainerView

    #pragma mark - Class Initializers// Basic init+ (instancetype) container;// Initializers for portrait mode+ (instancetype) containerFilledWithView:(UIView *)view;
    + (instancetype) containerWithHorizontalViews:(NSArray *)views percentages:(NSArray *)percentages;
    + (instancetype) containerWithVerticalViews:(NSArray *)views percentages:(NSArray *)percentages;
    + (instancetype) containerWithHorizontalViews:(NSArray *)views fixedWidths:(NSArray *)fixedWidths;
    + (instancetype) containerWithVerticalViews:(NSArray *)views fixedHeights:(NSArray *)fixedHeights;// Initializer for the first container view// starts EZLayout// calls attachToViewController:+ (instancetype) containerWithViewController:(UIViewController *)viewController;// Initializer for the first container view// starts EZLayout// calls attachToTableViewCell:+ (instancetype) containerWithTableViewCell:(UITableViewCell *)cell;// Initializer for the first container view// starts EZLayout// calls attachToContainerView:+ (instancetype) containerWithContainerView:(EZLayoutContainerView *)containerView;
    #pragma mark - Instance Initializers// Initializers for portrait mode- (instancetype) initWithViewToFill:(UIView *)view;
    - (instancetype) initWithHorizontalViews:(NSArray *)views percentages:(NSArray *)percentages;
    - (instancetype) initWithVerticalViews:(NSArray *)views percentages:(NSArray *)percentages;
    - (instancetype) initWithHorizontalViews:(NSArray *)views fixedWidths:(NSArray *)fixedWidths;
    - (instancetype) initWithVerticalViews:(NSArray *)views fixedHeights:(NSArray *)fixedHeights;// Initializer for the first container view// starts EZLayout// calls attachToViewController:- (instancetype) initWithViewController:(UIViewController *)viewController;// Initializer for the first container view// starts EZLayout// calls attachToTableViewCell:- (instancetype) initWithTableViewCell:(UITableViewCell *)cell;// Initializer for the first container view// starts EZLayout// calls attachToContainerView:- (instancetype) initWithContainerView:(EZLayoutContainerView *)containerView;// Used to start EZLayout- (void) attachToViewController:(UIViewController *)viewController;
    - (void) attachToTableViewCell:(UITableViewCell *)cell;
    - (void) attachToContainerView:(EZLayoutContainerView *)containerView;
    #pragma mark - Portrait Orientation// Must be set@property (nonatomic, strong, readonly) NSArray *views;
    @property (nonatomic, strong, readonly) NSArray *percentages;/* Fill */- (void) fillWithView:(UIView *)view;/* Dynamic */// lays out views left to right- (void) horizontallyLayoutViews:(NSArray *)views withPercentages:(NSArray *)percentages;// Lays out views top to bottom- (void) verticallyLayoutViews:(NSArray *)views withPercentages:(NSArray *)percentages;/* Fixed + Dynamic */// lays out views left to right- (void) horizontallyLayoutViews:(NSArray *)views withFixedWidths:(NSArray *)widths;// Lays out views top to bottom- (void) verticallyLayoutViews:(NSArray *)views withFixedHeights:(NSArray *)heights;
    #pragma mark - Landscape Orientation// Can be nil// If nil and portrait supported, will translate to portrait layout@property (nonatomic, strong, readonly) NSArray *landscapeViews;
    @property (nonatomic, strong, readonly) NSArray *landscapePercentages;/* Fill */- (void) fillWithLandscapeView:(UIView *)view;/* Dynamic */// lays out views left to right- (void) horizontallyLayoutLandscapeViews:(NSArray *)landscapeViews withLandscapePercentages:(NSArray *)landscapePercentages;// Lays out views top to bottom- (void) verticallyLayoutLandscapeViews:(NSArray *)landscapeViews withLandscapePercentages:(NSArray *)landscapePercentages;/* Fixed + Dynamic */// lays out views left to right- (void) horizontallyLayoutLandscapeViews:(NSArray *)landscapeViews withFixedLandscapeWidths:(NSArray *)landscapeWidths;// Lays out views top to bottom- (void) verticallyLayoutLandscapeViews:(NSArray *)landscapeViews withFixedLandscapeHeights:(NSArray *)landscapeHeights;
    #pragma mark - Force Layout// These should be called if views and/or percentages are changed.// Animated is wrapped in animation block- (void) ezLayoutSubviews;
    - (void) ezLayoutSubviewsAnimated;
    #pragma mark - View Ordering 
    @property (nonatomic) BOOL orderSubviewsByTag; // Defaults to 'true'

    ##To 如果你认为这是丢失的东西,请让我知道 ! 以下是我计划在没有具体顺序的情况下进行的。

    • 代码片段

    ##Contact 信息 && 贡献

    你可以在 jhurray33@gmail.com 给我发电子邮件。 我希望听到你对这个问题的想法,或者看看这个已经被使用的例子。

    MIT许可证


    相关文章