Swift iOS界面视图布局框架 TangramKit

TangramKit是一套在Swift3.0语言上开发的iOS界面视图布局框架。它的名字来源于中国古代的玩具七巧板，寓意着可以用简单的功能来构造出各种千变万化且非常复杂的UI界面。TangramKit的内核是基于对UIView的layoutSubviews方法的重载以及对子视图的bounds和center属性的设置而实现的。TangramKit功能强大而且简单易用，它集成了:iOS Autolayout和SizeClass、android的5大布局体系、HTML/CSS的浮动定位技术以及flex-box和bootstrap框架等市面上主流的平台的界面布局功能，同时提供了一套非常简单和完备的多屏幕尺寸适配的解决方案。TangramKit的objective-C版本的名字叫做：MyLayout

您可以加入到QQ群：178573773 或者添加个人QQ：156355113 来跟我讨论或者邮件：obq0387_cn@sina.com 联系我。

演示效果图

应用场景

举例下面一个应用场景:

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

最终的效果图如下：

Swift iOS界面视图布局框架 TangramKit

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

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)

系统结构

Swift iOS界面视图布局框架 TangramKit

布局位置类TGLayoutPos

TGLayoutPos类是用来描述一个视图所在的位置的类。UIView中扩展出了tg_left,tg_top,tg_bottom,tg_right,tg_centerX,tg_centerY这六个变量来实现视图的定位操作。您可以用这些变量的equal方法来设置视图之间的边距和间距。

布局尺寸类TGLayoutSize

TGLayoutSize类是用来描述一个视图的尺寸的类。UIView中扩展出了tg_width,tg_height这两个变量来实现视图的宽度和高度尺寸的设置。您可以用其中的equal方法来设置视图的宽度和高度。系统提供了三个常量的布局尺寸值：.wrap, .fill, .average 来分别表示尺寸包裹所有子视图，尺寸填充父视图的剩余空间，尺寸均分父视图的剩余空间。

布局比重值类TGWeight

TGWeight类用来设置相对的位置和尺寸的值。相对值表明视图的位置或者尺寸是占用父视图的剩余空间或者父视图空间的比例值。为了方便使用，您可以用重载的运算符%来构建一个TGWeight对象，比如20%就等价于TGWeight(20).

线性布局TGLinearLayout

等价于iOS的UIStackView和android的LinearLayout布局。

线性布局是一种里面的子视图按添加的顺序从上到下或者从左到右依次排列的单列(单行)布局视图，因此里面的子视图是通过添加的顺序建立约束和依赖关系的。子视图从上到下依次排列的线性布局视图称为垂直线性布局视图，而子视图从左到右依次排列的线性布局视图则称为水平线性布局。

Swift iOS界面视图布局框架 TangramKit

示例代码:

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布局。

相对布局是一种里面的子视图通过相互之间的约束和依赖来进行布局和定位的布局视图。相对布局里面的子视图的布局位置和添加的顺序无关，而是通过设置子视图的相对依赖关系来进行定位和布局的。

Swift iOS界面视图布局框架 TangramKit

示例代码:

 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布局。

框架布局是一种里面的子视图停靠在父视图特定方位并且可以重叠的布局视图。框架布局里面的子视图的布局位置和添加的顺序无关，只跟父视图建立布局约束依赖关系。框架布局将垂直方向上分为上、中、下三个方位，而水平方向上则分为左、中、右三个方位，任何一个子视图都只能定位在垂直方向和水平方向上的一个方位上。

Swift iOS界面视图布局框架 TangramKit

示例代码:

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的table元素。

表格布局是一种里面的子视图可以像表格一样多行多列排列的布局视图。子视图添加到表格布局视图前必须先要建立并添加行视图，然后再将子视图添加到行视图里面。如果行视图在表格布局里面是从上到下排列的则表格布局为垂直表格布局，垂直表格布局里面的子视图在行视图里面是从左到右排列的；如果行视图在表格布局里面是从左到右排列的则表格布局为水平表格布局，水平表格布局里面的子视图在行视图里面是从上到下排列的。

Swift iOS界面视图布局框架 TangramKit

示例代码:

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的flex-box。

流式布局是一种里面的子视图按照添加的顺序依次排列，当遇到某种约束限制后会另起一行再重新排列的多行展示的布局视图。这里的约束限制主要有数量约束限制和内容尺寸约束限制两种，而换行的方向又分为垂直和水平方向，因此流式布局一共有垂直数量约束流式布局、垂直内容约束流式布局、水平数量约束流式布局、水平内容约束流式布局。流式布局主要应用于那些子视图有规律排列的场景，在某种程度上可以作为UICollectionView的替代品。

Swift iOS界面视图布局框架 TangramKit

示例代码:

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中的float定位。

浮动布局是一种里面的子视图按照约定的方向浮动停靠，当尺寸不足以被容纳时会自动寻找最佳的位置进行浮动停靠的布局视图。浮动布局的理念源于HTML/CSS中的浮动定位技术,因此浮动布局可以专门用来实现那些不规则布局或者图文环绕的布局。根据浮动的方向不同，浮动布局可以分为左右浮动布局和上下浮动布局。

Swift iOS界面视图布局框架 TangramKit

示例代码:

 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
}

SizeClass的支持

等价于iOS的Size Classes

TangramKit布局体系为了实现对不同屏幕尺寸的设备进行适配，提供了对Size Classes的支持。您可以将Size Classes和上述的6种布局搭配使用，以便实现各种设备界面的完美适配。系统提供1个UIView的扩展方法：

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

来实现对Size Classes的支持。比如下面的例子：

//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

使用方法

直接拷贝

将github工程中的Lib文件夹下的所有文件复制到您的工程中。

CocoaPods安装

如果您还没有安装cocoapods则请先执行如下命令：

$ gem install cocoapods

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

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

pod 'TangramKit', '~> 1.0.0'

然后运行如下命令:

$ pod install

MyLayout和TangramKit的差异

库的名称由MyLayout变为TangramKit，Tangram的中文意思是七巧板，意思是可以支持千变万化的界面布局。
所有的类名都以TG开头，所有的方法和属性都以tg_开头。
增加了TGWeight类型，用来设置那些位置和尺寸是相对值的场景。比如宽度和父视图保持一致： tg_width.equal(100%)。
删除了weight扩展属性，统一通过TGLayoutPos,TGLayoutSize的equal方法来设置，其值类型就是上面的TGWeight。比如原来的A.weight = 1 变为 A.tg_width.equal(100%)
废除了线性布局和框架布局的位置设置为大于0小于1时所表示的相对值的概念，统一由新的类型TGWeight来表示相对值。
废除了垂直线性布局默认wrapContentHeight，以及水平线性布局默认wrapContentWidth的特性。需要自己去设置包裹属性。
增加了TGLayoutSize的方法equal能够设置的值的类型：.wrap 表示包裹值，表示视图的尺寸由内容或者子视图决定；.fill表示填充值，表示视图的尺寸填充父视图的剩余空间。
删除了布局视图的wrapContentHeight,wrapContentWidth属性，统一由TGLayoutSize设置为.wrap类型的值。比如原来的A.wrapContentWidth = YES 变为 A.tg_width.equal(.wrap)
删除了框架布局子视图的marginGravity属性扩展，直接通过TGLayoutPos设置来实现定位。
删除了子视图的扩展属性flexedHeight，而是直接由TGLayoutSize设置为.wrap来表示。

License

TangramKit is released under the MIT license. See LICENSE for details.

Swift iOS界面视图布局框架 TangramKit

演示效果图

应用场景

系统结构

布局位置类TGLayoutPos

布局尺寸类TGLayoutSize

布局比重值类TGWeight

线性布局TGLinearLayout

相对布局TGRelativeLayout

框架布局TGFrameLayout

表格布局TGTableLayout

流式布局TGFlowLayout

浮动布局TGFloatLayout

SizeClass的支持

使用方法

直接拷贝

CocoaPods安装

MyLayout和TangramKit的差异

License

相关开源代码

跟随手势滑动的ScrollableTextField

斯坦福Swift iOS10课程第4章Views 代码

HEPhotoPicker(类似微博的照片选择器，新增选择视频，切换相册等功能呢)

Swift 卡片滑块 Card Slider

类似微博照片选择器

类似OFO的Swift版本验证码输入

Swift 动画开关AsunAnimationSwitch

导航工具栏库Navigation Toolbar

IPhoneX下拉动画 Swift版本

极其精美而又强大的 iOS 图表组件库 AAChartKit-Swift

热门帖子

最新帖子