首页 > 代码库 > iOS上传图片--根据图片的数量实现动态布局

iOS上传图片--根据图片的数量实现动态布局

  在iOS开发中,应该绝大部分软件有用到上传图片功能(聊天、发布说说、发表评论等等),比如微信

      技术分享

     我就简单说下类似微信的图片上传的自动布局功能:

  1.默认只显示一张占位图片

  技术分享

 

  2.根据图片选择的数量,改变占位图片的位置

  技术分享

   

  3.一旦图片数量超过一行的数量,页面自动适应,变成2行

  技术分享

  4.点击图片 和 点击“+”号占位图片的方法不同

      点击图片-->放大图片

   点击“+”号图片:

    技术分享

    5.最多显示9张图片,当显示9张之后,占位图片“+”就不在显示了

  技术分享

    

  以上的图片自动布局的基本功能,下面讲解一下如何实现的

  1.创建一个UIView,用来存放选择的照片

  2.简单的默认一开始就直接创建完9个按钮(图片放在按钮上),并为按钮添加点击事件,随后全部添加到UIView上

    技术分享

  3.这样的话,默认显示9个按钮,9张图片,不符合我们自动布局的要求,所以UIView的高度根据选择图片的数量实现自适应

  (注意:多张照片选取可以用ZYQAssetPicker框架,有需要的同学可以留言,或者gitHub上面找)

  -->a.所有我们首先隐藏所有的第一步创建的btn

     b.根据选择的图片的数量,设置高度约束

    技术分享  

  4.知道显示的高度之后,还得知道要显示的按钮的数量

     a.因为第一步,我们将9个btn都添加到UIView上,所有可以根据subview的下标取出按钮

  

    技术分享

   b.根据选择的照片数量,判断(如果<9张,还要显示一张占位图片“+”图片)

    技术分享

  

    5.设置不同按钮的点击事件

     a.如果是图片,显示--放大图片

     b.如果是默认占位图片,显示”上传图片“

      

    分析:其实不管是a还是b,都是image 设置的 btn上显示,本质是一样的!!

    要区别:不是图片显示就是imageView,“+”按钮就是Btn  

    

    解决方法:通过按钮的下标!

    如果3张图片,则 (0,1,2)均调用放大图片方法--a,下标为3(第四张)就是--b

    技术分享

  

   基本的流程就是如上几步,当然还有一些需要添加的细节,比如删除图片,4张图片要显示2行(1个默认的“+”占位图片),如果此时删除掉一张图片,就剩下3张图片,则只显示一行,此时又要刷新UIView的高度约束,如果有正好有需要做这个功能的小白童鞋,可以留言或者私密我。

iOS上传图片--根据图片的数量实现动态布局