前言
MyLayout共有 8 套布局，先附上作者的对该布局框架的介绍
常用的布局有 相对布局、框架布局、线性布局；
瀑布流布局有 流式布局、浮动布局；
不常用布局有 表格布局、路径布局、栅格布局。
-
鉴于小学语文没过关，不多做描述，直接上图，然后解析实现方案。
示例 0
上边的界面，A ~ D 左右间距都是固定且不相等而宽度均分剩余宽度，我们可以通过 MyRelativeLayout来简单的实现，本文将讲述如何使用一个MyFloatLayout来实现该界面。
- 首先创建
MyFloatLayout
MyFloatLayout *rootLayout = [MyFloatLayout floatLayoutWithOrientation:(MyOrientation_Vert)];
rootLayout.myWidth = 280;
rootLayout.myTop = 100;
rootLayout.wrapContentHeight = YES;
rootLayout.boundBorderline = [[MyBorderline alloc] initWithColor:rgba(224, 224, 224, 1)];
- 添加顶部标题和关闭按钮，此处我们需要使用到布局的
重叠模式
UILabel *titleLabel = Kt_UILabelMake(@"标题", rgba(255, 255, 255, 1), 15, NSTextAlignmentCenter);
titleLabel.clearFloat = YES;
titleLabel.wrapContentHeight = NO;
titleLabel.weight = 1;
titleLabel.myHeight = 40;
titleLabel.backgroundColor = rgba(255, 102, 0, 1);
[rootLayout addSubview:titleLabel];
UIButton *closeItem = [[UIButton alloc] init];
[closeItem setImage:Kt_UIImageMake(@"icon_lskj_layer_close") forState:(UIControlStateNormal)];
closeItem.heightSize.equalTo(titleLabel.heightSize);
closeItem.myWidth = 40;
// MyLayout 计算的时候，会将 view 的 top.left.right.bottom.width.height归纳在一起，然后去计算布局
// 根据浮动算法，如果 closeItem.maxX 超过浮动布局的宽度，就会自动换行。
// 所有此处我们需要设置 closeItem.myLeft = -（closeItem.width + closeItem.right）;就可以让closeItem不换行。 欧阳大哥称该模式为重叠
closeItem.myLeft = -40;
[rootLayout addSubview:closeItem];
TopView
3.添加 A~D 五个模块，添加完成之后，我们再对 weight 和 widthSize.add设置值
UILabel *aLabel = Kt_UILabelMake(@"A", rgba(255, 255, 255, 1), 15, NSTextAlignmentCenter);
aLabel.wrapContentSize = NO;
aLabel.clearFloat = YES;
aLabel.myHeight = 30;
aLabel.myTop = 20;
aLabel.myLeft = 10;
aLabel.myRight = 15;
aLabel.backgroundColor = [UIColor kt_debugColor];
[rootLayout addSubview:aLabel];
UILabel *bLabel = Kt_UILabelMake(@"B", rgba(255, 255, 255, 1), 15, NSTextAlignmentCenter);
bLabel.wrapContentSize = NO;
bLabel.myHeight = 30;
bLabel.myTop = 20;
bLabel.myRight = 20;
bLabel.backgroundColor = [UIColor kt_debugColor];
[rootLayout addSubview:bLabel];
UILabel *cLabel = Kt_UILabelMake(@"C", rgba(255, 255, 255, 1), 15, NSTextAlignmentCenter);
cLabel.wrapContentSize = NO;
cLabel.myHeight = 30;
cLabel.myTop = 20;
cLabel.myRight = 25;
cLabel.backgroundColor = [UIColor kt_debugColor];
[rootLayout addSubview:cLabel];
UILabel *dLabel = Kt_UILabelMake(@"D", rgba(255, 255, 255, 1), 15, NSTextAlignmentCenter);
dLabel.wrapContentSize = NO;
dLabel.myHeight = 30;
dLabel.myTop = 20;
dLabel.myRight = 30;
dLabel.backgroundColor = [UIColor kt_debugColor];
[rootLayout addSubview:dLabel];
UILabel *eLabel = Kt_UILabelMake(@"D", rgba(255, 255, 255, 1), 15, NSTextAlignmentCenter);
eLabel.wrapContentSize = NO;
eLabel.myHeight = 30;
eLabel.myTop = 20;
eLabel.myRight = 40;
eLabel.backgroundColor = [UIColor kt_debugColor];
[rootLayout addSubview:eLabel];
这里的公式可以直接套用，可以均分宽度。同时支持某些个宽度为固定值而剩下的均分，或者某些宽度在均分的基础上加上增量。高度同理
NSMutableArray *arr = [[NSMutableArray alloc] init];
[arr addObject:aLabel];
[arr addObject:bLabel];
[arr addObject:cLabel];
[arr addObject:dLabel];
[arr addObject:eLabel];
float (^viewWidthSize)(UIView *whv) = ^(UIView *whv) {
return ([whv.leftPos.posVal floatValue] +
[whv.rightPos.posVal floatValue] +
[whv.widthSize.dimeVal floatValue] +
[@(whv.widthSize.addVal) floatValue]);
};
NSInteger weight = arr.count - 1;
NSInteger widthCount = 0;
for (UILabel *tl in arr) {
if ([tl.widthSize.dimeVal floatValue]) {
widthCount ++;
}
}
for (int i = 0; i < arr.count; i ++) {
UILabel *la = arr[i];
NSInteger space = (viewWidthSize(la)) * (weight - widthCount);
for (int j = i + 1; j < arr.count; j ++) {
UILabel *ll = arr[j];
space -= viewWidthSize(ll);
}
if ([la.widthSize.dimeVal floatValue] == 0) {
la.widthSize.add(space);
la.weight = 1.0 / (weight - widthCount + 1);
weight --;
}
}
A~D
- 添加底部的确认模块， 此处也使用了
重叠功能。
UILabel *v1 = Kt_UILabelMake(@"一半宽度参照,可以不要高度，也不要颜色", rgba(51, 51, 51, 1), 10, NSTextAlignmentCenter);
v1.weight = 0.5;
// 一半宽度的占位
v1.backgroundColor = [UIColor kt_debugColor];
v1.clearFloat = YES;
v1.myVisibility = MyVisibility_Invisible;
[rootLayout addSubview:v1];
CGFloat space = 20;
UILabel *okLabel = Kt_UILabelMake(@"确定", rgba(255, 255, 255, 1), 15, NSTextAlignmentCenter);
okLabel.wrapContentHeight = NO;
okLabel.backgroundColor = rgba(255, 102, 0, 1);
okLabel.myTop = 40;
okLabel.myLeft = - (102 + space / 2.0);
okLabel.mySize = CGSizeMake(102, 30);
[_rootLayout addSubview:okLabel];
UILabel *cancleLabel = Kt_UILabelMake(@"取消", rgba(255, 255, 255, 1), 15, NSTextAlignmentCenter);
cancleLabel.wrapContentHeight = NO;
cancleLabel.backgroundColor = rgba(255, 102, 0, 1);
cancleLabel.myTop = 40;
// 这个left 会以该行中之前添加 view 的 maxX为基准
cancleLabel.myLeft = space / 2.0;
cancleLabel.mySize = CGSizeMake(102, 30);
cancleLabel.myBottom = 20;
[rootLayout addSubview:cancleLabel];
cancle
至此，该界面完成, 主要运用到了占位和 myLeft = 负数的技巧。至于均分的公式，应该也适用于 MyFlowLayout中arrangedCount = 0 的情况。
网友评论