学习UI已经一周左右,制作了一个简易相册!效果图如下:

效果图

该工程在MRC模式下创建,需注意dealloc及release,这段代码并没有按照写好后的顺序出现,而是按照问题出现及思考的顺序书写,阅读时需要注意

代码部分:

MyHeader.h:

由于需要大量使用屏幕的宽与高,所以先在MyHeader.h中声明两个宏定义

宏定义

AppDelegate:

初始化window,设置视图控制器及添加导航栏!此处就不一一赘述!

注意:

这段代码将导航栏的透明度设置为不透明,在接下来的书写中需要注意要预留出导航栏的高度!

ViewController:

设置导航栏标题,导航栏颜色及风格:

初始化首页的滚动视图,以此实现首页上下滑动(以下代码书写在loadView中):

由于预留导航栏的高度,所以需要在设置滚动视图的高度时减去64,首页显示方式为3行2列,所以设置滚动视图容量时只需将图片大小乘三就足够了!

添加图片:

共有6张图,用for循环6次,由于偏移量的改变,所以需要进行if判断,图片用1-6命名,可以充分利用i,名为奇数的放在左边,偶数的放在右边!

用tag值对图片进行标记,图片的用户交互默认为关闭,需要手动开启,否则为图片添加手势会无效

将轻拍手势添加给图片,在下面需要写一个didTaoImageView的手势实现页面跳转

在顶部引入头文件,pushViewController方法实现跳转,animated后写YES代表开启动画

点击图片,实现跳转,效果如下:

卡顿

问题1:卡顿

跳转过程中会出现卡顿现象,此时需要在新界面的文件中将self.view给一个背景色!

修改后效果如下图:

无导航栏标题

问题2:导航栏标题

我们需要根据选择的照片来判断是第几张图片,所以跳转后页面的导航栏标题不能写死,要能根据选择的图片进行初始化,这里用到了属性传值: 

首先,需要在DetailViewController.h中声明一个整型变量,这里命名为num,然后在ViewController.m中进行属性传值

6张图片的tag值分别为1001-1006,减掉1000就得到了对应第几张,将number的值赋给num

DetailViewController.m:

在viewDidLoad中设置偏移量(确保页面跳转后显示在前一页点击的图片)及导航栏的标题

在延展里声明一个属性scrollView,类型为:UIScrollView 此处也需要用到屏幕的宽与高,所以也需进行宏定义,此时使用到了前一页传过来的num

导航栏标题

这里依然会用到一个大的滚动视图,在延展里将滚动视图写成属性,注意要将导航栏的64减掉,并且需要整页翻动

添加图片:

添加后效果如下:

标题不可变

问题3:标题不随翻页改变:

翻页后标题不会实时改变,此时需在DetailViewController.h中签订<UIScrollViewDelegate>协议.在DetailViewController.m中设置代理人:

协议中有一个方法,结束减速,也就表示滑动结束:

在方法中修改标题,需用到x方向的偏移量,除以屏幕的宽就是翻了几张,由于第一张没翻页,第二张翻了一页,第三张翻了两页,以此类推,需要在计算结果后加一,就能表示当前图片为第几张.这样简易相册就完成了!

缺点:

1.功能少,只能实现简单的翻页和页面跳转!

2.开销大,在循环中创建UIImageView,每走一次循环,便都需完成创建与释放的过程,图片多就需要创建相对应数量的UIImageView,在电脑上内存还够用,但6张图片就已接近80M,在手机上无法使用

3.耦合度高,需在创建相册时提前写好图片的张数

再附上一张效果图:

由于学习时间较短,还不能写出太好的代码,还请各位多多帮助!