• iOS开发日记41-9.0布局神器UIStackView


    今天博主有一个UIStackView的需求,遇到了一些困难点,在此和大家分享,希望能够共同进步.

    Stack View提供了横向和纵向的线性布局功能。当多个view被嵌入到StackView,你不再需要去为这写个view去定义布局约束,StackView会自动对这些子视图进行布局处理,也就是说,你无需任何约束就可以让一部分view自动适应所有设备(前提是这些视图必须被放在stackview内),当然,这并不是说你不需要去使用autolayout,这只是在stackview内部而已。

    Xcode7 提供了横向和纵向的statckview供我们使用,直接可以在InterfaceBuilder目标列表里面找到,你可以拖动它们到storyboard的视图里面去,通过这节课你讲很快理解我所说的这些。

    实例APP

    我们首先来看看我们的demo,这节课将教会你通过Xcode7在几分钟内甚至几十秒内完成这样一个适用于所有设备的页面。


    虽然你可以通过其他方式制作出来同样的效果,但是使用StackView制作这样的效果一行代码都不需要哦!

    开始之前,请下载初始化项目,你可能需要Xcode7 bate4(或更高)。

    注,原文中初始项目在dropbox上,这里的项目是译者放在百度网盘上的。

    项目中的图片来自于[magdeleine.co](magdeleine.co "magdeleine.co").

    添加Stack View

    打开项目之后,添加一个StackView(纵向)到storyboard以用于包含图片。


    接下来,放置一个ImageView到StackView里,这个时候你会发现imageview自动填充了这个stackview,接下继续拖入两个imageview,神奇的事情发生了,stackview内的图片都做到了很好的自适应。

    为StackView定义布局约束

    • 设置stackview顶部,左边和右边的约束
    • 设置stackView的告诉和view的高度相同,然后将此布局高度修改为0.7也就是view的70%

    设置StackView的属性

    在属性栏里设置Distribution属性为fill Equally,可以让stackView内的三个imageview尺寸保持相同。

    设置图片

    指定图片到imageview,他们在项目文件里分别为 nature-1 nature-2 nature-3,设置图片的mode为 Aspect Fill 并且 勾选clicpSubview。


    现在你可以运行这个程序,并且可以尝试在不同的设备上运行,在不同的设备上StackView会根据不同的屏幕自动做适配。

    使用StackView来设置Label和button的布局

    现在,有一些label用来描述图片信息,有两个button用来点赞和分享。那么首先添加两个Label,设置字体和行数并且排列他们。
    然后按住command键选择这两个label,点击布局菜单下面的stackview小图标,他们就会被放置在一个stackView里,你可以设置这个stackview的布局和排列的方式(横向或是纵向)以及间距,然后添加两个按钮 分别为Like和Share,同样的操作,把他们放置在stackView里进行布局。最后你还可以把放置按钮的stackview(按钮组)放置到label的stackview里。和标题的Label组成一个Stackview。总之非常灵活。


    这样Label和button就可以在stackview内部自适应排列了。

    最后,我们再给按钮和label组成的这个stackview设置一下布局约束。


    要保证Label能够永远自适应,最好修改Label的Line为0,LineBreaks设置为Word Wrap。到此为止,已经完成了所有的UI设计工作。现在运行一下APP。


    如果你在iphone上旋转屏幕,布局会变成这样:


    这本本身没什么错,但是我们可以让他更好,比如这样:

    使用Size Class适配Stack Views

    为了实现不同的布局,并让stackview在不同的设备下自适应,我们需要使用size class, 在IOS8文档中详细介绍了size class的概念,下面是IOS设备及size class对应的大小:

    我们想让viewstack(图片组)的显示可以根据屏幕的旋转分别呈现为纵向和横向,那么使用下面两个sizeclass:

    • Compact width-Compact height
    • Regular width-Compact height

    现在,选择我们的stackview(图片组)并且在属性框添加属性:

    做完这些,重新运行app,我们就实现了上面的效果。

    总结

    在本教程中,我们演示了如何使用StackView来布局用户界面,它简化了许多工作,仅仅需要做少量的约束便可实现自适应布局。你可能有一个问题,你是否应该使用StackView?那么,Apple官方建议开发人员应优先采用StackView来设计用户界面,然后再根据实际需求来添加约束,因此,开始使用StackView来设计你的用户界面吧,我想你会喜欢上它。

    http://www.tuicool.com/articles/ZNFzemM?plg_nld=1&plg_uin=1&plg_auth=1&plg_nld=1&plg_usr=1&plg_vkey=1&plg_dev=1

  • 相关阅读:
    【转】php三种工具pecl pear composer的区别
    【转】Git使用详细教程
    【转】chrome Network 过滤和高级过滤
    Python3第三方组件最新版本追踪实现
    Python3版本号比较代码实现
    模糊测试工具设计思路浅谈
    Python3+WebSockets实现WebSocket通信
    Python3+PyCryptodome实现各种加密算法教程
    HTTP漫谈
    Python3+Robot Framework+RIDE安装使用教程
  • 原文地址:https://www.cnblogs.com/Twisted-Fate/p/4923326.html
Copyright © 2020-2023  润新知