iOS界面布局简化UIStackView使用详解

目录
  • 前言
  • UIStackView布局思想
    • distribution:
    • alignment:
  • UIStackView用法
    • 初始化
    • 添加、删除子视图
    • 排列方向
    • 布局方式
    • 对齐方式
    • 间距

前言

在过去iOS页面布局较为传统,大多数人使用Frame或者AutoLayout来布局,在iOS9以后,引入了UIStackViewUIStackView是用于线性布局的控件,可以自动管理子视图布局,自动填充。它借鉴了前端的布局算法Flexbox,可以简便地实现各种页面布局。

UIStackView虽然已经不是新控件了,但还是有很多同学并没有使用起来。通常有时改别人的代码看到乱糟糟的布局代码就有很多槽点。所以这也是写这篇文章的目的所在,真的推荐大家使用StackView。事半功倍,省下来的时间摸鱼不香嘛。

回归正题,不管是使用Frame或者AutoLayout来布局,我们都需要对所有的控件的位置、大小进行设置,Frame需要指定位置布局,AutoLayout需要指定约束布局;

UIStackView布局方式凸显它的优势在于不需要设置排列视图(即子视图)的位置,大小(不是必须的),而是通过自身的排列、分布方式自动完成布局。

对比起来,使用UIStackView更高效,我们可以通过嵌套UIStackView快速完成各式各样的布局。

UIStackView布局思想

UIStackView的初衷就是为了简化的界面布局,适用于列或行中布局视图集合。

StackView使用自动布局(AutoLayout)来定位和设置其排列视图的大小。StackView将第一个和最后一个排列的视图与其沿堆栈轴的边缘对齐。在水平堆栈中,这意味着第一个排列视图的前缘被固定在StackView的前缘上,而最后一个排列视图的后缘被固定在StackView的后缘上;在垂直堆栈中,顶部和底部边缘分别固定在堆栈的顶部和底部边缘上。

StackView会根据自身的布局规则进行填充排列视图。

distribution:

distribution 即排列方式:

  • fill根据抗拉伸、压缩优先级填充(默认拉伸第一个排列视图)
  • fillEqually在排列方向上的填充大小相同(即横向布局宽度相同,纵向布局高度相同)
  • fillProportionally根据排列视图的大小按比例填充
  • equalSpacing均匀地填充视图之间的间距
  • equalCentering根据排列视图中心点之间的相同间隔填充

alignment:

alignment即对齐方式:(垂直于排列方向)

  • fill填充排列视图到StackView的可用空间
  • topStackView的顶部排列(与之相似的是leading
  • bottomStackView的尾部排列(与之相似的是trailing
  • centerStackView的中间排列
  • firstBaseline以第一个基准线排列
  • lastBaseline以最后一个的基准线排列

如需设置排列视图之间的间距可以通过设置space属性,若是排列视图之间的间距不同,可以使用方法指定某个排列视图的间距(此方法iOS11以上使用),或者使用一个无用的view插入在视图之间替代间隙,此view仅作为间距使用(使用xibStoryboard会经常使用此类方法,可以参照)。

当你真的了解UIStackView的这些布局思想之后,你就会知道它能帮你解决很多繁琐的布局。(如一个多变的底部操作栏、一行大小各异的控件等等)

从上面的布局思想中,不难看出,其实我们仅需要确定StackView的排列方向,以及排列方式、对其方式,就能大体上对整个排列视图初步的布局,而后在根据不同的视图进行大小上的调整以及间距的调整即可。

使用UIStackView来自动布局子视图,你只需要每个子视图关注自身的大小即可。

以此类操作栏为例,举个栗子:

先说说我们常用的布局方式,可能还是会有一部分人会选择Frame布局,或者AutoLayout布局。

但此类UI在设计之初,通常会有很多状态、特征,每一种状态下,控件都会变化。

那么Frame布局在这种布局容易变化的情况下,就显得有非常的繁琐,布局代码非常的多,并且状态很多的时候不好维护。 同样AutoLayout也是如此,需要写很多的更新布局约束。

这个时候,借用UIStackView的思想,我们可以很简单的实现这个布局。每个控件只关注自身大小,不会对其他的空间产生依赖关系,在需要时显示出来,不需要时隐藏起来。

我们先以文本输入入口“说点什么”小试牛刀。

下面就是用StackView布局的效果。

这里我是使用的xib结合StackView。如果我们平时使用的代码布局,也可以使用代码结合StackView布局,这样也会减少很多代码量,可以自行脑补。

UIStackView用法

初始化

与其他控件一样的初始化方式;

- (instancetype)initWithFrame:(CGRect)frame NS_DESIGNATED_INITIALIZER;
- (instancetype)initWithCoder:(NSCoder *)coder NS_DESIGNATED_INITIALIZER;

当然也可以选择专属的初始化方式;

- (instancetype)initWithArrangedSubviews:(NSArray<__kindof UIView *> *)views;

添加、删除子视图

- (void)addArrangedSubview:(UIView *)view;
- (void)removeArrangedSubview:(UIView *)view;

排列方向

@property(nonatomic) UILayoutConstraintAxis axis;
typedef NS_ENUM(NSInteger, UILayoutConstraintAxis) {
    UILayoutConstraintAxisHorizontal = 0, // 水平方向
    UILayoutConstraintAxisVertical = 1    // 垂直方向
};

布局方式

@property(nonatomic) UIStackViewDistribution distribution;
typedef NS_ENUM(NSInteger, UIStackViewDistribution) {
    UIStackViewDistributionFill = 0, //子视图填充满指定方向,优先拉伸第一个控件
    UIStackViewDistributionFillEqually, //每个子视图填充大小相等,
    UIStackViewDistributionFillProportionally, //根据每个子视图里面内容的尺寸来进行填充操作
    UIStackViewDistributionEqualSpacing, //每个子视图之间的间距相等
    UIStackViewDistributionEqualCentering, //每个子视图中心直接的间距相等
} API_AVAILABLE(ios(9.0));

对齐方式

@property(nonatomic) UIStackViewAlignment alignment;
typedef NS_ENUM(NSInteger, UIStackViewAlignment) {
    UIStackViewAlignmentFill, //水平:subView的上下和StackView的上下边距 相等   垂直: subView的左右边距和 StackView的所有相等
    UIStackViewAlignmentLeading,//垂直有效 :左对齐
    UIStackViewAlignmentTop = UIStackViewAlignmentLeading, // 水平有效 上对齐
    UIStackViewAlignmentFirstBaseline,//水平有效,第一行基准线对齐。
    UIStackViewAlignmentCenter, //中心基准线对齐 1.水平 高度中点对齐 2.垂直:宽度中点对齐
    UIStackViewAlignmentTrailing,  //垂直有效,右边界对齐。
    UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing,// 水平有效 ,下边界对齐。
    UIStackViewAlignmentLastBaseline,//水平有效,最后一行基准线对齐。
} API_AVAILABLE(9_0);

间距

@property(nonatomic) NSInteger space; //排列视图相邻边缘之间的距离。

以上就是iOS界面布局简化UIStackView使用详解的详细内容,更多关于iOS UIStackView布局简化的资料请关注我们其它相关文章!

(0)

相关推荐

  • iOS9新特性之UIStackView

    1. UIStackView相关属性理解 UIStackView是iOS9之后推出的,我也是第一次接触,在学习的过程中对于其中的相关属性,尤其是对其中的distribution几个属性值,一知半解的,所以特写此文通过代码实例理解它们每个属性的区别. UIStackView主要包括了四大属性:axis.alignment.distribution.spacing. 一.axis 主要设置UIStackView布局的方向:水平方向或垂直方向. typedef NS_ENUM(NSInteger, U

  • 详解iOS自定义UITabBar与布局

    在小编整理过的文章iOS项目基本框架搭建中,我们详细说明了如何对TabBarItem的图片属性以及文字属性进行一些自定义配置.但是,很多时候,我们需要修改TabBarItem的图片和文字属性之外,还需要自定义TabBarItem的位置,这样系统自带的TabBar的样式并不能满足我们的项目需求,所以我们需要对系统的UITabBar进行自定义,以达到我们的项目需求.例如新浪微博App的底部tab的item就无法用自带的TabBarItem进行实现,最中间那个[+]发布微博并不是用来切换tab的,而是

  • ios的collection控件的自定义布局实现与设计

    collection控件用来实现界面的各种自定义布局,最常用其作为横向.竖向的布局控件.很早之前,系统对于collection的支持并不是很好.所以自己实现了支持自定义布局.自定义cell的collection控件.自定义的collection可以满足所有的产品特殊需求及动态效果,例如在某些特殊情况下可能需要除选中cell之外的其它cell执行布局动画等.在collection的基础之上,我又实现了支持cell拖动.拖离窗体的tabview控件.本文主要介绍自定义collection的设计与实现

  • iOS ScrollView实现自动布局的方法(适用Swift 3.0 )

    前言 众所周知我们大家在开发中,可能会有一些页面显示的元素很多,可能会超出一个屏幕,但也不适合用 TableView 或者 CollectionView,此时我们一般会用 ScrollView,那么就会出现自动布局的问题.下面话不多说了,来一起看看详细的介绍吧. 实现方式 纯代码 特点编码繁琐:需要手写控件 安全:只要正确地设置约束或者 frame.contentSize,一般不会出现滚动问题 示例 lazy var scrollView: UIScrollView = { let obj =

  • iOS布局渲染之UIView方法的调用时机详解

    前言 APP页面优化对小编来说一直是难题,最近一直在不断的学习和总结 ,发现APP页面优化说到底离不开view的绘制和渲染机制.本文将详细给大家介绍关于iOS布局渲染之UIView方法调用时机的相关内容,下面话不多说了,来一起看看详细的介绍吧. 一.约束 - (void)updateConstraints NS_AVAILABLE_IOS(6_0) NS_REQUIRES_SUPER; 何时触发如下所示: 1.initWithFrame时候调用,但是要求重写以下方法,并返回YES. + (BOO

  • iOS App开发中的UIStackView堆叠视图使用教程

    一.引言 随着autolayout的推广开来,更多的app开始使用自动布局的方式来构建自己的UI系统,autolayout配合storyBoard和一些第三方的框架,对于创建约束来说,已经十分方便,但是对于一些动态的线性布局的视图,我们需要手动添加的约束不仅非常多,而且如果我们需要插入或者移除其中的一些UI元素的时候,我们又要做大量的修改约束的工作,UIStackView正好可以解决这样的问题. 二.在storyBoard上初识StackView UIStackView是一个管理一组堆叠视图的控

  • iOS界面布局简化UIStackView使用详解

    目录 前言 UIStackView布局思想 distribution: alignment: UIStackView用法 初始化 添加.删除子视图 排列方向 布局方式 对齐方式 间距 前言 在过去iOS页面布局较为传统,大多数人使用Frame或者AutoLayout来布局,在iOS9以后,引入了UIStackView.UIStackView是用于线性布局的控件,可以自动管理子视图布局,自动填充.它借鉴了前端的布局算法Flexbox,可以简便地实现各种页面布局. UIStackView虽然已经不是

  • IOS之WebSocket框架Starscream案例详解

    传统的网络技术 (也就是 Berkeley sockets) 被认为是可靠和稳定的.但是 Berkeley socket 在某些 web 技术,比如代理和防火墙下不太好使.WebSocket 出现于 2011 年,是一种在客户端和服务端之间建立双向通讯的新技术.WebSocket 比起多个 HTTP 请求来说更有效率并允许长连接. 在 iOS 上使用 WebSocket 并不是那么容易.iOS 和 Mac 库 Starscream 的出现,极大地简化了 WebSocket 的创建和使用. 注:本

  • IOS 创建并发线程的实例详解

    IOS 创建并发线程的实例详解 创建并发线程 主线程一般都是处理UI界面及用户交互的事儿的.其他的事一般就要另外的线程去处理,如下载,计算等... 现在先简单创建3个线程,分别打印出1-1000,,为了方便,线程3就放在主线程中执行. - (void) firstCounter{ @autoreleasepool { NSUInteger counter = 0; for (counter = 0; counter < 1000; counter++){ NSLog(@"First Cou

  • iOS开发之UIMenuController使用示例详解

    目录 简介 接口介绍 使用探索 如何创建并显示 UIMenuController 实现 Item 点击事件 菜单 Item 太多??? UIResponderStandardEditActions 协议 添加自定义菜单 箭头的方向 实际使用 总结 简介 UIMenuController 是一个菜单编辑界面,在很多地方都能用到,通常用于剪切.复制.粘贴.选择.全选和删除命令等,也可以自定义想要的操作,它长这样: 接口介绍 open class UIMenuController : NSObject

  • IOS Swift基础之switch用法详解

    IOS  Swift基础之switch用法详解 概述 Swift中的switch语句与Java等语言中的switch有很大的相似点,但是也有不同的地方,并且更加灵活. Swift中switch的case语句中不需要添加break Swift中需要考虑所有情况,default是必要的. case分支可以添加多个条件,用,分割 case不局限与常量,可以使使用范围 switch里可以使用元组 switch默认不需要添加break,执行一个case之后就跳出语句,如果想要继续下面的语句可以使用fall

  • IOS 指纹识别两种方式详解及实例

    IOS 指纹识别两种方式详解及实例 首先引入类名: #import <LocalAuthentication/LocalAuthentication.h> 然后在实现指纹识别的地方放入如下代码: 方式一: LAContext *lacontext = [[LAContext alloc]init]; // 判断设备是否支持指纹识别 BOOL isSupport = [lacontext canEvaluatePolicy:LAPolicyDeviceOwnerAuthenticationWit

  • IOS点击按钮隐藏状态栏详解及实例代码

    IOS点击按钮隐藏状态栏详解 前言: 最近学习IOS的基础知识,实现隐藏状态栏的功能,这里就记录下来,希望对大家有所帮助 实例代码: @interface SecondViewController () @property (nonatomic, assign,getter=isHideStatus) BOOL hideStatus; @end @implementation SecondViewController - (void)viewDidLoad { [super viewDidLoa

  • IOS 获取APP 版本号的实例详解

    IOS 获取APP 版本号的实例详解 看代码的时候看到一句,用于获取.plist文件的版本号 labelVersion.text = [NSString stringWithFormat:@"v%@", [[NSBundle mainBundle] objectForInfoDictionaryKey:(NSString*)kCFBundleVersionKey]]; 比较感兴趣的是后面的参数 kcFBundleVersionKey ,竟然是CFBundle.h已经定于好的属性,下面有

  • IOS UITableView颜色设置的实例详解

    IOS UITableView颜色设置的实例详解 1.系统默认的颜色设置  //无色 cell.selectionStyle = UITableViewCellSelectionStyleNone; //蓝色 cell.selectionStyle = UITableViewCellSelectionStyleBlue; //灰色 cell.selectionStyle = UITableViewCellSelectionStyleGray; 2.自定义颜色和背景设置 改变UITableView

  • IOS文件的简单读写实例详解

    IOS文件的简单读写实例详解 数组(可变与不可变)和字典(可变与不可变)中元素对象的类型,必须是NSString,NSArray,NSDictionary,NSData,否则不能直接写入文件 #pragma mark---NSString的写入与读取--- //1:获取路径 NSString *docunments = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES)firstObje

随机推荐