Slack
在我们的Slack,频道 #help-modular 上获取此产品的使用和安装帮助
示例
要运行示例项目,请克隆仓库,然后运行其中的一个示例目标
要求
SnapKit,是的,我们没有尝试重新发明轮子,但我们想尽可能让您的使用变得更加简单!
安装
Modular可以通过CocoaPods来访问。要安装它,只需要在Podfile中添加以下行
pod 'Modular'
对于Carthage,执行:
github 'manGoweb/Modular'
使用方法
这只是一个模块化可以实现的示例,请参阅所有可用方法的代码。
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Make a view and fill all space with it
let canvas1 = RandomView()
canvas1.place.on(andFill: view)
let view1 = RandomView()
view1.place.on(canvas1, height: 20, bottom: -10).with.topMargin().and.sideToSide()
let label1 = RandomLabel()
label1.text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.\nUt eu viverra orci. Morbi nulla diam, ornare sit amet bibendum aliquet, lacinia et purus. Ut lacinia bibendum dapibus."
label1.place.below(view1).with.sideMargins()
// Make a square view and place it to the left
let view2 = RandomView()
view2.place.below(label1).make.square(side: 40).add.leftMargin()
// Make a circle and place it next to the previous view
let circle1 = RandomView()
circle1.place.next(to: view2).make.circle(radius: 30)
// View will be placed below the one that is lowest
let view3 = RandomView()
view3.place.below([view2, circle1], height: 40).with.sideMargins()
// Two views on sides with one filling space in the middle
let canvas2 = RandomView()
canvas2.place.below(view3).sideMargins()
let leftView1 = RandomView()
leftView1.place.on(canvas2).add.topMargin().make.rectangle(width: 30, height: 30).with.leftMargin().and.minBottomMargin()
let rightView1 = RandomView()
rightView1.place.on(canvas2).add.topMargin().make.rectangle(width: 30, height: 10).with.rightMargin().minBottomMargin()
let middleView1 = RandomView()
middleView1.place.between(leftView1, and: rightView1, height: 50).with.minBottomMargin()
// Making a horizontal stack view
let views = [
RandomView().make.square().width(30).view,
RandomView().make.circle(radius: 10).view,
RandomView().make.rectangle(width: 20, height: 30).view,
RandomView().make.circle(radius: 30).view,
RandomView().make.square(side: 10).view
]
let stackView1 = views.make.horizontalStackView()
stackView1.place.below(canvas2, height: 30).with.sideMargins()
}
}
要修改默认值,设置以下内容(如果需要,您可以直接设置自定义边距)
public class DefaultValues {
/// Top margin, only used on spacing towards superview, when chaining multiple views below each other, verticalSpacingMargin will be used instead by default
public static var topMargin: CGFloat = 20
/// Left inset, used for side spacing to superview, when chaining multiple views next to each other, horizontalSpacingMargin will be used instead by default
public static var leftMargin: CGFloat = 20
/// Leading margin, used for side spacing to superview, when chaining multiple views next to each other, horizontalSpacingMargin will be used instead by default
public static var leadingInset: CGFloat = 20
/// Right margin, used for side spacing to superview, when chaining multiple views next to each other, horizontalSpacingMargin will be used instead by default
public static var rightMargin: CGFloat = -20
/// Trailing inset, used for side spacing to superview, when chaining multiple views next to each other, horizontalSpacingMargin will be used instead by default
public static var trailingInset: CGFloat = 20
/// Bottom margin, only used on spacing towards superview
public static var bottomMargin: CGFloat = -20
/// Used to space items horizontaly (placing them next or before each other)
public static var horizontalSpacingMargin: CGFloat = 20
/// Used to space items vertically (placing them below or above each other)
public static var verticalSpacingMargin: CGFloat = 20
}
调试视图和约束
使用模块化,您可以了解为什么视图现在显示。
// Print constraint info about the stack view
view2.debug.constraints()
// or for full "Apple" debug info on all involved constraints
view2.debug.constraints(debugType: .full)
默认调试版本将输出类似以下内容
Modular:
View memory address: 0x7fc57fe074b0
Current constraints:
- left
- height
- bottom
- right
- top
- Internally width relates to height
作者
Ondrej Rafaj, [email protected]
Vlad Radu, [email protected]
许可证
Modular遵循MIT许可证。有关更多信息,请参阅LICENSE文件。