上一个和下一个图像可见的图像滑块

image slider with previous and next image visible

我有的是图像列表。我在启用分页的滚动视图中显示这些图像。

现在客户回来要求显示下一张(部分可见)、当前(完全可见)和上一张(部分可见)图像,如下图所示。


(来源:mzstatic.com

我试过的如下。

int mm = 150;
for (int i=0;i<featuredProductArray.count;i++) {
    UIButton *mButton = [UIButton buttonWithType:UIButtonTypeCustom];
    [mButton addTarget:self action:@selector(takeMeToProductDetails:) forControlEvents:UIControlEventTouchUpInside];
    mButton.imageView.contentMode = UIViewContentModeScaleAspectFill;
    [mButton sd_setImageWithURL:[NSURL URLWithString:[[[featuredProductArray objectAtIndex:i] valueForKey:@"Image"] stringByReplacingOccurrencesOfString:@"/Original/" withString:@"/1080/"] ] forState:UIControlStateNormal placeholderImage:[UIImage imageNamed:@"slider_bg.png"]];
    [mButton setAdjustsImageWhenHighlighted:NO];
    mButton.accessibilityValue = [NSString stringWithFormat:@"feat%d", i];
    mButton.frame = CGRectMake(mm*iPhoneFactorX, 0, 780*iPhoneFactorX, iPhoneHeight-(20+(149*iPhoneFactorX)));
    mm = mm + 780+50;
    [yScrollView addSubview:mButton];
}

现在我遇到了分页问题。当我滚动时,第二张图片没有居中...

要制作 pagingEnabled,您必须确保页面连续且大小相同。有必要增加子视图的大小以包括按钮之间距离的一半(可能通过为按钮创建包含超级视图)。

首先禁用IB的滚动

现在使用 for 循环将图像彼此相邻添加

设置滚动视图内容大小

创建变量 int myPostForSwipe 并初始化为 0

现在添加滑动手势,很重要

UISwipeGestureRecognizer *sswipe = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(didSwipeScreen:)];
sswipe.direction = UISwipeGestureRecognizerDirectionLeft;
sswipe.delegate = self;
[yScrollView addGestureRecognizer:sswipe];

sswipe = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(didSwipeScreen:)];
sswipe.direction = UISwipeGestureRecognizerDirectionRight;
sswipe.delegate = self;
[yScrollView addGestureRecognizer:sswipe];

实现 didSwipeScreen

- (void)didSwipeScreen:(UISwipeGestureRecognizer *)gesture
{
    NSLog(@"didSwipeScreen");
    switch (gesture.direction) {
            NSLog(@"gesture.direction");
        case UISwipeGestureRecognizerDirectionUp:
            // you can include this case too
            NSLog(@"UISwipeGestureRecognizerDirectionUp");
            break;
        case UISwipeGestureRecognizerDirectionDown:
            // you can include this case too
            NSLog(@"UISwipeGestureRecognizerDirectionDown");
            break;
        case UISwipeGestureRecognizerDirectionLeft:

            if (myPostForSwipe<(featuredProductArray.count-1)) {
                myPostForSwipe = myPostForSwipe + 1;
                float myX1 = (myPostForSwipe*830*iPhoneFactorX);
                NSLog(@"UISwipeGestureRecognizerDirectionLeft==%f===%d", myX1, myPostForSwipe);
                [yScrollView setContentOffset:CGPointMake(myX1, 0) animated:YES];
            }
            break;
        case UISwipeGestureRecognizerDirectionRight:
            if (myPostForSwipe>=1) {
                myPostForSwipe = myPostForSwipe - 1;
                NSLog(@"UISwipeGestureRecognizerDirectionRight==%d", myPostForSwipe);
                float myX2 = (myPostForSwipe*830*iPhoneFactorX);
                [yScrollView setContentOffset:CGPointMake(myX2, 0) animated:YES];
            }
            break;
        default:
            break;
    }
}

就是这样


另一个解决方案

另一种方案越来越简单...

  1. 创建中间图片大小的UIScrollView

  2. 取消勾选剪辑子视图并勾选启用分页(这很重要)

  3. 现在用图像填充滚动视图。

大功告成!!!

这一点对我不起作用,因为我有侧边菜单,所有滚动视图都在侧边菜单上展开。

如果有人有任何问题,请告诉我。