Итак, я хочу создать скользящую галерею просмотра изображений с предварительным просмотром следующих и предыдущих изображений.Я хочу, чтобы он частично показывал следующее изображение (если доступно) и предыдущее изображение (если оно было).Что я имею в виду именно?Предполагая, что есть 3 изображения на всех.
самого 1-го изображения.Поэтому я хочу, чтобы 1-е изображение отображалось в центре (по горизонтали), а также часть следующего изображения, чтобы пользователь мог видеть, что осталось хотя бы 1 изображение.Схематично: [&&&] [
2-е изображение.Я хочу показать часть 1-го изображения (слева) и 2-го изображения (в центре) и часть 3-го изображения (справа).Таким образом, любой пользователь может легко определить, что позади него есть по крайней мере 1 изображение и осталось по крайней мере 1 изображение.Схематично: ] [###] [
- 3-е и последнее изображение.Есть часть 2-го изображения (слева) и 3-го изображения в центре.Таким образом, нет никаких сомнений в том, что не осталось ни одного изображения и хотя бы одно изображение осталось позади.Схематично:
] [@@@].
Так как правильно реализовать эту идею?
Я сделал это так:
// ItemGalleryVC.h
#import <UIKit/UIKit.h>
@interface ItemGalleryVC : UIViewController <UIScrollViewDelegate>{
IBOutlet UIScrollView *scrollView;
IBOutlet UIPageControl *pageControl;
BOOL pageControlIsChangingPage;
}
@property (nonatomic, retain) IBOutlet UIScrollView *scrollView;
@property (nonatomic, retain) IBOutlet UIPageControl *pageControl;
- (IBAction)changePage:(id)sender;
- (void)setupPage;
@end
и
// ItemGalleryVC.m
#import "ItemGalleryVC.h"
@implementation ItemGalleryVC
@synthesize scrollView;
@synthesize pageControl;
- (void)viewDidLoad
{
[self setupPage];
[super viewDidLoad];
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
}
- (void)viewDidUnload
{
[scrollView release];
[pageControl release];
}
- (void)dealloc
{
[super dealloc];
}
- (void)setupPage
{
NSLog(@"setupPage");
scrollView.delegate = self;
[scrollView setCanCancelContentTouches:NO];
scrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;
scrollView.clipsToBounds = YES;
scrollView.scrollEnabled = YES;
scrollView.pagingEnabled = YES;
NSUInteger nimages = 0;
CGFloat cx = 0; //the total scroll width
CGRect rect = scrollView.frame; //image frame
rect.size.height = scrollView.frame.size.height;
rect.size.width = scrollView.frame.size.width - 100; //50px at left and right sides
rect.origin.y = scrollView.frame.origin.y+5; //down by 5 px
for (; ; nimages++) {
NSString *imageName = [NSString stringWithFormat:@"item_image0%d.jpg", (nimages + 1)];
UIImage *image = [UIImage imageNamed:imageName];
if (image == nil) {
NSLog(@"no more imagez");
break;
}
NSLog(@"setting up img: %@",imageName);
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
rect.origin.x = cx+50; //move right by 50px
imageView.frame = rect;
imageView.contentMode = UIViewContentModeScaleAspectFit;
imageView.backgroundColor = [UIColor blackColor];
[scrollView addSubview:imageView];
[imageView release];
cx += rect.size.width+30;
}
self.pageControl.numberOfPages = nimages;
// for the last image to be centered frame need to be wider by 100px
[scrollView setContentSize:CGSizeMake(cx+100, [scrollView bounds].size.height)];
}
- (void)scrollViewDidScroll:(UIScrollView *)_scrollView
{
if (pageControlIsChangingPage) {
return;
}
// calc page number according to its frame size
CGFloat pageWidth = _scrollView.frame.size.width;
int page = floor((_scrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
pageControl.currentPage = page;
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)_scrollView
{
pageControlIsChangingPage = NO;
// this code added to correct image position (frame width) when using touch sliding
CGRect frame = scrollView.frame;
frame.origin.x = (frame.size.width-70) * pageControl.currentPage;
frame.origin.y = 0;
[scrollView scrollRectToVisible:frame animated:YES];
}
- (IBAction)changePage:(id)sender
{
/*
* Change the scroll view
*/
CGRect frame = scrollView.frame;
frame.origin.x = (frame.size.width-70) * pageControl.currentPage;
frame.origin.y = 0;
[scrollView scrollRectToVisible:frame animated:YES];
pageControlIsChangingPage = NO;
}
@end
Проблема в размере кадра (его ширина).Его размер ScrollView.frame, но мне нужно меньше (менее широкий).С этим кодом Если я использую управление страницами только для переключения изображений, все работает нормально, и анимация выглядит правильно.Но если я использую скольжение, это совсем плохо.Приведенный выше код содержит исправление (в scrollViewDidEndDecelerating), но оно все еще работает не во время скольжения и работает хорошо для 3 изображений.Он скользит в неправильное положение и затем немного отодвигается.Если слайдер содержит более 3 изображений, слайд не будет скользить к последнему изображению.
Мне любопытно, есть ли другой и правильный способ сделать это.