九宫格视图的布局及展示(相册选择)

上周一个朋友带的项目出了点问题,招的ios开发人员在实现选取相册图片后用九宫格的样式展示时遇到了瓶颈,花了将近2周都没有解决。后来在跟我交流的过程中他把项目的图片发给我看了下,看完我就笑了,这就只是个算法的问题,花点时间思考下基本就能解决的。废话不多说,把之前完成的效果展示出来。

以上是直接用手机截的图,传上来没想到会这么大。其中图片添加的功能是引入了一个第三方的库,非常好用,跟qq上的图片添加功能几乎没两样,库的名字是ZLPhotoActionSheet。当然这都不是重点,重点是怎样去实现九宫格的展示,上面的图片中每行是4个,这个是我自定义的宏,可以任意修改,每行的展示数目以及展示的总数目,是比较灵活的。

这里要说的是算法的核心,如果想不到这些也就没法做到自动换行展示了。

首先,你得自定义展示的总数目MAXPhotosNO(这里默认是9),每行展示的个数AvgImgsNo(默认为4),在自定义用来展示九宫格的视图类里写一个对象方法-(void)updateTheViewWithImgsArr:(NSArray *)imgsArr;,也就是将获取到的图片数组对象传入这个方法,然后再进行处理。

然后,就到了最关键的一步了,对图图片数组进行处理。先判断数组里元素个数是否等于MAXPhotosNO,这里用于判断是否需要隐藏添加按钮。然后进行for循环处理,创建用于承载图片的UIImageView,个数为图片数组元素的个数。每次创建之前要知道它是第几行的第几个,以此来计算它应该处的位置。

设置2个int类型参数:(i代表循环的变量)

int s = i/AvgImgsNo;(确定是第几行,0代表第一行,以此类推)

int r = i%AvgImgsNo;(确定是第几个,0代表第一个,以此类推)

接下来就可以计算它的位置了:(带space的参数为间距)

imgV.frame = CGRectMake(ImgSpace*(r+1)+AvgWidth*r,RowSpace*                (s+1)+AvgWidth*s,AvgWidth,AvgWidth);

当然,千万别忘了添加按钮的位置也发生了改变:

同样的2个参数: (因为它始终是最后一个,所以直接在后面加1计算就可以了)

int k = (i+1)/AvgImgsNo;

int j = (i+1)%AvgImgsNo;

 这里要注意:如果数组元素的个数已经达到了设置的MAXPhotosNO的最大值,要这样做处理

if((int)imgsArr.count==MaxPhotosNo){

k = MaxPhotosNo/AvgImgsNo;    //始终让它处在最后一行的最后一个,因为我需要它的方位来布局,如果不要的同学,可以不用这样写

}

最后,其实已经完成了,其中的细节可能还有些,但是大体的思路基本就是这个样子,非常的简单。我真的有点不明白为啥这样的一个功能2周都写不出来......,好吧我们都是站在居然肩膀上说风凉话的人哈哈~

时间: 2024-10-10 18:16:42

九宫格视图的布局及展示(相册选择)的相关文章

Android上传图片之调用系统拍照和从相册选择图片

Android上传图片之调用系统拍照和从相册选择图片 前言: 万丈高楼平底起,万事起于微末.不知不觉距离上篇博文已近四个月,2015年12月17日下午发了第一篇博文,现在是2016年4月6日.时间间隔长的过分啊,我自己都看不下去了.原因呢?当然是自己的原因,其实是有很多时间来些博客的,但是这些时间都花在DOTA上了(还是太年轻啊).请原谅我的过错--. 一.概述: 现在几乎应用都会用到上传图片的功能,而要上传图片,首先得选择图片,本文不针对如何上传图片到服务器(每个项目与服务器交互的方式不同,因

Android拍照,相册选择图片以及Android6.0权限管理

概述 在android开发过程中,拍照或者从相册中选择图片是很常见的功能.下面要说得这个案例比较简单,用户点击按钮选择拍照或者打开相册选择图片,然后将选中的图片显示在手机上.android6.0后,推出了动态权限管理.以往我们将涉及到的权限全部写在清单文件中,只要用户安装了该程序,程序在运行过程中都会获得相应权限.android6.0后,对于一些特别敏感的权限,开发者必须在程序中进行声明.拍照和从相册选择图片都是涉及到用户隐私的敏感权限,必须在程序中进行声明. 大概的流程 创建布局文件,这里不多

第6章—渲染web视图—使用Apache Tiles视图定义布局

使用Apache Tiles视图定义布局 Tiles是一个免费的开源模板Java应用程序的框架.基于复合模式简化的用户界面的构建.对于复杂的网站仍是最简单.最优雅的方式与任何MVC技术一起工作.Struts2对Tiles提供了支持,如今Tiles发展已有13个年头,成为Apache的一个独立项目,我们可以单独使用Tiles来构建用户界面布局. Tiles项目:http://tiles.apache.org/index.html Tiles的配置DTD定义:http://tiles.apache.

Customize the View Items Layout 自定义视图项目布局

In this lesson, you will learn how to customize the default editor layout in a Detail View. For this purpose, the Contact Detail View will be used. 在本课中,您将学习如何在详细视图中自定义默认编辑器布局.为此,将使用"联系人详细信息"视图. Note 注意 Before proceeding, take a moment to review

UIImagePickerController相册选择视频

UIImagePickerController *picker = [[UIImagePickerController alloc] init]; //资源类型为视频库 NSString *requiredMediaType1 = ( NSString *)kUTTypeMovie; picker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary; //UIImagePickerControllerSourceTypeSaved

AvocadoJS视图与布局系统

视图View 在上一篇中我已经为大家讲了AvocadoJS入门,今天我就来介绍avocado的核心部分(视图与布局). View为gui核心部件派生为Notification.用它来描述屏幕上所有可见的元素,它是所有视图的基础类型它也是事件的响应者,这些事件由硬件以及操作系统触发.详细的API文档讲大家去这里查阅. 下面是avocado现在提供的所有View继承关系图:注:带*号的为抽象类型或协议没有构造函数 TextFont* TextLayout* BasicScroll* View Tex

Qt 打开安卓相册选择图片并获取图片的本地路径

Qt 打开安卓相册选择图片并获取图片的本地路径 步骤如下: 通过 Intent 打开安卓的系统相册. 推荐使用 QAndroidJniObject::getStaticObjectField 获取静态字段. QAndroidJniObject action = QAndroidJniObject::getStaticObjectField( "android/content/Intent", "ACTION_GET_CONTENT", "Ljava/lan

相册选择头像或者拍照 上传头像以NSData 图片二进制格式 表单上传

一.点击头像图片 或者按钮 在相册选择照片返回img,网络上传头像要用data表单上传 (1)上传头像属性 // 图片二进制格式 表单上传 @property (nonatomic, strong) NSData *imageWithData; (2)头像点击事件 - (void)headImageEvent{ NSLog(@"上传头像"); [self selectPhotoAlbumWithSelectPhotoHandle:^(UIImage *img) { self.heade

html万能排版布局插件,web视图定位布局创意技术演示页

html万能排版布局插件,是不是感觉很强大,原理其实很简单,不过功能很强大哈哈,大量节省排版布局时间啊! test.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>web视图定位布局创意技术演示页</title> <meta content="width=device-width,initial-scale=1.0,m