17659人阅读
camera（15）
转自：/forum.php?mod=viewthread&tid=276351
CMOS Sensor的调试经验分享
　　　　　我这里要介绍的就是CMOS摄像头的一些调试经验。
　　首先，要认识CMOS摄像头的结构。我们通常拿到的是集成封装好的模组，一般由三个部分组成：镜头、感应器和图像信号处理器构成。一般情况下，集成好的模组我们只看到外面的镜头、接口和封装壳，这种一般是固定焦距的。有些厂商只提供芯片，需要自己安装镜头，镜头要选择合适大小的镜头，如果没有夜视要求的话，最好选择带有红外滤光的镜头，因为一般的sensor都能感应到红外光线，如果不滤掉，会对图像色彩产生影响，另外要注意在PCB设计时要保证镜头的聚焦中心点要设计在sensor的感光矩阵中心上。除了这点
CMOS Sensor硬件上就和普通的IC差不多了，注意不要弄脏或者磨花表面的玻璃。
　　其次，CMOS模组输出信号可以是模拟信号输出和数字信号输出。模拟信号一般是电视信号输出，PAL和NTSC都有，直接连到电视看的；数字输出一般会有并行和串行两种形式，由于图像尺寸大小不同，所要传输的数据不同，数据的频率差异也很大，但是串行接口的pixel clock频率都要比并行方式高（同样的数据量下这不难理解），较高的频率对外围电路也有较高的要求；并行方式的频率就会相对低很多，但是它需要更多引脚连线；所以这应该是各有裨益。（笔者测试使用的系统是8bit并行接口）另外输出信号的格式有很多种，视频输出的主要格式有：RGB、YUV、BAYER
PATTERN等。一般CMOS Sensor模组会集成ISP在模组内部，其输出格式可以选择，这样可以根据自己使用的芯片的接口做出较适合自己系统的选择。其中，部分sensor为了降低成本或者技术问题，sensor部分不带ISP或者功能很简单，输出的是BAYER PATTERN，这种格式是sensor的原始图像，因此需要后期做处理，这需要有专门的图像处理器或者连接的通用处理器有较强的运算能力（需要运行图像处理算法）。
　　不管sensor模组使用何种数据格式，一般都有三个同步信号输出：帧同步/场同步（Frame synchronizing）、行同步（Horizontal synchronizing）和像素时钟（pixel clock）。要保证信号的有效状态与自己系统一致，如都是场同步上升（下降）沿触发、行同步高（低）电平有效等。
　　通过以上介绍，我们就可以根据自己的使用的系统选择适合的sensor模组。要选择接口对应（如果并行接口，sensor模组输出数据bit位多于接受端，可以用丢弃低位的数据的方法连接）、数据格式可以接受或处理、pixel clock没有超过可接受的最高频率（有的是可调的，但帧率会受影响）、场同步和行同步可以调节到一致的sensor模组，这样才可以保证可以使用。
　　保证这些条件的正确性下，还要符合它的硬件电路要求，首要的是确定它的电源、时钟、RESET等信号是否符合芯片要求，其次要看所有的引脚是否连接正确，这样保证外围的电路没有错误情况下才可能正确显示图像。各个厂商生产的产品各不相同，一些厂商的sensor模组在默认状态下就可以输出图像，而有些厂商的sensor模组必须要设置一些寄存器以后才可以得到图像。区别是否可以直接输出图像，可以通过检测sensor
的输出脚，如果三个同步信号都有，数据线上也有数据，那一般就会有默认图像输出，另外也可以跟厂商联系获得有关信息。如果没有默认输出就需要设置寄存器了，一般都是通过两线串行方式（IIC总线使用频率很高）设置寄存器。　　　　
　　摄像头问题及解决办法汇总
　　一、名词解释
　　1. 白平衡
　　白平衡指的是传感器对在光线不断变化环境下的色彩准确重现的能力表示。大多数拍照系统具有自动白平衡的功能，从而能在光线条件变化下自动改变白平衡值。设计工程师寻找的图像传感器应该配备了一个很好的自动白平衡（AWB）控制，从而提供正确的色彩重现。
　　2. 动态范围
　　动态范围测量了 图像传感器在同一张照片中同时捕获光明和黑暗物体的能力，通常定义为最亮信号与最暗信号（噪声门槛级别）比值的对数，通常用54dB来作为商业 图像传感器的通用指标。具有较宽动态范围的 图像传感器可以在明光环境下提供更好的性能（例如，使用较窄动态范围传感器在明光环境下拍出的照片会出现“水洗”或模糊的现象。）
　　3. 工频干扰 (Banding)
　　Sensor在日光灯作为光源下获取图像数据时会产生flicker，其根本原因是照在不同pixel上光能量不同产生的，所接受的光能量的 不同也就是图像的亮度的不同。
　　由于CMOS sensor的曝光方式是一行一行的方式进行的，任何一个pixel的曝光时间是一样的，也就是同一行上的每个pixel的曝光开始点和曝光的时间都是一模一样的，所以同一行的所有点所接收到的能量是一样的，而在不同行之间虽然曝光时间都是一样的，但是曝光的开始点是不同的，所以不同行之间所接受到的能量是不一定相同的。
为了使不同行之间所接受的能量相同，就必须找一个特定的条件，使得每一行即使曝光开始点不同，但是所接受的光能量是相同的，这样就避开了flicker，这个特定的条件就是曝光时间必须是光能量周期的整数倍时间。
　　Banding由工频干扰引起，交流电光源都有光强的波动，在中国交流电频率是50Hz，光强的波动就是100Hz，周期10ms。如果camera曝光时间不是10ms的整数倍，那么在不同的感光面接收到的光能量一定不一样，体现在图像上就是有明暗条纹。 消除banding就得想办让曝光时间是10ms的整数倍！60Hz的交流电需要控制曝光时间为8.33ms的整数倍。
　　以50Hz为例说明，实现这个有两种办法：
　　1、设置曝光控制，强制为10ms整数倍变化，但是这样会浪费一部分曝光时间，导致曝光无法用满，在室内自然就会损失性能。
　　2、修改桢率，使每桢图像分到的时间是10ms的整数倍，则可以用满每桢曝光时间在，室内效果更好。修改桢率可以插入Dummy Line或者Dummy Pixel。这需要一点点计算，具体计算需要看sensor输出Timing。
　　例如把桢率设置为7.14fps，则每桢曝光时间是140ms。如果是15fps，则每桢曝光时间是66.66ms，如果强制曝光为10ms整数倍，最大即60ms，则有6.66ms无法参与曝光，损失性能。
　　具体调整桢率方法得和sensor的FAE沟通，每个sensor都可能不一样，不能一概而论。调整桢率还有个原则要注意，预览一般不能低于 10fps，再低就很卡，常用14.3fps和12.5fps；抓拍不能低于5fps，否则用手就很难拍出清晰的照片，常用7.14fps。桢率是一个权 衡折中
　　的选择，高了曝光时间不够，暗光效果太差，低了没法拍照，容易虚。
　　4. Lens Shading (color shading)
　　5. Chief Ray Angle
　　拍摄镜头和传感器之间的接口是整个可拍照手机系统中最重要 的接口之一。随着镜头的长度变得越来越短，光线到达传感器像素位置的角度也就会变得越来越大。每个像素上都有一个微镜头。微镜头的主要功能就是将来自不同 角度的光线聚焦在此像素上。然而，随着像素位置的角度越来越大，某些光线将无法聚焦在像素上，从而导致光线损失和像素响应降低。
　　从镜头的传感器一侧，可以聚焦到像素上的光线的最大角度被定义为一个参数，称为主光角(CRA)。对于主光角的一般性定义是：此角度处的像素响应降低为零度角像素响应(此时，此像素是垂直于光线的)的80%。
　　光 线进入每个像素的角度将依赖于该像素所处的位置。镜头轴心线附近的光线将以接近零度的角度进入像素中。随着它与轴心线的距离增大，角度也将随之增大。 CRA与像素在传感器中的位置是相关的，它们之间的关系与镜头的设计有关。很紧凑的镜头都具有很复杂的CRA模式。如果镜头的CRA与传感器的微镜头设计
不匹配，将会出现不理想的透过传感器的光线强度(也就是“阴影”)。通过改变微镜头设计，并对拍摄到的图像进行适当处理，就可以大大降低这种现象。
　　改 变微镜头设计可以大大降低阴影现象。然而，在改变微镜头设计时，必须与镜头设计者密切配合，以便为各种拍摄镜头找到适合的CRA模式。相机的设计工程师应 该确保这种技术合作得以实现，并确保传感器与镜头CRA特性可以很好地匹配。为确保成功实现此目标，美光开发了相关的仿真工具和评价工具。
　　由于光 线是沿着不同的角度入射到传感器上的，因此对于各种镜头设计而言，阴影现象都是固有的。“cos4定律”说明，减少的光线与增大角度余弦值的四次方是成比 例关系的。另外，在某些镜头设计中，镜头可能本身就会阻挡一部分光线(称为“晕光”)，这也会引起阴影现象。所以，即使微镜头设计可以最小化短镜头的阴影
现象，此种现象还是会多多少少地存在。为了给相机设计者提供额外的校正阴影现象的方法，MT9D111中内嵌的图像处理器包含了阴影校正功能，它是为某些 特定镜头而定制的。 为了帮助设计工程师将传感器集成在他们的产品中，美光为其生产的所有传感器产品提供了各种开发软件。通过使用这些软件，相机设 计工程师可以简化对各种芯片特性默认值的修改过程。每种变化的结果都可以显示在一个PC监视器上。对于很多相机中用到的新型镜头，通过使用这个开发系统， 可以对校正镜头阴影和空间色彩失真进行参数设置。通过使用一个均匀点亮的白色目标，可以对设置响应过程进行简单的试验。软件开发工具可显示对阴影现象的分
析结果。之后，工程师就可以使用区域方法来应用校正值。关于校正过程的寄存器设置将保存在开发系统中，以用于相机设计。
　　6. Binning
　　Binning是将相邻的像元中感应的电荷被加在一起，以一个像素的模式读出。Binning分为水平方向Binning和垂直方向 Binning，水平方向Binning是将相邻的行的电荷加在一起读出，而垂直方向Binning是将相邻的列的电荷加在一起读出，Binning这一 技术的优点是能将几个像素联合起来作为一个像素使用，提高灵敏度，输出速度，降低分辨率，当行和列
　　同时采用Binning时，图像的纵横比并不改变，当采 用2:2Binning，图像的解析度将减少75%。在手机小屏幕上Preview时建议用这种方式 而不是通过DSP来做抽点的动作。
　　7. IR cut （滤除红外光）
　　sensor不仅对可见光谱感光,而且对红外光谱感光. IR就是infrared红外光, 如果没有IR-Cut Filter,图象就会明显偏红,这种色差是没法来用软件来调整的,一般IR-Cut在650+/-10nm,而UV,紫外光的能量很小,一般就忽略了.
　　未加IR cut 拍摄的照片,可见影响最大的是图像的色彩.
　　二、图像传感器拍摄问题汇总
　　1. 出现横向条纹
　　比如出现横向的紫色或绿色条纹。一般情况下是时序有问题。
　　实例图如下：
　　硬件改善了MCLK和PCLK线，现在已经基本没有绿线了.
　　走线的时候要注意 MCLK、PCLK还有帧同步（vsync）和行同步（hsync），基本上市面上的芯片这些信号都要分开走线，最好加GND shielding.
　　现象: 闪横的紫色或绿色干扰线
　　原因: Hsync和高速线距离太近太长, 产生了耦合(10cm的高速线产生约5pF左右的耦合电容), 导致HSYNC不能迅速拉升至90%的区域，相位不同步，最终数据采集有错位。然后因为YUV算法的作用，引起绿线和紫色的闪线。
　　解决办法：绝对禁止将HSYNC，PCLK，MCLK这三根线挤在一起走线。 1）HSYNC夹在低速线SDA和SCL之间
　　2）PCLK和MCLK如果一定要贴着走线，最好拉开一点距离，当中夹一根地线。
　　2. 颜色和亮度不连续
　　一般是数据线存在短路、断路和连错的问题。图像会出现类似于水波纹的等高线或大面积色偏. D信号丢失画面整体也会色偏，比如RGB565,D0~D4均断路图像会因蓝色和绿色信号丢失过多而呈现红色。
　　1）一根数据线虚焊导致的等高线及颜色失真例子
　　等高线
　　正常的图像
　　2）两根数据线和其他设备复用导致的偏绿问题
　　8根数据线中有两根被其它设备复用了，所以这两跟线没出数据。
　　3）数据线接反的情况：
　　4）数据线错位
　　例1. 好不容易把OV2640初始化了，但是预览的图像却不对，附件是我capture的一张图（我的一根手指头-_-|||）。 我用Photoshop分析了一下上面的图片，发现只有G通道有信号，RB通道全黑。
　　我测了一下2640的10根数据线与CSI的16根数据线的连接关系，发现硬件工程师布板时弄错了将sensor的10根数据线D[0]~D[9]连到了CSI的D[4]~D[15],而CSI取得的是D[8]~D[15]的8bit数据，结果造成了数据位的错位与丢失，造成了以上图像的状况。
　　5） 数据线问题例图汇总
　　第一张是亮度很低的情况下抓到的原始数据图像
　　第二张是将光圈调大以后出现的现象
　　3. 图像中只有红或绿颜色
　　Y和U/V的顺序不对。将摄像头的采样格式由CbYCrY改为YCbYCr后,颜色就对了。 示例图片如下所示：
　　4. 横向无规则条纹
　　5. 竖向无规则条纹
　　6. 偏红
　　7. 热噪声.
　　过一段时间噪点逐渐增多.
　　开始工作时正常的，，没有色点，工作过一段时间后，模组开始出现色点，而且色点越来越多. 如上图所示. 原因：
　　工作一段时间sensor温度会提升，温度升高会加剧半导体材料的本征激发。这会导致sensor S/N降低，noise加剧。此状况与sensor材料关系较大，后端或软件处理可以减缓此状况但不能根除。这种叫hot pixel，是芯片过热造成的。
　　8. 模拟电压过低或不稳定
　　模拟电压过低导致很强的光才能感应图像，并且偏色。
　　例1如下图所示，只有天花板上的灯管才感应成像，其他部分很模糊。
　　例2， 模拟电压过低导致竖向条纹。提高AVDD后问题解决。
　　例3，在调试 OV7725时发现，刚打开摄像头时图像有条纹，开了一段时间后图像就正常了，有没有哪位知道是什么原因；不正常的图像如下。查出问题了，是模拟电压不稳导致的。
　　9. 背部材料太薄导致“鬼影”
　　补强的表面要用亚光黑油，防止漏光。
　　例1. OV2715异常图像，感测到了背面电路板的漏光，图像如下：
　　例2，GC0307 图像异常，如下图。 中间有条线，像分层那样的线，正常情况是没有。格科微的叫我们四周都补胶，就解决啦。
　　10. 由噪声导致的图像横纹
　　在新版的电路板中，将CMOS移到离主IC较远的地方现象就消失了，之前是放在主IC的背面，猜测是主IC对CMOS造成的影响，比如在模拟电压上引入噪声。 示例1 如下图所示。
　　示例2：
　　cmos为ov的30w像素，型号为ov7141。使用时出项很明显的水平方向的横波纹。 采用3.3v和2.5v供电，其中VDD_C和VDD_A是由2.5v供电，pcb上直接将他们连在一起接2.5v。直接铺地，没有划分模拟地和数字地。
　　使用外接电源对AVDD供电，没有出现上述现象。可以确定是由主板的电源噪声引起的
　　改板后效果还可以，主要改动有：
　　1) 原来是两层板，现在用的是4层板，有专门的电源层
　　2) LDO输出改用大容量的钽电容滤波。示波器测量电源纹波 比以前小了。
　　11. 工频干扰
　　在室外自然光下如果不会出现，那一定是50/60Hz引起的
　　12. Lens校准参数未调好导致的中间较亮的情况
　　用OV9650摄像头模组拍的图片，像素是800 X 600；中间较亮
　　从硬件来说，可能是lens set与sensor不匹配，特别是CRA，你得看看datasheet两者是否差距太大。
　　软件上，可能是lens correction没调好（个人感觉楼主状况属此列），设定好correction区域然后将gain值拉高让中心与周边亮度差异减少，如果此时整个画面过曝，可以将整体gain值再往下调（也可以设定曝光参数来减少画面亮度）。
　　按以上方法调整OV9650的几个与lens correction有关的寄存器的值，使中心和四周的亮度均匀！
　　13. 通过自动增益控制降低噪点
　　在调试OV7675时，图像有左边是模糊的，右边正常，图片如下：
　　将 AGC 调小之后不会出现了，但是没之前亮了.效果如下:
　　14. 自动曝光计算出现的偏绿现象
　　OV7670：
　　在室外光线较亮拍摄时，画面颜色任何时候都正常。
　　在室内光线较暗拍摄时，刚打开摄像时拍摄的画面偏绿，几秒钟之后就会恢复正常。
　　属于正常现象。
　　OV7670 30W 计算AE时间比较长。在计算AE的过程中容易出现偏色现象。 可以丢帧或者延时解决这个问题
　　15. 时序不对导致的图像上部或下部出现条纹 因Vsync偏移出现问题的例子如下图所示。
　　问题解决方法：
　　camera 模组的timing调整不了。修改AP的camera控制，使垂直同步偏移12 rows. 图像输出正确。
　　16. lens镜间反射导致的眩光
　　这是一颗5M的模组拍摄的图片，天花板的灯在视场外边缘，图中为何出现紫红色的光？是什么原因造成的？
　　属眩光现象，一般是由于多片lens镜间反射造成。通过改善镀膜制程，增加镜片透射率可以缓解次问题。
　　另外，这张照片光心偏到左边去了，holder偏移？lens set circle够大啊，这种偏移都能cover掉。
　　多谢各位关注，问题已经解决，此现象是lens组装到模组上面的机构问题产生。
　　17. pclk与vsync布线干扰
　　在调试一款手机摄像头(OV7675)时,发现画面垂直不同步,主要是画面的下半部分跳动很厉害,上半部分是好的.
　　问题已经找到了,帧同步VSYNC和PCLK布线有干扰
　　18. PCLK采样边沿选择不对导致的噪点
　　例1，图中有噪点
　　转换了一下Pclk的极性，这个躁点的问题得到了很好的解决。
　　例2. ov7675拍出来的照片发绿。可能是PCLK采样边缘不对，可以试试将pclk反向。也可能是数据线缺失问题。
　　例3， 如下图所示。通过修改pclk的上升沿和下降沿就解决了。
　　主要有两点：
　　1.修改PCLK的上升沿的斜率。 2.或者修改I/O的上升沿的斜率。
　　原因是不同厂家的模组layout的走线的长短，FPC的厚薄，都可能影响到PCLK的获取， FPC的公差过大，或者头板的制作是否有什么问题，都可能引起这个问题。 如果可以通过硬件的方式改变PCLK上升沿的斜率，也可以解决这个问题。
　　来结案了，通过修改pclk的上升沿和下降沿就解决了
　　19. FPN问题
　　白天或亮一点的地方是没有这个问题，就只有在低照度下使用闪光灯拍照会有这样的情形。
　　FPN( fixed pattern noise), 无解。
　　20. 台阶效应
　　gain过大，把digitalize的量化步距，乘大了，就出现台阶效应。还与内部的量化精度不够，有关系。
　　另外，若不同的颜色通道的gain不同（白平衡计算出的R/G/B_gain不同），会出现color phase error。
　　示意图，如下，只画了B、G两个通道，B_gain比G_gain大，会造成灰阶的景物，有的地方B大，有的地方G大，就会出现颜色不断交替。
　　结合上台阶效应，可能就会表现成的这幅图
　　21. 因电源问题产生的竖向条纹
　　现在已经确定是电源的问题了，我在每个电源都并上了一个大电容，条纹消失了。现在我是用CPU的I/O采集的，效果很好。
　　22. Lens与摄像头不匹配导致的部分偏红现象
　　图中下方居中的地方偏红。ov工程师将LENS CORRECTION调到了极限问题还存在，确认是LENS与SENSOR不匹配造成的，模组厂家更换了镜头后问题基本解决。
　　我下载了你的图片发现有以下问题：
　　１．首先你的照片awb就不对，本身这张照片就没有达到白平衡． ２．照片边界锯齿现象很严重．
　　３． 色偏问题，你首先要了解一下你的sensor的Lenschief ray angle角度是多少，还有lens的CRA是多少.如果lens的CRA小于sensor的．一定会有偏色的现象．要么换lens．如果市场上找不合适 的Lens,就说明sensor 本身品质不是很好．
　　4.理论上lens shading是解决lens的通透率不一样的问题．但也许各家回加自己的算法，可以一试．
　　５．如果Lens 和sensor都已经固定，可以人为想一些办法来减少色差． a.可以将颜色调淡点，这样就不太明显
　　b．做AWB校正，排除不同sensor对RGB感应的不同，引起AWB曲线走的不准．
　　CRA通俗的讲是lens的主轴光线和对成像有贡献的最大的如射光线的夹角,一般Lens厂商会提供CRA曲线,因为Lens从中心到四周的CRA是不一样的.
　　偏红除了SHADING外可能还是要调AWB，因为图片的下方其实就是一片白色，sensor在照白色的地方出现了偏红，再试试调整一下AWB，或者在灯箱里看看R,G,B的三条线是
　　否重合！
　　如果是AWB的问题，那为什么图像还有白色区域呢？AWB是不会调的有的偏色，有的不偏，不知道的就不要乱说。
　　如果是CRA不比配，那出现的偏色应该是对称的，下面偏紅则上面一定会偏紅。 个人觉得应该是漏光造成的，不是barrel就是通光孔那里引入了杂光。
　　23． DOVDD28走线过细过长以及地线不合理 现象：花屏
　　原因：2.8V电压因为导线上的电阻吸收了电压，导致驱动能力不够。地线被拉高并产生毛刺现象，影响信号完整性和数据采集。
　　24. DVDD电压有问题
　　图中的高光部分是办公室窗户。其它部分全黑，没有任何细节？ 是什么原因？AWB？AGC？还是对比度啊？
　　问题解决了，是DVDD电压不对。
　　datasheet写的1.8V，问了FAE结果是1.2V。
　　25. 增益小导致的白色条纹问题
　　当对着白色的物体时，刚进入预览时，会出现下图中显示的条纹，当移动手机时，则这种条纹消失，以后也不会出现，只有再次进入预览时可能会出现，请教各位大虾到底是什么原因？
　　这个问题，现在已经解决了，加大了初始化代码中的增益之后，就可以了。
　　26. 帧率问题导致的图像错位
　　Sensor为0v9655 在拍sxga 130万图像有时会出现图像错位的问题（如图），vga的则不会出现，帮忙分析。谢谢！
　　帧率太高了,暴光时间短了.可以调整VBLANK,HBLANK来解决 再降低FPS到5,试试,你的buffer速度呢?? 谢谢大家！在我这里降低帧速率比较有效。
　　27. 电源噪声
　　OV9653出现如图所示的横向纹路。
　　问题已经解决，电源问题，AVDD加钽电容就好了。估计是电源纹波比较严重导致的。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：176641次
积分：1932
积分：1932
排名：第14042名
转载：119篇
(3)(1)(1)(2)(1)(1)(1)(2)(1)(1)(1)(1)(9)(1)(2)(4)(2)(2)(1)(3)(4)(1)(6)(11)(31)(19)(9)The page is temporarily unavailable
nginx error!
The page you are looking for is temporarily unavailable.
Please try again later.
Website Administrator
Something has triggered an error on your
This is the default error page for
nginx that is distributed with
It is located
/usr/share/nginx/html/50x.html
You should customize this error page for your own
site or edit the error_page directive in
the nginx configuration file
/etc/nginx/nginx.conf.UICollectionView实现书本翻页布局
UICollectionView实现书本翻页布局
UICollectionView能够实现你想要的任何布局,在raywenderlich中,用介绍了如何实现书本翻页布局,不得不佩服的想法,链接地址:/94565/how-to-create-an--book-open-animation-part-1;
本文参考了这种思想,用OC编程实现了其中一部分效果,如上图所示;下面代码在每处都加上了详细解释,欢迎大家提供意见,
新建一个BookCell,继承自UIcollectionViewCell,在实现部分,重写applyLayoutAttributes方法,实现书本边缘圆角效果:
#import&"BookCell.h"&&&&@implementation&BookCell&&&&{&&&&&&BOOL&isRightP&&}&&&&//初始化&&-&(instancetype)initWithFrame:(CGRect)frame&{&&&&&&self&=&[super&initWithFrame:frame];&&&&&&if&(self)&{&&&&&&&&&&//设置背景&&&&&&&&&&self.bgView&=&[[UIView&alloc]&initWithFrame:self.contentView.bounds];&&&&&&&&&&self.bgView.backgroundColor&=&[UIColor&whiteColor];&&&&&&&&&&[self.contentView&addSubview:self.bgView];&&&&&&&&&&&&&&&&&&&&//添加图片&&&&&&&&&&self.imageView&=&[[UIImageView&alloc]&initWithFrame:self.bgView.bounds];&&&&&&&&&&[self.bgView&addSubview:self.imageView];&&&&&&&&&&&&&&&&&&&&//添加星座label&&&&&&&&&&self.textLabel&=&[[UILabel&alloc]&initWithFrame:CGRectMake(0,&0,&80,&40)];&&&&&&&&&&self.textLabel.center&=&CGPointMake(self.bgView.bounds.size.width&/&2&+&20,&self.bgView.bounds.size.height&-&20);&&&&&&&&&&[self.bgView&addSubview:self.textLabel];&&&&&&&&&&&&&&&&&&&&//开启反锯齿&&&&&&&&&&self.layer.allowsEdgeAntialiasing&=&YES;&&&&&&&&&&&&&&&&}&&&&&&return&&&}&&&&//默认自定义布局,布局圆角&和&中心线&&-&(void)applyLayoutAttributes:(UICollectionViewLayoutAttributes&*)layoutAttributes&{&&&&&&[super&applyLayoutAttributes:layoutAttributes];&&&&&&//判断cell的奇数偶数&&&&&&if&(layoutAttributes.indexPath.item&%&2&==&0)&{&&&&&&&&&&//如果偶数,则中心线在左边,页面右边有圆角,左边没有圆角&&&&&&&&&&isRightPage&=&YES;&&&&&&&&&&self.layer.anchorPoint&=&CGPointMake(0,&0.5);&&&&&&}&else&{&&&&&&&&&&isRightPage&=&NO;&&&&&&&&&&self.layer.anchorPoint&=&CGPointMake(1,&0.5);&&&&&&}&&&&&&&&&&&&//圆角设置&&&&&&UIRectCorner&corner&=&isRightPage&?&UIRectCornerTopRight&|&UIRectCornerBottomRight&:&UIRectCornerTopLeft&|&UIRectCornerBottomL&&&&&&UIBezierPath&*bezier&=&[UIBezierPath&bezierPathWithRoundedRect:self.bgView.bounds&byRoundingCorners:corner&cornerRadii:CGSizeMake(16,&16)];&&&&&&//CAShapeLayer:&通过给定的贝塞尔曲线UIBezierPath,在空间中作图&&&&&&CAShapeLayer&*maskLayer&=&[[CAShapeLayer&alloc]&init];&&&&&&maskLayer.frame&=&self.bgView.&&&&&&maskLayer.path&=&bezier.CGP&&&&&&self.bgView.layer.mask&=&maskL&&&&&&self.bgView.clipsToBounds&=&YES;&&}&&@end&&
新建一个BookLayout&布局类,继承自UICollectionViewLayout&,在这里我们将实现关键的3个必须实现的布局方法:
1.&prepareLayout
2.&collectionViewContentSize
3. &layoutAttributesForElementsInRect
关键思想,是在&layoutAttributesForItemAtIndexPath&方法中,实现空间布局,考虑到frame的变化,旋转角度和旋转比例的变化,以及cell的frame变化后,anchor点的重新设定等;
#import&"BookLayout.h"&&&&@implementation&BookLayout&&&&&&//定义cell的尺寸&&static&CGFloat&pageWidth&=&180;&&static&CGFloat&pageHeight&=&280;&&static&CGFloat&numberOfPages&=&0;&//定义总的cell个数&&&&&&-&(void)prepareLayout&{&&&&&&[super&prepareLayout];&&&&&&//滚动结束时,翻动快些&&&&&&self.collectionView.decelerationRate&=&UIScrollViewDecelerationRateF&&&&&&numberOfPages&=&[self.collectionView&numberOfItemsInSection:0];&&&&&&self.collectionView.pagingEnabled&=&YES;//滚动视图整页翻动&&}&&&&&&//布局实时更新&&-&(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds&{&&&&&&return&YES;&&}&&&&&&//内容滚动区域设置&&-&(CGSize)collectionViewContentSize&{&&&&&&//每个视图上显示两页&&&&&&CGFloat&width&=&numberOfPages&/&2&-&1;&&&&&&return&CGSizeMake(width&*&self.collectionView.bounds.size.width,&self.collectionView.bounds.size.height);&&}&&&&&&&&//每个cell的布局设置&&-&(UICollectionViewLayoutAttributes&*)layoutAttributesForItemAtIndexPath:(NSIndexPath&*)indexPath&{&&&&&&&&&&&&//获取cell的布局&&&&&&UICollectionViewLayoutAttributes&*layoutAttributes&=&[UICollectionViewLayoutAttributes&layoutAttributesForCellWithIndexPath:indexPath];&&&&&&&&&&&&&&&&&&//设置frame&&&&&&CGRect&&&&&&&frame.origin.x&=&self.collectionView.bounds.size.width&/&2&-&pageWidth&/&2&+&self.collectionView.contentOffset.x;&&&&&&frame.origin.y&=&(self.collectionViewContentSize.height&-&pageHeight)&/&2;&&&&&&frame.size.width&=&pageW&&&&&&frame.size.height&=&pageH&&&&&&layoutAttributes.frame&=&&&&&&&&&&&&&//设置ratio&&&&&&CGFloat&page&=&(indexPath.item&-&indexPath.item&%&2)&*&0.5;&//结果&0,0,1,1,2,2&...&&&&&&CGFloat&ratio&=&-&0.5&+&page&-&(self.collectionView.contentOffset.x&/&self.collectionView.bounds.size.width);&//通过偏移量,获取比重&&&&&&//限制比重&&&&&&if&(ratio&&&0.5)&{&&&&&&&&&&ratio&=&0.5&+&0.1&*&(ratio&-&0.5);&&&&&&}&else&if&(ratio&&&-0.5)&{&&&&&&&&&&ratio&=&-&0.5&+&0.1&*&(ratio&+&0.5);&&&&&&}&&&&&&&&&&&&&&&&&&//&&&&&&if&((ratio&&&0&&&&indexPath.item&%&2&==&1)&||&(ratio&&&0&&&&indexPath.item&%&2&==&0))&{&&&&&&&&&&if&(indexPath.row&!=&1)&{&&&&&&&&&&&&&&return&&&&&&&&&&&}&&&&&&}&&&&&&&&&&&&&&&&&&//计算旋转角度angle,设定3D旋转&&&&&&CGFloat&newRatio&=&MIN(MAX(ratio,&-1),&1);&&&&&&//计算m34&&&&&&CATransform3D&transform&=&CATransform3DI&&&&&&transform.m34&=&1.0&/&-&2000;&&&&&&&&&&&&CGFloat&angle&=&0.0f;&&&&&&if&(indexPath.item&%&2&==&0)&{&&&&&&&&&&//中心线在左边&&&&&&&&&&angle&=&(1&-&newRatio)&*&(-M_PI_2);&&&&&&}&else&if&(indexPath.item&%&2&==&1)&{&&&&&&&&&&//中心线在右边&&&&&&&&&&angle&=&(1&+&newRatio)&*&(M_PI_2);&&&&&&}&&&&&&angle&+=&(indexPath.row&%&2)&/&1000;&&&&&&&&&&&&transform&=&CATransform3DRotate(transform,&angle,&0,&1,&0);&&&&&&&&&&&&layoutAttributes.transform3D&=&&&&&&&if&(indexPath.row&==&0)&{&&&&&&&&&&layoutAttributes.zIndex&=&NSIntegerM&&&&&&}&&&&&&return&layoutA&&}&&&&&&//所有cell布局数组&&-&(NSArray&*)layoutAttributesForElementsInRect:(CGRect)rect&{&&&&&&NSMutableArray&*array&=&[NSMutableArray&array];&&&&&&for&(NSUInteger&i&=&0;&i&&&numberOfP&i++)&{&&&&&&&&&&NSIndexPath&*index&=&[NSIndexPath&indexPathForItem:i&inSection:0];&&&&&&&&&&UICollectionViewLayoutAttributes&*attributes&=&[self&layoutAttributesForItemAtIndexPath:index];&&&&&&&&&&if&(attributes&!=&nil)&{&&&&&&&&&&&&&&[array&addObject:attributes];&&&&&&&&&&}&&&&&&}&&&&&&return&&&}&&@end&&
当布局完成后,我们就大功告成了,在UICollectionView&中,实现代理和数据源就OK了
#import&"BookView.h"&&#import&"BookCell.h"&&#import&"BookLayout.h"&&@implementation&BookView&&{&&&&&&NSMutableArray&*_&&&&&&NSMutableArray&*_arrayS&&}&&&&static&NSString&*const&reuseIdentifier&=&@"cell";&&-&(instancetype)initWithFrame:(CGRect)frame&collectionViewLayout:(UICollectionViewLayout&*)layout&{&&&&&&self&=&[super&initWithFrame:frame&collectionViewLayout:layout];&&&&&&if&(self)&{&&&&&&&&&&self.backgroundColor&=&[UIColor&clearColor];&&&&&&&&&&self.dataSource&=&&&&&&&&&&&self.delegate&=&&&&&&&&&&[self&registerClass:[BookCell&class]&forCellWithReuseIdentifier:reuseIdentifier];&&&&&&&&&&self.showsHorizontalScrollIndicator&=&NO;&&&&&&&&&&&&&&&&&&&&_array&=&(NSMutableArray&*)@[@"",@"封面.jpg",@"白羊座1.jpg",@"金牛座2.jpg",@"双子座3.jpg",@"巨蟹座4.jpg",@"狮子座5.jpg",@"处女座6.jpg",@"天平座7.jpg",@"天蝎座8.jpg",@"射手座9.jpg",@"魔蝎座10.jpg",@"水瓶座11.jpg",@"双鱼座12.jpg",@"封底.jpg",@""];&&&&&&&&&&_arrayStr&=&(NSMutableArray&*)@[@"",@"",@"白羊座",@"金牛座",@"双子座",@"巨蟹座",@"狮子座",@"处女座",@"天平座",@"天蝎座",@"射手座",@"魔蝎座",@"水瓶座",@"双鱼座",@"",@""];&&&&&&}&&&&&&return&&&}&&&&&&-&(NSInteger)collectionView:(UICollectionView&*)collectionView&numberOfItemsInSection:(NSInteger)section&{&&&&&&return&16;&&}&&&&&&-&(UICollectionViewCell&*)collectionView:(UICollectionView&*)collectionView&cellForItemAtIndexPath:(NSIndexPath&*)indexPath&{&&&&&&BookCell&*cell&=&[collectionView&dequeueReusableCellWithReuseIdentifier:reuseIdentifier&forIndexPath:indexPath];&&&&&&cell.imageView.image&=&[UIImage&imageNamed:_array[indexPath.row]];&&&&&&cell.textLabel.text&=&[NSString&stringWithFormat:@"%@",&_arrayStr[indexPath.row]];&&&&&&cell.textLabel.font&=&[UIFont&systemFontOfSize:12];&&&&&&cell.textLabel.textColor&=&[UIColor&colorWithRed:148&/&255.0f&green:0.0f&blue:211&/&255.0f&alpha:1.0f];&&&&&&return&&&}&&@end&&
#import&"ViewController.h"&&#import&"BookView.h"&&#import&"BookLayout.h"&&#define&kScreenWidth&[UIScreen&mainScreen].bounds.size.width&&#define&kScreenHeight&[UIScreen&mainScreen].bounds.size.height&&&&@interface&ViewController&()&&&&@end&&&&@implementation&ViewController&&&&-&(void)viewDidLoad&{&&&&&&[super&viewDidLoad];&&&&&&&&&&&&&&&&&&BookLayout&*layout&=&[[BookLayout&alloc]&init];&&&&&&BookView&*book&=&[[BookView&alloc]&initWithFrame:CGRectMake(10,&100,&300,&500)&collectionViewLayout:layout];&&&&&&[self.view&addSubview:book];&&}&&&&@end&&
是不是感觉不可思议!
代码下载地址:
http://download.csdn.net/download/et22319
发表评论：
TA的最新馆藏