点击此处查看最新的网赚项目教程
一. 概述
进行iOS项目开发时，常用的布局方式有两种：Frame布局和AutoLayout，Frame布局没啥可说的，直接设置控件的横纵坐标，并指定宽高。AutoLayout是通过设置控件相对位置的约束进行布局。AutoLayout的本意是好的，但是由于他的语法实在不怎么友好，导致我们在实际项目开发中用的并不多，只能靠Masonry这样的第三方库来使用它。Masonry布局虽然容易理解，但是它的代码量太大，每一个控件都要对其进行block设置。在前端开发中，Flex布局使用尤为普遍，那么iOS端有没有类似前端Flex布局的方案呢？答案是肯定的，除了在 Weex 以及 React Native 两个著名的跨平台项目里有用到 Flex布局外，AsyncDisplayKit 也同样引入了 Flex布局，它们都是基于 Facebook 的 Yoga 的二次开发。而今天我们要介绍的 FlexLib 同样如此。
二. Flex布局与相关属性介绍
先来了解一下Flex布局：Flex布局又叫弹性布局,是一种为一维布局而设计的布局方法。一维的意思是你希望内容是按行或者列来布局。你可以使用display:flex来将元素变为弹性布局。我们直接看例子：实现7个item横向排列
<!DOCTYPE html>
<html>
<head>
<title>flex布局2</title>
<meta charset="UTF-8">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-end;
background-color: wheat;
flex-wrap: wrap;
}
.item {
width: 100px;
height: 100px;
border: 1px solid royalblue;
text-align: center;
line-height: 100px;
margin: 10px 10px;
}
.item6 {
flex: 1;
}
.item7 {
flex: 2;
}
</style>
</head>
<body>
<div class="container">
<div class="item0 item">item0</div>
<div class="item1 item">item1</div>
<div class="item2 item">item2</div>
<div class="item3 item">item3</div>
<div class="item4 item">item4</div>
<div class="item5 item">item5</div>
<div class="item6 item">item6</div>
<div class="item7 item">item7</div>
</div>
</body>
</html>
上面是前端代码，看不懂没关系，这里重点是借这个例子来熟悉一下Flex布局的一些常用属性。Flex属性分类两类：一类是作用在容器上的，另一类是作用在子Item上的。
作用在容器上的属性
作用在Item上的属性
这里设置item6 与 item7 的flex为1和2，表示当前轴剩余的空间item6占1/3,item7占2/3.更多的关于flex的属性可以查看这里：Flex布局
三. FlexLib的使用1.使用方式
CocoaPods引入FlexLib:
pod 'FlexLib'
使用：
pic
TestLoginVC.h
@interface TestLoginVC : FlexBaseVC
@end
TestLoginVC.m
#import "TestLoginVC.h"
@interface TestLoginVC ()
{
UIScrollView* scroll;//自动绑定name属性的值
UIView* close;
}
@end
@implementation TestLoginVC
- (void)viewDidLoad {
[super viewDidLoad];
self.navigationItem.title = @"Touch Demo";
}
- (void)tapTouchAction
{
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@""
message:@"You pressed"
delegate:nil
cancelButtonTitle:@"Cancel"
otherButtonTitles:@"OK",nil];
[alert show];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
}
@end
TestLoginVC.xml
<UIView
layout="
flex:1,
alignItems:center"
attr="bgColor:white">
<FlexScrollView name="scroll" layout="padding:50,flex:1,width:100%,alignItems:center" attr="bgColor:white,vertScroll:true,">
<FlexTouchView onPress="tapTouchAction" attr="underlayColor:blue">
<UIImageView layout="width:100,height:100" attr="borderRadius:50,clipsToBounds:true,source:qrcode.png">
<FlexTouchMaskView attr="bgColor:red,alpha:0.7"/>
</UIImageView>
</FlexTouchView>
<UIView layout="height:20"/>
<FlexTouchView onPress="tapTouchAction" layout="height:100,width:100%,alignItems:center,justifyContent:center" attr="bgColor:#e5e5e5,borderRadius:8,underlayColor:darkGray">
<UILabel layout="width:100%" attr="fontSize:16,textAlign:center,color:red,text:Please touch me and move,rn这是测试touch功能的控件,linesNum:0"/>
</FlexTouchView>
<UIView layout="height:20"/>
<UILabel layout="width:100%" attr="fontSize:20,linesNum:0,color:#333333,text:You can press the buttons above to see the effect. We use FlexTouchView to provide more powerful function and better flexibility than button."/>
</FlexScrollView>
</UIView>
说明：
全局xml文件 system.style 的格式类似这样：
<styles>
<style name="buttonAttrStyle">
<attr name="bgColor">black</attr>
<attr name="color">white</attr>
<attr name="borderRadius">4</attr>
<attr name="underlayColor">darkGray</attr>
<attr name="shadowColor">red</attr>
<attr name="shadowOffset">5/5</attr>
<attr name="shadowOpacity">0.2</attr>
<attr name="shadowRadius">3</attr>
</style >
<style name="buttonLayoutStyle">
<attr name="height">44</attr>
<attr name="width">150</attr>
<attr name="alignItems">center</attr>
<attr name="justifyContent">center</attr>
<attr name="margin">20</attr>
</style>
</styles>
导入系统样式文件
NSString *path = [[NSBundle mainBundle]pathForResource:@"system" ofType:@"style"];
[[FlexStyleMgr instance] loadClassStyle:path];
使用:
<UILabel attr="@:system/buttonAttrStyle" layout="@:system/buttonLayoutStyle" />
2.FlexXmlBaseView、FlexFrameView、FlexCustomBaseView 的使用
在使用xml进行布局时，不可避免的要用到自定义视图，如果自定义视图也想要用xml进行布局，此时需要继承FlexXmlBaseView、FlexFrameView、FlexCustomBaseView这三种视图中的一种。
(1)自定义视图使用xml布局
FlexFrameView *frameView = [[FlexFrameView alloc] initWithFlex:@"CustomFrameView" Frame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 0) Owner:self];
frameView.flexibleHeight = YES;//设置高度自适应
[_scrollView addSubview:frameView];
CustomFrameView.xml是这个视图对应的xml布局文件
注意：继承FlexCustomBaseView或FlexFrameView的视图必须要设置以下两个属性
//宽和高是否可变？缺省值均为NO
@property(nonatomic,assign) BOOL flexibleWidth;
@property(nonatomic,assign) BOOL flexibleHeight;
(2)自定义视图不使用xml布局，但是也想用在xml文件中
此时我们的自定义视图需要满足以下两个条件就可以用于xml文件中：
直接在父视图中使用
<UIView layout="flex:1,alignItems:center" attr="bgColor:white">
<ComplateCustomView layout="width:100%,height:80"/>
</UIView>
3.其他设置
// 设置缩放因子，使用方法 在xml 布局中 *16 ==> 16*factor + 1
float factor = [UIScreen mainScreen].bounds.size.width/375;
FlexSetScale(factor, 1);
在布局xml中使用,数字前面加上*
<UILabel attr="fontSize: *16"/>
这表示：Label的fontSize为16*factor + 1
<UIView layout="$width:ScreenWidth*0.6,height:50,alignItems:center,justifyContent:center" attr="bgColor:#e5e5e5,borderRadius:6">
<UILabel attr="@:system/buttonText,text:表达式计算，屏幕宽度的60%"/>
</UIView>
<FlexTextView layout="flex:1,minHeight:40,maxHeight:95" attr="borderColor:red,borderWidth:1,borderRadius:4,fontSize:18,color:darkGray,text:这是一个能自动根据字数调整高度的文本输入框,placeholder:我是占位,placeholderColor:red"/>
四. 总结
FlexLib 可能对有前端开发经验的同学比较友好，对原生开发同学而言，学习一下他的语法也没坏处。在日常开发中，我们可以有选择的使用这个布局，熟悉了这个布局后，会极大的提升我们页面布局效率，从而让我们将精力集中到更加核心的功能上。
参考：
———END———
限 时 特 惠： 本站每日持续更新海量各大内部创业教程，一年会员只需98元，全站资源免费下载 点击查看详情
站 长 微 信： cai842612
admin
