iOS開發實現拖動列表時，放大列表頂部的圖片

2019-12-04 18:51:59

在很多的APP中，我們可以看到一個列表頂部的圖片會隨著下拉會放大，上拉會被推至頂端消失的效果。這樣的效果沒能給定一個固有名詞，我們要實現這樣的效果可以使用第三方類庫，也可以自己寫程式碼實現。第三方使用的類庫不算是個人經驗，這裡就不介紹了。現在介紹使用程式碼實現這樣的效果，程式碼量很少，容易理解。當然實現效果是很好的。

1

建立工程專案和檢視控制器

1、建立工程專案，新建一個UIViewController；

2、選中工程，右鍵-New File…選擇「Cocoa Touch Class」-Next，給個合理的名稱ViewController，再Next完成；

3、在AppDelegate.m檔案包含#import "ViewController.h"；

4、初始化建立ViewController的檢視控制器，並用導航欄控制器包含。將之設定為根檢視控制器。

2

新增巨集定義

1.新增導覽列高度巨集定義NavigationBarHight，iOS6為44，iOS7以後為64，且要看自己的頁面有沒有導航欄，如若沒有可以去掉；

2.新增列表頂部圖片固定高度巨集定義ImageHight，高度根據切圖設定（這裡使用@2x的640*400圖片，設定ImageHight為200）。

3

建立所需列表UITableView及新增代理

1、在ViewController.h新增事件代理和資料來源代理<UITableViewDelegate,UITableViewDataSource>；

2、在ViewController.h建立UITableView；

3、在ViewController.m初始化self.tableView；

4、設定UITableView的contentInset屬性（重點）；

5、代理授權並新增至檢視。

4

建立列表頂部圖片

1、在ViewController.h建立UIImageView；

2、在ViewController.m初始化UIImageView；

3、設定UIImageView的contentMode屬性（重點）；

4、將UIImageView新增至列表self.tableView。

5

實現拖動列表時圖片放大的效果方法

1、在ViewController.m新增UIScrollView的代理scrollViewDidScroll方法；

2、在scrollViewDidScroll內獲取當前捲動坐標的y值；

3、當坐標y小於巨集定義圖片高度時就進行放大；

4、放大原理是改變UIImageView的y坐標和高度，同時由於設定了contentMode屬性，圖片高度改變會使得寬度跟著改變，達到放大效果。

6

附加：類似頭像和使用者名稱稱在背景圖上

1

程式碼地址：https://github.com/cjq002/Extended-Zoom.git

2

程式碼執行效果如圖

iOS開發 實現拖動列表時，放大列表頂部的圖片

1

2

3

4

5

6

1

2

熱門文章

iOS開發實現拖動列表時，放大列表頂部的圖片