美高梅官方网站3045-mgm6608美高梅app下载
iOS下的分界面布局利器-MyLayout布局框架

iOS下的分界面布局利器-MyLayout布局框架

作者:mgm美高梅 官方网址    来源:未知    发布时间:2020-01-18 21:22    浏览量:

图片 1

图片 2

经过几年的打磨和多次的重构,我的iOS开源界面布局库MyLayout的star数量终于在2018年8月6号破3000了!有图为证:

TangramKit是iOS系统下用Swift编写的第三方界面布局框架。他集成了iOS的AutoLayout和SizeClass以及Android的五大容器布局体系以及HTML/CSS中的float和flex-box的布局功能和思想,目的是为iOS开发人员提供一套功能强大、多屏幕灵活适配、简单易用的UI布局解决方案。Tangram的中文即七巧板的意思,取名的寓意表明这个布局库可以非常灵巧和简单的解决各种复杂界面布局问题。他的同胞框架:MyLayout是一套用objective-C实现的界面布局框架。二者的主体思想相同,实现原理则是通过扩展UIView的属性,以及重载layoutSubviews方法来完成界面布局,只不过在一些语法和属性设置上略有一些差异。可以这么说TangramKit是MyLayout布局库的一个升级版本。大家可以通过访问下面的github站点去下载最新的版本:

 

图片 3MyLayout

Swift版本TangramKit: OC版本MyLayout: 演示效果图

  • Swift:TangramKit:
  • OC:MyLayout:

还有Swift版本TangramKit:

简介

MyLayout是一套iOS界面视图布局框架。其内核是基于对UIView的layoutSubviews方法的重载以及对子视图的bounds和center属性的设置而实现的。MyLayout功能强大而且简单易用,它集成了iOS Autolayout和Size Classes、android的5大布局体系、HTML/CSS的浮动定位技术以及flex-box和bootstrap框架等市面上主流的平台的界面布局功能,同时提供了一套非常简单和完备的多屏幕尺寸适配的解决方案。MyLayout还提供了Swift版本TangramKit

图片 4TangramKit

MyLayout的优势

  • MyLayout的实现内核是基于frame的设置,而不是对AutoLayout的封装。因此在使用上不会受到任何操作系统版本的限制。
  • 有文章表明用frame进行布局的性能要高于用AutoLayout进行布局的性能,尤其是当界面内视图数量增加时效果更加明显。
  • AutoLayout的思想是通过视图之间的约束依赖来完成布局,但是约束依赖的结果是造成视图之间的耦合性高而增大了界面更新的成本。而MyLayout则除了提供约束依赖外,还提供了根据视图添加顺序自动建立约束的功能,从而减少了这种显示依赖关系建立的问题,最终的结果是简化了布局的代码量,以及减少了布局更新时的代码修改量。
  • AutoLayout只是一种相对约束的布局,而MyLayout除了同时提供具有和AutoLayout相同能力的相对布局外、还提供了线性布局、框架布局、表格布局、流式布局、浮动布局、路径布局7大布局体系,你完全可以根据你的界面需求来选择一种最简易的布局容器来实现你的功能,同时MyLayout还支持Size classes的机制,以及提供了一些实现屏幕尺寸完美适配的方法。
  • MyLayout主要是一种通过代码进行布局的解决方案,但是框架一样可以支持和XIB以及SB结合布局的方式。并提供了视图隐藏和显示时会自动激发布局、布局视图的高度自适应(UITableviewCell动态高度)、标签云实现、左右内容宽度自适应、按比例分配尺寸和间距、整体停靠控制等等各种强大的功能。

这个周末发布了最新的MyLayout 1.6.0 版本和TangramKit 1.2.0版本。大家可以到这里去下载:

AutoLayout和frame布局的性能比较

图片 5

 

图片 6

 

参考的文章地址:

OC版本MyLayout: :

应用场景

举例下面一个应用场景:

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

最终的效果图如下:

图片 7

 MyLinearLayout *S = [MyLinearLayout linearLayoutWithOrientation:MyLayoutViewOrientation_Vert];
    S.subviewMargin = 10;
    S.myWidth = 100;

    UIView *A = UIView.new;
    A.leftPos.equalTo(@0.2);
    A.rightPos.equalTo(@0.3);
    A.heightDime.equalTo(A.widthDime);
    [S addSubview:A];

    UIView *B = UIView.new;
    B.leftPos.equalTo(@40);
    B.widthDime.equalTo(@60);
    B.heightDime.equalTo(@40);
    [S addSubview:B];

    UIView *C = UIView.new;
    C.widthDime.equalTo(S.widthDime);
    C.heightDime.equalTo(@40);
    [S addSubview:C];

    UIView *D = UIView.new;
    D.rightPos.equalTo(@20);
    D.widthDime.equalTo(S.widthDime).multiply(0.5);
    D.heightDime.equalTo(@40);
    [S addSubview:D];

 

或者通过cocoapods引入:MyLayout 和TangramKit。

系统结构

图片 8

当然如果您觉得不错就顺手点一个赞

下一篇:没有了
友情链接: 网站地图
Copyright © 2015-2019 http://www.zen-40.com. mgm美高梅有限公司 版权所有