GranadaLayout 0.4.1

GranadaLayout 0.4.1

×

测试已测试✓
Lang语言 Obj-CObjective C
许可证 Apache 2
发布最后发布2016年3月

由Jose Alcalá Correa维护。

GranadaLayout 0.4.1

GranadaLayout是iOS的一个替代布局系统，受到Android布局系统的启发。它包括相对和线性布局系统，允许自动定位视图并响应大小变化，而无需考虑视图边框。

此项目的目标是成为一种可替代Apple的AutoLayout的方案，我发现AutoLayout在某些情况下并不直观，而且在一些旧设备上的性能较差。我认为这个系统还允许更容易的动画，并且提供的布局填充器允许不要混合界面和逻辑代码。

master

0.4.0

可以做什么

  • 在GRXLinearLayout中，视图可以水平或垂直排列，也可以通过定义权重来排列。
  • 视图可以在GRXRelativeLayout中相对于对方排列，或者相对于父视图。
  • 添加自定义视图类型支持非常简单，您只需在子类中重写grx_measureForWidthSpec:heightSpec:方法，或将grx_measureBlock设置为对象。
  • 提供了一个布局填充器，允许您分离布局和逻辑，通过简单的JSON文件以声明性方式定义布局（以下为例）
  • 所有用于布局的必要属性都已在一个薄的UIView类中实现，因此所有UIKit视图都是默认支持的
  • 布局速度非常快，只有当父视图发生变化时，需要测量的视图才会被测量和布局。
  • 可以在UITableViewCell和UICollectionViewCell内部使用，也可用于计算单元格大小
  • 兼容iOS 6及以上
  • 它可以与NUI一起使用，这是一个类似于CSS的样式系统

请查看变更日志和许可证。

当前状态

  • RelativeLayout已完全实现
  • LinearLayout已完全实现
  • 有视图类别以支持一些UIKit视图的大小测量
  • 启用了某些测试控制器
  • 根据测量规范缓存视图大小以增加性能
  • 有一些单元和快照测试

待办事项

  • 进一步测试
  • 添加更多示例
  • 添加UILabel、UITextView、UIImage子类以避免手动调用-grx_setNeedsLayoutInParent。

安装

示例

该仓库包含一个示例项目，展示了如何使用GranadaLayout。您可以自由地查看那里的代码。

使用布局文件

推荐使用GranadaLayout的方式是在布局文件中声明您的布局（我喜欢使用.grx扩展名）

{
  "version" : "0.4",

  /** Space reserved for future attributes */

  "layout" : {
    "class" : "GRXRelativeLayout", // The root view can be a GRXLayout, but also any other UIView

    "width" : "300",  // This layout will have a width of exactly 300px
    "height" : "wrap_content",  // This layout will be just tall enough to fit its contents

    "debug_bgColor" : "white",  // To ease debug, you can define the background color. Will not be applied in release builds
    "padding" : "12", // Internal padding of the layout. Applies only to GRXLayout subclasses

    "subviews" : [
      {
        "id" : "top", // You can optionally set an identifier so that other views define their position, and to retrieve it from code
        "class" : "GRXRelativeLayout",  // You can embed layouts in other layouts
        "width" : "match_parent",       // Fill the superview width
        "height" : "wrap_content",      // Fit to content

        "subviews" : [
          {
            "id" : "image",
            "class" : "UIImageView",
            "width" : "96",
            "height" : "128",

            "alignParentLeft" : "true", // properties to set alignment with respect to the parent
            "alignParentTop" : "true",

            "marginRight" : "8",  // views can also define a margin
            "visibility" : "visible", // and their visibility, which can be 'visible', 'hidden' or 'gone'

            "debug_bgColor" : "blue"
          },
          {
            "id" : "title",
            "class" : "GRXTextView", // GRXTextView is a subclass of UITextView which is ready to be layouted, without margins and scroll
            "nuiClass" : "title", // If you use NUI, you can set the nuiClass directly to customize this view
            "width" : "match_parent",
            "height" : "wrap_content",

            "toRightOf" : "image",  // set position with respect to other view
            "alignParentTop" : "true",

            "debug_bgColor" : "yellow"
          },
          {
            "id" : "subtitle",
            "class" : "UILabel",
            "width" : "match_parent",
            "height" : "wrap_content",

            "alignLeft" : "title",
            "below" : "title",
            "marginTop" : "8",

            "debug_bgColor" : "red"
          },
        ]
      },
      {
        "id" : "message",
        "class" : "GRXTextView",
        "width" : "match_parent",
        "height" : "wrap_content",

        "below" : "top",
        "marginTop" : "8",

        "debug_bgColor" : "orange"
      },
    ]
  }  
}

然后，要在内置的UIViewController或自定义视图中使用它，只需加载它并更改您想更改的属性

GRXLayoutInflater *inflater = [[GRXLayoutInflater alloc] initWithBundleFile:@"layout.grx"];

self.view = inflater.rootView;
UIImageView *image = [inflater viewWithIdentifier:@"image"];
image.backgroundColor = [UIColor blueColor];
image.contentMode = UIViewContentModeScaleAspectFit;

GRXTextView * title = [self.view grx_viewWithIdentifier:@"title"]; // alternative way to find a view
title.text = @"Title goes here";
title.textColor = [UIColor darkGrayColor];

UILabel * subtitle = [self.view grx_viewWithIdentifier:@"subtitle"];
subtitle.text = @"Subtitle goes here";

如果您更改了可能影响其尺寸的视图的任何属性，只需调用-grx_setNeedsLayoutInParent以使其实际尺寸无效并重新布局。

title.text = @"This text is longer and should occupy more lines";
title.numberOfLines = 2;

[title grx_setNeedsLayoutInParent];

动画也非常简单

image.grx_visibility = GRXVisibilityGone; // will hide the image and expand the text to the left
[image grx_setNeedsLayoutInParent];

[UIView animateWithDuration:0.5 animations:^{
    [self.view layoutIfNeeded];
}];

只需代码

// 请检查测试控制器以查看其工作原理，但说实话，使用布局文件会更好！

感谢 + 致谢

  • 向Android项目开发者表示感谢，他们设计了这样一个简单而强大的布局系统

合作

欢迎合作、帮助和建议：）

许可协议

该项目采用Apache License 2.0许可，就像Android项目一样

一些分析

Bitdeli Badge