IOS----TangramKit 布局框架

TangramKit布局框架

原创

已于 2022-12-29 16:27:56 修改 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ios #xcode #macos #TangramKit

于 2022-12-29 16:24:59 首次发布

TangramKit是一款基于Swift3.0的iOS界面布局框架，支持多种布局方式，包括线性、相对、框架、表格、流式、浮动及路径布局，能够灵活构造复杂的UI界面。

文章目录

github: https://github.com/youngsoft/TangramKit/blob/master/README.zh.md

TangramKit是一套在Swift3.0语言上开发的iOS界面视图布局框架。它的名字来源于中国古代的玩具七巧板，寓意着可以用简单的功能来构造出各种千变万化且非常复杂的UI界面。TangramKit的内核是基于对UIView的layoutSubviews方法的重载以及对子视图的bounds和center属性的设置而实现的。

系统结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YGPkCJSe-1672301971447)(/assets/upload/note/2022/11/e898c436006a28c4c4a6603833dbd778.png)]

CocoaPods安装

gem install cocoapods

为了用CocoaPods整合TangramKit到您的Xcode工程, 请建立如下的Podfile:

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

pod 'TangramKit'

然后运行如下命令

pod install

举例下面一个应用场景:

有一个容器视图S的宽度是100而高度则是由四个从上到下依次排列的子视图A,B,C,D的高度总和。
视图A的左边距占用父视图宽度的20%，而右边距则占用父视图宽度的30%，高度则等于自身的宽度。
视图B的左边距是40，宽度则占用父视图的剩余宽度，高度是40。
视图C的宽度占用父视图的所有宽度，高度是40。
视图D的右边距是20，宽度是父视图宽度的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)

重载了运算符：~=、>=、<=、+=、-=、*=、/= 来实现布局尺寸类TGLayoutSize和布局位置类
TGLayoutPos的equal,max,min,add,offset,multiply方法。因此您也可以将代码写成如下方式

 let S = TGLinearLayout(.vert)
    S.tg_vspace = 10
    S.tg_width ~=1

最低0.47元/天解锁文章