TangramKit 在 CocoaPods.org 上

TangramKit

TangramKit 是一个简单易用的 Swift 框架，用于 iOS 视图布局。这个名字来自中国的七巧板，它提供了一些简单功能来构建各种复杂界面。它集成了包括：iOS 的 Autolayout 和 SizeClass、Android 的五个布局类、float 以及 flex-box 和 HTML/CSS 的 bootstrap 等功能。TangramKit 的 Objective-C 版本称为： MyLayout

简体中文：中文说明

用法

有一个容器视图 S，宽度为 100，高度为包裹所有子视图的高度。有四个子视图 A、B、C、D 从上到下排列。
子视图 A 的左侧边距是 S 宽度的 20%，右侧边距是 S 宽度的 30%，高度与 A 的宽度相等。
子视图 B 的左侧边距是 40，宽度填充到 S 的剩余宽度，高度为 40。
子视图 C 的宽度填充到 S，高度为 40。
子视图 D 的右侧边距为 20，宽度为 S 宽度的 50%，高度为 40。

    let S = TGLinearLayout(.vert)
    S.tg_vspace = 10
    S.tg_width.equal(100)
    S.tg_height.equal(.wrap)
    //you can use S.tg_size(width:100, height:.wrap) to instead
    
    let A = UIView()
    A.tg_left.equal(20%)
    A.tg_right.equal(30%)
    A.tg_height.equal(A.tg_width)
    S.addSubview(A)
    
    let B = UIView()
    B.tg_left.equal(40)
    B.tg_width.equal(.fill)
    B.tg_height.equal(40)
    S.addSubview(B)
    
    let C = UIView()
    C.tg_width.equal(.fill)
    C.tg_height.equal(40)
    S.addSubview(C)
    
    let D = UIView()
    D.tg_right.equal(20)
    D.tg_width.equal(50%)
    D.tg_height.equal(40)
    S.addSubview(D)

TangramKit提供了重载运算符：~=、>=、<=、+=、-=、*=、/=，以便实现和类的等价、最大、最小、添加、偏移和乘法方法，因此你可以这样做代替：

let S = TGLinearLayout(.vert)
   S.tg_vspace = 10
   S.tg_width ~=100
   S.tg_height ~=.wrap
   
   let A = UIView()
   A.tg_left ~=20%
   A.tg_right ~=30%
   A.tg_height ~=A.tg_width
   S.addSubview(A)
   
   let B = UIView()
   B.tg_left ~=40
   B.tg_width ~=.fill
   B.tg_height ~=40
   S.addSubview(B)
   
   let C = UIView()
   C.tg_width ~=.fill
   C.tg_height ~=40
   S.addSubview(C)
   
   let D = UIView()
   D.tg_right ~=20
   D.tg_width ~=50%
   D.tg_height ~=40
   S.addSubview(D)

性能比较

创建时间（毫秒）/每个子视图	帧	TangramKit	AutoLayout	Masonry	UIStackView
TGLinearLayout	0.08	0.164	0.219	0.304	0.131
TGFrameLayout	0.05	0.149	0.209	0.273	0.131
TGRelativeLayout	0.079	0.182	0.116	0.359	0.131
TGFlowLayout	0.08	0.107	0.198	0.258	0.131
TGFloatLayout	0.044	0.148	0.203	0.250	0.131

布局时间（毫秒）/每个子视图	TangramKit	AutoLayout	Masonry	UIStackView
TGLinearLayout	0.049	0.269	0.269	0.272
TGFrameLayout	0.042	0.243	0.243	0.272
TGRelativeLayout	0.068	0.274	0.274	0.272
TGFlowLayout	0.036	0.279	0.279	0.272
TGFloatLayout	0.055	0.208	0.208	0.272

架构

TGLayoutPos

TGLayoutPos表示视图的位置。UIView提供了六个扩展变量：tg_left、tg_top、tg_bottom、tg_right、tg_centerX、tg_centerY来设置视图的边距或与其他视图之间的空间距离。

TGLayoutSize

TGLayoutSize表示视图的大小。UIView提供了两个扩展变量：tg_width、tg_height用来设置视图的宽度和高度维度。有三个特殊的TGLayoutSize常数对象：.wrap、.fill、.average，分别表示：包裹所有子视图大小、填充到父视图的剩余大小、平均父视图的大小。

TGWeight

TGWeight用于设置相对位置和维度。TangramKit重载了%运算符，以便轻松构建TGWeight对象。例如20%等于TGWeight(20)。

TGLinearLayout

与iOS的UIStackView和Android的LinearLayout等价。

线性布局是一个单行布局视图，其子视图按添加顺序排列（自上而下或自左至右）。因此，子视图的起始大小约束由添加顺序确定。按上下顺序排列的视图称为垂直线性布局视图，而按左右顺序排列的视图则称为水平线性布局。

override func loadView() {
        
        
            super.loadView()
        
            let S = TGLinearLayout(.vert)
            S.tg_width.equal(120)
            S.tg_height.equal(.wrap)
            S.tg_vspace = 10
            
            let A = UIView()
            A.tg_left.equal(5)
            A.tg_right.equal(5)
            A.tg_width.equal(100)
            A.tg_height.equal(40)
            S.addSubview(A)
            
            let B = UIView()
            B.tg_left.equal(20)
            B.tg_width.equal(40)
            B.tg_height.equal(40)
            S.addSubview(B)
            
            let C = UIView()
            C.tg_right.equal(40)
            C.tg_width.equal(50)
            C.tg_height.equal(40)
            S.addSubview(C)
            
            let D = UIView()
            D.tg_left.equal(10)
            D.tg_right.equal(10)
            D.tg_width.equal(100)
            D.tg_height.equal(40)
            S.addSubview(D)
            
            self.view.addSubview(S)
            S.backgroundColor = .red
            A.backgroundColor = .green
            B.backgroundColor = .blue
            C.backgroundColor = .orange
            D.backgroundColor = .cyan
     }

TGRelativeLayout

与iOS的AutoLayout和Android的RelativeLayout等价。

相对布局是通过互相关约束来布局和定位子视图的布局视图。相对布局中的子视图不依赖于添加顺序，而是通过设置子视图的约束来布局和定位。

override func loadView() {
        
        
            super.loadView()
        
        let S = TGRelativeLayout()
        S.tg_width.equal(170).and().tg_height.equal(280)
        
        let A = UIView()
        A.tg_left.equal(20).and().tg_top.equal(20)
        A.tg_width.equal(40).and().tg_height.equal(A.tg_width)
        S.addSubview(A)
        
        let B = UIView()
        B.tg_left.equal(A.tg_centerX).and().tg_top.equal(A.tg_bottom).offset(10)
        B.tg_width.equal(60).and().tg_height.equal(A.tg_height)
        S.addSubview(B)
        
        let C = UIView()
        C.tg_left.equal(B.tg_right).offset(10)
        C.tg_bottom.equal(B.tg_bottom)
        C.tg_width.equal(40)
        C.tg_height.equal(B.tg_height, multiple:0.5)
        S.addSubview(C)
        
        let D = UIView()
        D.tg_bottom.equal(C.tg_top).offset(10)
        D.tg_right.equal(15)
        D.tg_height.equal(A.tg_height)
        D.tg_width.equal(D.tg_height)
        S.addSubview(D)
        
        let E = UIView()
        E.tg_centerY.equal(0)
        E.tg_centerX.equal(0)
        E.tg_height.equal(40)
        E.tg_width.equal(S.tg_width).add(-20)
        S.addSubview(E)
        //...F,G
        
            self.view.addSubview(S)
            S.backgroundColor = .red
            A.backgroundColor = .green
            B.backgroundColor = .blue
            C.backgroundColor = .orange
            D.backgroundColor = .cyan
            E.backgroundColor = .magenta
       }

TGFrameLayout

与Android的FrameLayout等价。

帧布局是一种布局视图，子视图可以在父视图的特定位置重叠和定位。子视图的布局位置和大小不依赖于添加顺序，并与父视图建立依赖约束。帧布局将垂直方向划分为顶部、垂直居中和底部，而水平方向则划分为左侧、水平居中和右侧。任何子视图都可在垂直方向或水平方向进行重力定位。

 override func loadView() {
        
        
        super.loadView()
        
        let S = TGFrameLayout()
        S.tg_width.equal(320)
        S.tg_height.equal(500)
        
        let A = UIView()
        A.tg_width.equal(40)
        A.tg_height.equal(40)
        S.addSubview(A)
        
        let B = UIView()
        B.tg_width.equal(40)
        B.tg_height.equal(40)
        B.tg_right.equal(0)
        S.addSubview(B)
        
        let C = UIView()
        C.tg_width.equal(40)
        C.tg_height.equal(40)
        C.tg_centerY.equal(0)
        S.addSubview(C)
        
        let D = UIView()
        D.tg_width.equal(40)
        D.tg_height.equal(40)
        D.tg_centerY.equal(0)
        D.tg_centerX.equal(0)
        S.addSubview(D)
        
        //..E，F,G
        
        self.view.addSubview(S)
        S.backgroundColor = .red
        A.backgroundColor = .green
        B.backgroundColor = .blue
        C.backgroundColor = .orange
        D.backgroundColor = .cyan
}

TGTableLayout

与Android的TableLayout和HTML表格等价。

表格布局是一个多行多列排列的子视图的布局视图，类似于表格。首先必须创建行视图并将其添加到表格布局中，然后添加子视图到行视图中。如果行视图按上下顺序排列，该表格视图称为垂直表格布局，其中子视图从左到右排列；如果行视图按左右顺序排列，该表格视图称为水平表格布局，其中子视图从上到下排列。

   override func loadView() {
        
        
        super.loadView()
        
        let S = TGTableLayout(.vert)
        S.tg_height.equal(.wrap)
        S.tg_width.equal(.wrap)
        S.tg_vspace = 10
        S.tg_hspace = 10
        
        
        S.tg_addRow(size:TGLayoutSize.wrap,colSize:TGLayoutSize.wrap)
        
        let A = UIView()
        A.tg_width.equal(50)
        A.tg_height.equal(40)
        S.addSubview(A)
        
        let B = UIView()
        B.tg_width.equal(100)
        B.tg_height.equal(40)
        S.addSubview(B)
        
        let C = UIView()
        C.tg_width.equal(30)
        C.tg_height.equal(40)
        S.addSubview(C)
        
        S.tg_addRow(size:TGLayoutSize.wrap,colSize:TGLayoutSize.wrap)
        
        let D = UIView()
        D.tg_width.equal(200)
        D.tg_height.equal(40)
        S.addSubview(D)
        
        //...E,F  
        
        self.view.addSubview(S)
        S.backgroundColor = .red
        A.backgroundColor = .green
        B.backgroundColor = .blue
        C.backgroundColor = .orange
        D.backgroundColor = .cyan       
}

TGFlowLayout

相当于CSS3中的flexbox。

流式布局是一种在多行展示的布局视图，子视图按照添加顺序依次排列，遇到排列约束时将开始新的一行并重新排列。这里提到的约束包括计数约束和大小约束。新的一行方向可以是垂直或水平，因此流式布局分为：计数约束垂直流式布局、大小约束垂直流式布局、计数约束水平流式布局、大小约束水平流式布局。流式布局常用于子视图排列规则的场景，在一定程度上可以替代UICollectionView。TGFlowLayout几乎实现了HTML/CSS中的flex-box功能。

   override func loadView() {
        
        
        super.loadView()
        
        let S = TGFlowLayout(.vert,arrangedCount:4)
        S.tg_height.equal(.wrap)
        S.tg_width.equal(300)
        S.tg_padding = UIEdgeInsetsMake(10,10,10,10)
        S.tg_gravity = TGGravity.horz.fill
        S.tg_space = 10
        
        for _ in 0 ..< 10
        {
            let A = UIView()
            A.tg_height.equal(A.tg_width)
            S.addSubview(A)
            
            A.backgroundColor = .green
        }
        
        self.view.addSubview(S)
        S.backgroundColor = .red
}

TGFloatLayout

相当于CSS中的浮动。

浮动布局是一种子视图沿给定方向浮动的布局视图，当空间不足时，会自动找到最佳的重力点。浮动布局的概念借鉴自HTML/CSS的浮动定位技术，因此浮动布局可以用于实现不规则布局。根据浮动的不同方向，浮动布局可以分为左右浮动布局和上下浮动布局。

     override func loadView() {
        
        
        super.loadView()
        
        let S = TGFloatLayout(.vert)
        S.tg_height.equal(.wrap)
        S.tg_width.equal(300)
        S.tg_padding = UIEdgeInsetsMake(10,10,10,10)
        S.tg_space = 10
        
        let A = UIView()
        A.tg_width.equal(80)
        A.tg_height.equal(70)
        S.addSubview(A)
        
        let B = UIView()
        B.tg_width.equal(150)
        B.tg_height.equal(40)
        S.addSubview(B)
        
        let C = UIView()
        C.tg_width.equal(70)
        C.tg_height.equal(40)
        S.addSubview(C)
        
        let D = UIView()
        D.tg_width.equal(100)
        D.tg_height.equal(140)
        S.addSubview(D)
        
        let E = UIView()
        E.tg_width.equal(150)
        E.tg_height.equal(40)
        E.tg_reverseFloat = true
        S.addSubview(E)
        
        let F = UIView()
        F.tg_width.equal(120)
        F.tg_height.equal(60)
        S.addSubview(F)
      
        self.view.addSubview(S)
        S.backgroundColor = .red
        A.backgroundColor = .green
        B.backgroundColor = .blue
        C.backgroundColor = .orange
        D.backgroundColor = .black
        E.backgroundColor = .magenta
        F.backgroundColor = .white
}

TGPathLayout

是iOS的独特布局视图。

路径布局是一种子视图根据指定的路径曲线进行布局的视图。您必须提供一个函数方程类型、坐标和距离设置类型以创建路径曲线，从而使所有子视图在路径布局中等距排列。路径布局通常用于创建一些不规则且华丽的UI布局。

示例代码

override func loadView() 
{
       
   super.loadView()
   
   let S = TGPathLayout()
   S.tg_width.equal(320)
   S.tg_height.equal(320)
   S.tg_coordinateSetting.isReverse = true
   S.tg_coordinateSetting.origin = CGPoint(x: 0.5, y: 0.2) 
   S.tg_polarEquation = { 80 * (1 + cos(CGFloat($0))) } // r = a *(1 + cos(𝛉))
   
   for _ in 0 ..< 4
   {
       let A = UIView()
       A.tg_size(width:40,height:40)
       S.addSubview(A)
       
       A.backgroundColor = .green
   }

   self.view.addSubview(S)
   S.backgroundColor = .red
}

TGViewSizeClass

相当于iOS中的尺寸类。

TangramKit 为 SizeClass 提供了支持，以便适应设备的不同屏幕尺寸。您可以将 SizeClass 与上面提到的任何 6 种布局视图结合使用，以完美适应所有设备的 UI。

    public func tg_fetchSizeClass(with type:TGSizeClassType, from srcType:TGSizeClassType! = nil) ->TGViewSizeClass

//all device
let rootLayout = TGLinearLayout(.vert)
        rootLayout.tg_padding = UIEdgeInsetsMake(10, 10, 10, 10);
        rootLayout.tg_vspace = 10
        rootLayout.tg_hspace = 10
        
//iPhone landscape orientation.
let lsc = rootLayout.tg_fetchSizeClass(with: .comb(.any, .compact, nil), from:.default) as! TGLinearLayoutViewSizeClass
        lsc.tg_orientation = .horz

演示示例

如何开始

下载 TangramKit

交流

如需帮助，请使用 Stack Overflow 或百度。（标签'TangramKit'）
如希望联系我，请使用 qq:156355113 或 weibo:欧阳大哥或 email:[email protected]
如果您发现了一个错误，并能提供可靠的重现步骤，请打开一个问题。
如果您有功能请求，请打开一个问题。
如果您想做出贡献，请提交一个拉取请求。

安装

TangramKit 支持多种在项目中安装库的方法。

复制到您的项目中

将演示项目中的 TangramKit 文件夹复制到您的项目中

使用 CocoaPods 安装

CocoaPods 是一个 Objective-C 的依赖管理器，它可以自动简化在项目中使用类似于 TangramKit 的第三方库的过程。您可以使用以下命令安装它

$ gem install cocoapods

要将 TangramKit 集成到您的 Xcode 项目中使用 CocoaPods，请在 Podfile 中指定它。

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'

pod 'TangramKit'

然后，运行以下命令

$ pod install

使用 Carthage

创建一个 Cartfile 文件。
```
github "youngsoft/TangramKit"
```
运行 carthage update。
在您的应用程序目标“通用”设置选项卡的“链接框架和库”部分中，从磁盘上的 Carthage/Build 文件夹中将 TangramKit 框架拖放到其中。
在您的应用程序目标“构建阶段”设置选项卡上，单击“+”图标，然后选择“新建运行脚本阶段”。创建一个运行脚本，其中指定您的 shell（例如：bin/sh），然后在 shell 下方的内容区域添加以下内容
```
/usr/local/bin/carthage copy-frameworks
```
并添加以下路径到“输入文件”，例如
```
$(SRCROOT)/Carthage/Build/iOS/TangramKit.framework
```

常见问题解答

如果您使用 TangramKit 运行时出现 100% CPU 使用率，并且出现了约束冲突，请检查子视图的约束集。

许可证

TangramKit 采用 MIT 许可证发布。有关详细信息，请参阅 LICENSE 文件。

感谢合作伙伴

闫涛: Github 个人主页 张光凯: Github 个人主页 周杰: Github 阳光不锈: Github Hanwp: Github 博客 X: Github

版本历史

CHANGELOG.md

TangramKit 1.4.2

TangramKit 1.4.2

TangramKit 1.4.2

TangramKit

简体中文：中文说明

用法

性能比较

架构

TGLayoutPos

TGLayoutSize

TGWeight

TGLinearLayout

TGRelativeLayout

TGFrameLayout

TGTableLayout

TGFlowLayout

TGFloatLayout

TGPathLayout

TGViewSizeClass

演示示例

如何开始

交流

安装

复制到您的项目中

使用 CocoaPods 安装

使用 Carthage

常见问题解答

许可证

感谢合作伙伴

版本历史

TangramKit 1.4.2

TangramKit 1.4.2

TangramKit 1.4.2

TangramKit

简体中文： 中文说明

用法

性能比较

架构

TGLayoutPos

TGLayoutSize

TGWeight

TGLinearLayout

TGRelativeLayout

TGFrameLayout

TGTableLayout

TGFlowLayout

TGFloatLayout

TGPathLayout

TGViewSizeClass

演示示例

如何开始

交流

安装

复制到您的项目中

使用 CocoaPods 安装

使用 Carthage

常见问题解答

许可证

感谢合作伙伴

版本历史

简体中文：中文说明