學習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.耦合度高,需在創建相冊時提前寫好圖片的張數

再附上一張效果圖:

由于學習時間較短,還不能寫出太好的代碼,還請各位多多幫助!