iOS-UIStackView的演练

作者: 麦穗0615 | 来源:发表于2016-06-15 20:27 被阅读549次

    UIStackView是iOS9的一个新特性,特别好用。就根据我上课学的案例,来展示一下。就不过多介绍了,直接上案例,自己体会。

    一、创建项目,导入素材
    创建项目-导入素材
    二、搭建UI界面
    搭建UI界面
    二、将所需控件添加到UIStackView中
    • 单个增加


      步骤①
    • 组合


      组合
    • 填充


      填充
    • 效果展示


      效果展示
    三、调整-StackView中的控件
    • 使StackView中的按钮等宽


      使stackView中的按钮等宽
    • 效果展示


      效果展示
    四、设置约束,解决报错
    • 为了解决约束报错,设置整体UIStackView的约束上(0)、下(20),左(20)、右(20),内部间距设置为20,按钮的高度约束调整为44,带星星的图片高度约束设置为44,其中图片,设置为view->Mode->Aspecified,顶部lable宽度约束设置为20,设置完之后运行。


      设置约束,解决报错

      运行效果:


      界面展示
    四、增加按钮点击事件
    增加按钮点击事件
    • 点击事件的实现


      点击事件的实现
    • 多次点击,只出现一个图片是因为:图片重叠在了一块


      图片重叠
    五、解决图片重叠问题,和适配星星图片大小。
    • 注意底部容器内部控件的排序和图片的比例适配


      解决图片重叠问题
    • 调整排序方式


      图片的调整
    • 解决只能出现3个图片(排列满了就添加不进去了)


      解决只能出现3个图片
    • 展示效果


      展示效果
    六、设置撤销按钮。
    • 利用这个撤销,只是把控件的约束撤销掉了,而没把控件撤掉


      设置撤销按钮
    • 完善收尾


      移除-完善收尾

      到此结束。

    相关文章

      网友评论

        本文标题:iOS-UIStackView的演练

        本文链接:https://www.haomeiwen.com/subject/ehlpdttx.html