圖像庫和動畫像Facebook

Question

我正在嘗試使用一些漂亮的動畫和轉換來製作圖像庫，這很像新的Facebook應用程序提供的。我一直在尋找教程，但似乎很難找到一些東西，或者我只是在尋找錯誤的東西。

我朝着使這個我自己，比提供此功能的庫更感興趣的步驟，因爲這將是一個很好的學習經驗，和庫不傾向於有足夠的定製靈活性。

我在特別感興趣的元素是：

• 示出與所有圖像的uicollectionview，裁剪爲正方形，中心和縮放（反走樣）很好。請注意，圖像不會擠在一起使其成方形。
• 無縫動畫到全屏視圖，從裁剪後的圖像轉換爲具有漂亮黑色背景的原始尺寸。動畫流暢並提供「反彈」效果。
• 能夠通過全屏圖像瀏覽，允許捏縮放和縮放圖像的平移，也很像照片應用程序。爲此，有幾個庫可用，但它們都爲您提供頂部和底部的標準條，這不符合我的設計;我希望全屏視圖更加乾淨和可定製。

這些元素的任何步驟，將不勝感激！

Answer 1

我自己在我的應用這個功能現在是一個天。我不能使用UICollectionView，因爲它僅在> = iOS6中可用。我手動創建了網格佈局，實際上它很容易實現。

在.h文件中把這個

{ 
    int thumbWidth; 
    int thumbHeight; 
    int photosInRow; 
    int xPos; 
    int yPos; 
    int padding; 
    int photosCount; 
} 

@property (strong, nonatomic) UIScrollView *photoScroll; 
@property(nonatomic, strong) NSArray *photosArray; 

在.m文件

thumbHeight = 73; // 2px is reduced for border 
thumbWidth = 73; // 2px is reduced for border 
photosInRow = 4; 
padding = 4; 
xPos = 0; 
yPos = 0; 

你可以根據你的需要改變上述值。然後用圖像和創建網格佈局動態像這樣的填充：

photoScroll = [[UIScrollView alloc] initWithFrame:CGRectMake(padding, padding, self.view.frame.size.width, self.view.frame.size.height)]; 
photoScroll.showsVerticalScrollIndicator = NO; 
photoScroll.showsHorizontalScrollIndicator = NO; 
[photoScroll setAutoresizingMask:UIViewAutoresizingFlexibleHeight]; 


photosCount = [photosArray count]; 
SDWebImageManager *manager = [SDWebImageManager sharedManager]; 

for (int counter = 0; counter < photosCount; counter++) { 
    // Set x, y positions 
    if (counter % photosInRow == 0 && counter !=0) { 
     yPos = yPos+thumbHeight+padding; 
     xPos = 0; 

    } else { 
     if (counter != 0) { 
      xPos = xPos+thumbWidth+padding; 
     } 
    } 

    UIButton *btnImage = [UIButton buttonWithType:UIButtonTypeCustom]; 
    [[btnImage layer] setBorderWidth:1.0f]; 
    [[btnImage layer] setBorderColor:[UIColor whiteColor].CGColor]; 

    DBPhotos *photo = (DBPhotos *)[photosArray objectAtIndex:counter]; 

    NSURL *url = [NSURL URLWithString: photo.thumb]; 
    [manager downloadWithURL:url delegate:self options:0 
        success:^(UIImage *image){ 
         [btnImage setBackgroundImage:image forState:UIControlStateNormal]; 
        } 
        failure:^(NSError *error) { 
         NSLog(@"Error Download image %@", [error localizedDescription]); 
        }]; 
    [btnImage setFrame:CGRectMake(xPos, yPos, thumbWidth, thumbHeight)]; 
    [btnImage setTag:counter]; 
    [btnImage addTarget:self action:@selector(showFullImage:) forControlEvents:UIControlEventTouchUpInside]; 
    [photoScroll addSubview:btnImage]; 
} 

[photoScroll setContentSize:CGSizeMake(self.view.frame.size.width, (ceil(photosCount/photosInRow)*(thumbHeight+padding))+thumbHeight+64)]; 
[self.view addSubview:photoScroll]; 

你會看到，我使用的UIButton代替UIImage，這是目的，這樣如果用戶點擊圖片，我可以添加get和事件處理程序以顯示全屏圖像，在此行：

[btnImage addTarget:self action:@selector(showFullImage:) forControlEvents:UIControlEventTouchUpInside]; 

此代碼將使這樣的佈局。

你的問題現在第二部分。如何顯示全屏圖像，縮放功能和向左/向右滑動以顯示下一個以前的圖像。 這實際上很容易實現。我使用第三方庫MWPhotoBrowser

只需下載它，它很容易使照片庫像UI。這裏是我在做showFullImage函數。

- (void)showFullImage:(UIButton*)sender{ 
    [self.browser setInitialPageIndex:sender.tag]; 
    UINavigationController *nc = [[UINavigationController alloc] initWithRootViewController:self.browser]; 
    nc.modalTransitionStyle = UIModalTransitionStyleCrossDissolve; 
    [self presentViewController:nc animated:YES completion:nil]; 
} 

- (NSUInteger)numberOfPhotosInPhotoBrowser:(MWPhotoBrowser *)photoBrowser { 
    return self.photosArray.count; 
} 

- (MWPhoto *)photoBrowser:(MWPhotoBrowser *)photoBrowser photoAtIndex:(NSUInteger)index { 
    if (index < self.photosArray.count) { 
     DBPhotos *photo = (DBPhotos *) [self.photosArray objectAtIndex:index]; 
     return [MWPhoto photoWithURL:[NSURL URLWithString:photo.image]]; 
    } 
    return nil; 
} 

攻第三圖像會顯示在全屏幕，左/右箭頭或刷卡左/右功能。此外還有縮放縮放和平移縮放照片。

希望這可以幫助你。