文档章节

UIStackView相关

陈中宝
 陈中宝
发布于 2015/10/09 10:54
字数 1168
阅读 1504
收藏 1

从iOS9开始,苹果提供了UIStackView来帮助我们做布局,这玩意儿类似于安卓的线性布局。因为在使用过程中会遇到一些坑,所以写出来供遇到同样问题的人参考。我在这里提供xib和纯代码两种方式创建使用 UIStackView:

先看一下运行效果:

 

垂直方向,在图一里,label被拉伸了,在图2里面,label和image被压缩了


1、xib方式

打开storyboard之后会发现右下角多了一个图标:

在xib中创建 UIStackView 要用到这个按钮,就称它为 stack 按钮吧。

首先拖三个控件进来:

然后按住 command键,然后选中这三个View,然后点击右下角的哪个 stack 按钮。这时候就创建了一个 UIStackView,这个stackView包括了刚才选中的三个View:

图里面绿色箭头指向的就是我们刚刚创建的UIStackView。

而右上角的红色箭头指向的错误让人纠结了。导致错误的原因有多个,我们来一个一个的解决。

第一个原因:stackView没有约束。

说来奇怪,使用xib创建UIStackView的时候,不能设置 stackview的frame,你看是灰色的:

没办法,不能设置frame,那就设置约束吧,选中stackView,然后给它添加约束如下:

然后我们看一下结果如何:

效果马马虎虎了,可是TNND还是有错误:

点进入看给的错误信息,大概意思是需要设置抗压缩等级——这是啥?

这还得从 UIStackView 的排布方式说起,选中stackView,在右侧工具栏查看这个:

挨个说说,

Axis(轴):这里代表stackView所包含的View的排布方向,有竖直和水平两种,这玩意儿比较智能,在你添加的时候能够自动判断。你也可以咋这里更改。

Alignment(对齐方式):是指stackview所包含的View的对其方式,有下面几种方式:

        Fill:子View填充 stackView,它会使子View在水平和垂直方向都填充stackView

        Leading:靠左对其

        Trailing:靠右对齐

        Center:中心对齐

        Top:顶部对齐

        Bottom:底部对其

Distribution(分布):是指 stackview 的子 View的排布方式,有下面几种方式:

        Fill:默认方式,子View加起来田中整个 stackview

        Fill Equally:子View的高度/宽度一致(具体是哪一个一致得看是水平排布还是垂直排布)

        Fill Proportionally:StackView 自己计算出它人为合适的排布方式,合理分配宽/高

        Equal Spacing:子View保持同等间隔的排布方式

        Equal Centering:每个子View的中心线之间距离相同的排布方式,每个子view的宽/高会适配其内容


之所以会出现上面的错误,是由于 Fill、Equal Spacing 这两个方式不能自动地对子View进行压缩/拉伸(在子View填充的大小与stackview不符合的情况下)。例如本文的情况,子View的大小加起来比stackView要大,而在Fill模式下,系统又不知道该压缩哪一个View,所以才报了错。加入将Fill模式换成 Fill Equally、Fill Proportionlly、Equal Centering就不会出错了。

下面来解决上面的这个问题:

首先在右侧的工具栏选中尺子

在里面找到下面这两个东西:

三个子View都有这两个属性

Content Hugging Priority:压缩优先等级,这个值越低,越容易被拉伸

Content Compression Resistance Priority:抗压缩优先等级,这个值越低越容易被压缩

所以将其中一个View的上面这两个属性调低,使这个View能够被压缩/拉伸,就可以解决上面的问题了

例如,将label的调低,就能解决问题了

----ps,感觉xib使用stackView还是有一些问题的


2、代码的方式:

    func createStackView(){

        //使用代码的方式创建stack的时候是可以使用frame的,当然,也可以使用约束

        let stack = UIStackView(frame: CGRect(x: 10, y: 20, width: 300, height: 600))

        

        let btn = UIButton(type: UIButtonType.Custom)

        btn.backgroundColor = UIColor.greenColor()

        btn.setTitle("btnbtn", forState: UIControlState.Normal)

        btn.setTitleColor(UIColor.blueColor(), forState: UIControlState.Normal)

        stack.addArrangedSubview(btn)

        

        let label = UILabel()

        label.backgroundColor = UIColor.lightGrayColor()

        label.text = "aaaabbbbccccddddeeeeffffgggghhhhiiiijjjjjkkkklllmmmnnn"

        label.numberOfLines = 0

        stack.addArrangedSubview(label)

        

        let img = UIImageView()

        img.image = UIImage(named: "2")

        stack.addArrangedSubview(img)

        stack.alignment = UIStackViewAlignment.Center

        stack.axis = UILayoutConstraintAxis.Vertical

        //下面这两行是Fill模式的

        stack.distribution = UIStackViewDistribution.Fill

        label.setContentHuggingPriority(249, forAxis: UILayoutConstraintAxis.Vertical)

        

//        stack.distribution = UIStackViewDistribution.FillEqually

//        stack.distribution = UIStackViewDistribution.FillProportionally

//        stack.distribution = UIStackViewDistribution.EqualSpacing

        

        self.view.addSubview(stack)

        

        print(">>>>>>")

    }

        





© 著作权归作者所有

陈中宝
粉丝 0
博文 8
码字总数 3301
作品 0
西城
私信 提问
iOS9新特性——堆叠视图UIStackView

iOS9新特性——堆叠视图UIStackView 一、引言 随着autolayout的推广开来,更多的app开始使用自动布局的方式来构建自己的UI系统,autolayout配合storyBoard和一些第三方的框架,对于创建约束来...

珲少
2015/11/17
3.2K
0
使用 UIStackView 构建动态的 iOS 布局

iOS上的视图布局向来都比较复杂。在iPad和不同尺寸的iPhone诞生之前,开发者习惯硬编码视图布局。随着不同尺寸的iOS设备出现,这种方式已然不可取。为了解决这个问题,Apple提供了AutoLayou...

oschina
2016/02/18
4.5K
4
OAStackView

iOS 9 引入了非常酷的 UIStackView ,而 OAStackView 可将这个 UIStackView 移植到 iOS7+版本

sikkx
2015/06/30
1K
0
iOS 9: UIStackView入门

本文由CocoaChina译者candeladiao翻译,欢迎参加我们的翻译活动。 原文:iOS 9: Getting Started with UIStackView 同iOS以往每个迭代一样,iOS 9带来了很多新特性。UIKit框架每个版本都在改...

TomatosX
2015/06/25
45
0
iOS平台全新AutoLayoutKit,使用简单功能强大(Swift/OC版)

布局Api采用链式调用(快捷方便) 提供【Objective-C】【Swift2.3】【Swift3.0】三种语言版本库 包含一行代码计算UITableViewCell高度模块 包含WHC_StackView模块(目的替代系统UIStackView) 隐...

netyouli
2016/11/15
1
0

没有更多内容

加载失败,请刷新页面

加载更多

rime设置为默认简体

转载 https://github.com/ModerRAS/ModerRAS.github.io/blob/master/_posts/2018-11-07-rime%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%BB%98%E8%AE%A4%E7%AE%80%E4%BD%93.md 写在开始 我的Arch Linux上......

zhenruyan
今天
5
0
简述TCP的流量控制与拥塞控制

1. TCP流量控制 流量控制就是让发送方的发送速率不要太快,要让接收方来的及接收。 原理是通过确认报文中窗口字段来控制发送方的发送速率,发送方的发送窗口大小不能超过接收方给出窗口大小。...

鏡花水月
今天
10
0
OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
今天
1K
11
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部