iOS界面布局的核心以及TangramKit介绍

2022年01月16日 阅读数:3
这篇文章主要向大家介绍iOS界面布局的核心以及TangramKit介绍,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

TangramKit 

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


演示效果图

iOS界面布局的核心以及TangramKit介绍_表格布局


iOS界面布局的核心以及TangramKit介绍_线性布局_02

iOS界面布局的核心以及TangramKit介绍_表格布局_03  

iOS界面布局的核心以及TangramKit介绍_表格布局_04

iOS界面布局的核心以及TangramKit介绍_线性布局_05

iOS界面布局的核心以及TangramKit介绍_子视图_06

iOS界面布局的核心以及TangramKit介绍_表格布局_07



应用场景

举例下面一个应用场景:android


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

最终的效果图以下:ios

iOS界面布局的核心以及TangramKit介绍_子视图_08

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方法。所以您也能够将代码写成以下方式:git

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)



系统结构

iOS界面布局的核心以及TangramKit介绍_表格布局_09

布局位置类TGLayoutPos




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

布局尺寸类TGLayoutSize



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


布局比重值类TGWeight



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


线性布局TGLinearLayout



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

iOS界面布局的核心以及TangramKit介绍_线性布局_10

示例代码:ide

let rootLayout = TGLinearLayout(.vert)
rootLayout.tg_width(.wrap)
rootLayout.tg_height(.wrap)
rootLayout.tg_vspace = 10let A = UIView()
A.tg_left.equal(5)
A.tg_right.equal(5)
A.tg_width.equal(100)
A.tg_height.equal(40)
rootLayout.addSubview(A)let B = UIView()
B.tg_left.equal(20)
B.tg_width.equal(40)
B.tg_height.equal(40)
rootLayout.addSubview(B)let C = UIView()
C.tg_right.equal(40)
C.tg_width.equal(50)
C.tg_height.equal(40)
rootLayout.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)
rootLayout.addSubview(D)



相对布局TGRelativeLayout



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

iOS界面布局的核心以及TangramKit介绍_表格布局_11

示例代码:

let rootLayout = TGRelativeLayout()
rootLayout.tg_width(.wrap)
rootLayout.tg_height(.wrap)let A = UIView()
A.tg_left.equal(20)
A.tg_top.equal(20)
A.tg_width.equal(40)
A.tg_height.equal(A.tg_width)
rootLayout.addSubview(A)let B = UIView()
B.tg_left.equal(A.tg_centerX)
B.tg_top.equal(A.tg_bottom)
B.tg_width.equal(60)
B.tg_height.equal(A.tg_height)
rootLayout.addSubview(B)let C = UIView()
C.tg_left.equal(B.tg_right)
C.tg_width.equal(40)
C.tg_height.equal(B.tg_height, multiple:0.5)
rootLayout.addSubview(C)let D = UIView()
D.tg_bottom.equal(C.tg_top)
D.tg_right.equal(20)
D.tg_height.equal(A.tg_height)
D.tg_width.equal(D.tg_height)
rootLayout.addSubview(D)let E = UIView()
E.centerYPos.equalTo(0)
E.tg_height.equal(40)
E.tg_width.equal(rootLayout.tg_width)
rootLayout.addSubview(E)//...F,G



框架布局TGFrameLayout



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

iOS界面布局的核心以及TangramKit介绍_表格布局_12

示例代码:

let rootLayout = TGRelativeLayout()
rootLayout.tg_width(.wrap)
rootLayout.tg_height(.wrap)let A = UIView()
A.tg_left.equal(20)
A.tg_top.equal(20)
A.tg_width.equal(40)
A.tg_height.equal(A.tg_width)
rootLayout.addSubview(A)let B = UIView()
B.tg_left.equal(A.tg_centerX)
B.tg_top.equal(A.tg_bottom)
B.tg_width.equal(60)
B.tg_height.equal(A.tg_height)
rootLayout.addSubview(B)let C = UIView()
C.tg_left.equal(B.tg_right)
C.tg_width.equal(40)
C.tg_height.equal(B.tg_height, multiple:0.5)
rootLayout.addSubview(C)let D = UIView()
D.tg_bottom.equal(C.tg_top)
D.tg_right.equal(20)
D.tg_height.equal(A.tg_height)
D.tg_width.equal(D.tg_height)
rootLayout.addSubview(D)let E = UIView()
E.centerYPos.equalTo(0)
E.tg_height.equal(40)
E.tg_width.equal(rootLayout.tg_width)
rootLayout.addSubview(E)//...F,G


 

 


表格布局TGTableLayout



表格布局是一种里面的子视图能够像表格同样多行多列排列的布局视图。子视图添加到表格布局视图前必须先要创建并添加行视图,而后再将子视图添加到行视图里面。若是行视图在表格布局里面是从上到下排列的则表格布局为垂直表格布局,垂直表格布局里面的子视图在行视图里面是从左到右排列的;若是行视图在表格布局里面是从左到右排列的则表格布局为水平表格布局,水平表格布局里面的子视图在行视图里面是从上到下排列的。

iOS界面布局的核心以及TangramKit介绍_线性布局_13

示例代码:

let rootLayout = TGTableLayout(.vert)
rootLayout.tg_height.equal(.wrap)
rootLayout.tg_width.equal(500)


rootLayout.tg_addRow(size:TGLayoutSize.wrap,colSize:TGLayoutSize.fill) let A = UIView()
A.tg_width(50)
A.tg_height(40)
rootLayout.addSubview(A) let B = UIView()
B.tg_width(100)
B.tg_height(40)
rootLayout.addSubview(B) let C = UIView()
C.tg_width(30)
C.tg_height(40)
rootLayout.addSubview(C)


rootLayout.tg_addRow(size:TGTableLayout.wrap,colSize:TGTableLayout.fill) let D = UIView()
D.tg_width(180)
D.tg_height(40)
rootLayout.addSubview(D) //...E,F

 


流式布局TGFlowLayout



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

iOS界面布局的核心以及TangramKit介绍_子视图_14

示例代码:

let rootLayout = TGFlowLayout(.vert,arrangedCount:4)
rootLayout.tg_height.equal(.wrap)
rootLayout.tg_width.equal(300)
rootLayout.tg_averageArrange = true
rootLayout.tg_space = 10


for _ in 0 ..< 10
{ let A = UIView()
A.tg_height.equal(A.tg_width)
rootLayout.addSubview(A)
}

   

浮动布局TGFloatLayout



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

iOS界面布局的核心以及TangramKit介绍_表格布局_15

示例代码:


   

let rootLayout = TGFloatLayout(.vert)
rootLayout.tg_height.equal(.wrap)
rootLayout.tg_width.equal(300) let A = UIView()
A.tg_height.equal(80)
A.tg_width.equal(70)
rootLayout.addSubview(A) let B = UIView()
B.tg_height.equal(150)
B.tg_width.equal(40)
rootLayout.addSubview(B) let C = UIView()
C.tg_height.equal(70)
C.tg_width.equal(40)
rootLayout.addSubview(C) let D = UIView()
D.tg_height.equal(140)
D.tg_width.equal(140)
rootLayout.addSubview(D) let E = UIView()
E.tg_height.equal(150)
E.tg_width.equal(40)
E.tg_reverseFloat = true
rootLayout.addSubview(E) let F = UIView()
F.tg_height.equal(140)
F.tg_width.equal(60)
rootLayout.addSubview(F)


SizeClass的支持



TangramKit布局体系为了实现对不一样屏幕尺寸的设备进行适配,提供了对SizeClass的支持。您能够将SizeClass和上述的6种布局搭配使用,以便实现各类设备界面的完美适配。

使用方法

直接拷贝

  1. 将github工程中的Lib文件夹下的全部文件复制到您的工程中。

CocoaPods安装(暂时不支持)

若是您尚未安装cocoapods则请先执行以下命令:

$ gem install cocoapods

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

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '7.0'
pod 'TangramKit', '~> 1.0.0'

而后运行以下命令:

$ pod install

MyLayout和TangramKit的差别


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






本文为 code4app 用户 欧阳大哥 原创投稿,你们能够点击 “阅读原文” 对七巧板布局框架(TangramKit)进行了解,OC版本框架名称为 :MyLayout。欢迎你们分享给更多小伙伴知道,更欢迎 star & fork。支持小编整理的也能够在下方点赞 +1!感谢你们的支持!




POPULAR ARTICLES

 

 ​


iOS界面布局的核心以及TangramKit介绍_表格布局_16