iOS開發相簿功能的實現即滾動檢視的實現(UI階段) --CoverFlow

現如今的生活中手機相簿,微信朋友圈等滾動檢視無處不在,
此外還有很多關於滾動檢視的APP也天天出現在我們的生活中,今天就來簡單介紹一下滾動檢視的方法和實現,即相簿的功能實現.

首先建立相簿工程:

C1E10722-0302-4AEC-98DD-F4FA963B69E2.png

在AppDelegate.m中初始化Window並設定檢視控制器:

初始化Window:
self.window = [[UIWindow
 
 alloc] initWithFrame:[UIScreen  mainScreen].bounds];
self.window.backgroundColor = [UIColor whiteColor];
[self.window makeKeyAndVisible];
設定根檢視控制器:
ViewController *vc = [[ViewController alloc] init];
UINavigationController *nav = [[UINavigationController alloc]initWithRootViewController:vc];
self.window
 
.rootViewController = nav;
設定透明度:
nav.navigationBar.translucent = NO;
釋放:
[vc release];
[nav release];
[_window release];

建立滾動檢視的詳情介面:

5E3996B4-5E71-4AAD-9CCD-5227E951EA15.png

基礎工作做完在ViewController.m中新增圖片資訊:

因為圖片的寬和高用到很多,所以在檔案中巨集定義圖片的寬和高,以簡化我們的程式碼量:

  #define
 
 ScreenWidte [UIScreen  mainScreen].bounds.size.width
  #define ScreenHeight [UIScreen mainScreen].bounds.size.height

引入滾動檢視詳情介面標頭檔案並定義滾動檢視的屬性:

9FE4047C-0D28-449F-A934-38E788E9BBC0.png

釋放:
@implementation ViewController

  - (void)dealloc
{
[_scrollView release];
[super dealloc];
}

定義相簿的一些基本屬性(顏色,titie等)

  - (void)viewDidLoad {
[super viewDidLoad];

 self.navigationItem.title = @"相簿";
self.navigationController.navigationBar.barTintColor = [UIColor blackColor];

self.navigationController.navigationBar.barStyle = UIBarStyleBlack;
}

將已有的圖片素材拖入工程中,在loadview中定義圖片的大小並迴圈加入圖片:

A1555ABE-1DB9-4C93-8BF0-1B26C02663CC.png

在loadview中初始化圖片:

- (void)loadView
{
[super loadView];
self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, ScreenWidte, ScreenHeight - 64)];
self.scrollView.contentSize = CGSizeMake(ScreenWidte, 330 * 3);
[self.view addSubview:_scrollView];
[_scrollView release];

緊接著在loadview中迴圈新增圖片:

  //設定圖片:(以下為豎屏模式下的滾動相簿)
for (NSInteger i = 1; i <= 6; i++) {                
    UIImageView *imageView = [[UIImageView alloc] init];
    if (i % 2 != 0) {
        imageView.frame = CGRectMake(0,330 * (i / 2) , ScreenWidte / 2.0, 330);
                                                #以6張圖片為例,豎屏滾動
    }
    else
    {
        imageView.frame = CGRectMake(ScreenWidte / 2.0, 330 * ((i - 1) / 2), ScreenWidte / 2.0, 330);
    }
    imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%ld.JPG", i]];
    //新增tag值(以便後面找到點選的圖片):
    imageView.tag = 1000 + i;

    //開啟使用者互動:
    imageView.userInteractionEnabled = YES;

    //新增輕拍手勢:
    UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(didTapImageView:)];

   //新增檢視並釋放:
    [imageView addGestureRecognizer:tapGesture];
    [tapGesture release];
    [self.scrollView addSubview:imageView];
    [imageView release];


}
}      #與上一步的load view的{對應

利用滾動檢視的方法獲取到輕拍圖片並利用協議傳值完成介面之間的跳轉:

 - (void)didTapImageView:(UITapGestureRecognizer *)tap
{
//獲取到輕拍的圖片:
NSInteger number = tap.view.tag - 1000;
NSLog(@"%ld", number);

//跳轉介面:
DetailViewController *dVC = [[DetailViewController alloc] init];
dVC.num = number;
[self.navigationController pushViewController:dVC animated:YES];
//[dVC release];
}

以上都是一些介面實現的基本步驟,最重要的就是在詳情介面中新增滾動檢視的一些方法(利用偏移量來進行判斷滾到第幾張)

同樣巨集定義圖片的寬和高,並簽訂滾動檢視協議

B2A33805-6D70-4DC6-9AC8-252EA66C887B.png

自動釋放:
-(void)dealloc
{
[_scrollView release];
[super dealloc];
}

在DetailViewController.h中設定滾動檢視偏移量的屬性(即現在是第幾張圖片):

#import <UIKit/UIKit.h>

@interface DetailViewController : UIViewController
@property(nonatomic, assign)NSInteger num;
@end

在viewDidLoad中利用偏移量的改變完成滾動檢視的實現:

- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];

設定滾動檢視偏移量:

self.scrollView.contentOffset = CGPointMake(ScreenWidte * (self.num - 1), 0);

顯示當前第幾張:

NSString *title = [NSString stringWithFormat:@"第%ld張",self.num];
[self.navigationItem setTitle:title];          (顯示title便於觀察變化)

為了雙擊圖片放大返回時卡頓在第二介面設定一個按鈕用來返回原介面:

self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"[email protected]"] style:UIBarButtonItemStylePlain target:self action:@selector(didClickGoBackButton:)];
}  #對應上面DidLoad的{

按鈕的點選方法:

- (void)didClickGoBackButton:(UIBarButtonItem *)button
 {
[self.navigationController popViewControllerAnimated:YES];
 }

在load view中初始化檢視座標,並利用迴圈建立每一個檢視的座標(這一步比較麻煩,要仔細理解)

-(void)loadView
{
[super loadView];
   //初始化座標
self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, ScreenWidte, ScreenHeight - 64)];
self.scrollView.contentSize = CGSizeMake(ScreenWidte * 6, ScreenHeight - 64);

//設定代理人(用於協議傳值):
self.scrollView.delegate = self;

 //  設定整頁翻動
self.scrollView.pagingEnabled = YES;

//新增滾動檢視
[self.view addSubview:_scrollView];
[_scrollView release];

//迴圈建立座標:
for (NSInteger i = 1; i <=6; i++) {
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(ScreenWidte * (i - 1), 0, ScreenWidte, ScreenHeight - 64)];
    imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%ld.JPG", i]];
    [self.scrollView addSubview:imageView];
    [imageView release];
}

}

滾動檢視實現方法:

-(void)scrollViewDidEndDecelerating:(UIScrollView 
*)scrollView
 {
//取偏移量:
NSInteger pageNumber = (long)(scrollView.contentOffset.x / ScreenWidte);
self.navigationItem.title = [NSString stringWithFormat:@"第%ld張", pageNumber + 1];
}

執行就能得到相簿的效果:

84AC391F-AB38-47DA-8A6C-AA75E4276C00.png

滑動圖片:

211A1333-7C71-45DB-8A63-D45D032413CB.png

雙擊放大其中一個圖片:

13ABB910-AC7B-402B-9FAF-DD81CFCB11A1.png

點選左側加號按鈕返回到相簿介面:

CAEC51DF-BE8A-4A90-93D4-7BD07EA97929.png
BAD67B03-A2E4-43F2-BFC4-2559D323D479.png

滾動檢視的功能以後學習生活中會用到很多,加油吧,少年!!!

原文連結：http://blog.csdn.net/huangyongf/article/details/52197677