學習UI已經(jīng)一周左右,制作了一個簡易相冊!效果圖如下:

效果圖

該工程在MRC模式下創(chuàng)建,需注意dealloc及release,這段代碼并沒有按照寫好后的順序出現(xiàn),而是按照問題出現(xiàn)及思考的順序書寫,閱讀時需要注意

代碼部分:

MyHeader.h:

由于需要大量使用屏幕的寬與高,所以先在MyHeader.h中聲明兩個宏定義

宏定義

AppDelegate:

初始化window,設(shè)置視圖控制器及添加導(dǎo)航欄!此處就不一一贅述!

注意:

這段代碼將導(dǎo)航欄的透明度設(shè)置為不透明,在接下來的書寫中需要注意要預(yù)留出導(dǎo)航欄的高度!

ViewController:

設(shè)置導(dǎo)航欄標題,導(dǎo)航欄顏色及風格:

初始化首頁的滾動視圖,以此實現(xiàn)首頁上下滑動(以下代碼書寫在loadView中):

由于預(yù)留導(dǎo)航欄的高度,所以需要在設(shè)置滾動視圖的高度時減去64,首頁顯示方式為3行2列,所以設(shè)置滾動視圖容量時只需將圖片大小乘三就足夠了!

添加圖片:

共有6張圖,用for循環(huán)6次,由于偏移量的改變,所以需要進行if判斷,圖片用1-6命名,可以充分利用i,名為奇數(shù)的放在左邊,偶數(shù)的放在右邊!

用tag值對圖片進行標記,圖片的用戶交互默認為關(guān)閉,需要手動開啟,否則為圖片添加手勢會無效

將輕拍手勢添加給圖片,在下面需要寫一個didTaoImageView的手勢實現(xiàn)頁面跳轉(zhuǎn)

在頂部引入頭文件,pushViewController方法實現(xiàn)跳轉(zhuǎn),animated后寫YES代表開啟動畫

點擊圖片,實現(xiàn)跳轉(zhuǎn),效果如下:

卡頓

問題1:卡頓

跳轉(zhuǎn)過程中會出現(xiàn)卡頓現(xiàn)象,此時需要在新界面的文件中將self.view給一個背景色!

修改后效果如下圖:

無導(dǎo)航欄標題

問題2:導(dǎo)航欄標題

我們需要根據(jù)選擇的照片來判斷是第幾張圖片,所以跳轉(zhuǎn)后頁面的導(dǎo)航欄標題不能寫死,要能根據(jù)選擇的圖片進行初始化,這里用到了屬性傳值:?

首先,需要在DetailViewController.h中聲明一個整型變量,這里命名為num,然后在ViewController.m中進行屬性傳值

6張圖片的tag值分別為1001-1006,減掉1000就得到了對應(yīng)第幾張,將number的值賦給num

DetailViewController.m:

在viewDidLoad中設(shè)置偏移量(確保頁面跳轉(zhuǎn)后顯示在前一頁點擊的圖片)及導(dǎo)航欄的標題

在延展里聲明一個屬性scrollView,類型為:UIScrollView 此處也需要用到屏幕的寬與高,所以也需進行宏定義,此時使用到了前一頁傳過來的num

導(dǎo)航欄標題

這里依然會用到一個大的滾動視圖,在延展里將滾動視圖寫成屬性,注意要將導(dǎo)航欄的64減掉,并且需要整頁翻動

添加圖片:

添加后效果如下:

標題不可變

問題3:標題不隨翻頁改變:

翻頁后標題不會實時改變,此時需在DetailViewController.h中簽訂<UIScrollViewDelegate>協(xié)議.在DetailViewController.m中設(shè)置代理人:

協(xié)議中有一個方法,結(jié)束減速,也就表示滑動結(jié)束:

在方法中修改標題,需用到x方向的偏移量,除以屏幕的寬就是翻了幾張,由于第一張沒翻頁,第二張翻了一頁,第三張翻了兩頁,以此類推,需要在計算結(jié)果后加一,就能表示當前圖片為第幾張.這樣簡易相冊就完成了!

缺點:

1.功能少,只能實現(xiàn)簡單的翻頁和頁面跳轉(zhuǎn)!

2.開銷大,在循環(huán)中創(chuàng)建UIImageView,每走一次循環(huán),便都需完成創(chuàng)建與釋放的過程,圖片多就需要創(chuàng)建相對應(yīng)數(shù)量的UIImageView,在電腦上內(nèi)存還夠用,但6張圖片就已接近80M,在手機上無法使用

3.耦合度高,需在創(chuàng)建相冊時提前寫好圖片的張數(shù)

再附上一張效果圖:

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