具有水平分页的UIScrollView不是子视图的中心

时间:2016-07-08 06:34:47

标签: ios objective-c uiscrollview ios-autolayout scroll-paging

我正在尝试使用启用了分页的UIScrollView。我将各种UIView添加到UISCrollView作为子视图。我希望那些子视图小于滚动视图的大小,所以我相应地修改了我的约束。现在,当我实际上向左/向右滑动它们时,不要碰巧在中心。我期待它显示上一页/下一页的视图从侧面偷看,当前页面位于中心。

这就是它的样子 enter image description here

下面是我的代码scrollview实现

    //
    //  ViewController.m
    //  Paging
    //

#import "ViewController.h"

@interface ViewController ()
@property (nonatomic, strong) UIScrollView *pagingScrollView;
@end

@implementation ViewController
- (UIScrollView *)pagingScrollView {
    if (!_pagingScrollView) {
        _pagingScrollView = [[UIScrollView alloc] initWithFrame:CGRectZero];
        _pagingScrollView.translatesAutoresizingMaskIntoConstraints = NO;
        _pagingScrollView.backgroundColor = [UIColor orangeColor];
        _pagingScrollView.showsHorizontalScrollIndicator = NO;
        _pagingScrollView.showsVerticalScrollIndicator = NO;
        _pagingScrollView.contentInset = UIEdgeInsetsZero;
        _pagingScrollView.pagingEnabled = YES;
        _pagingScrollView.clipsToBounds = NO;
        _pagingScrollView.bounces = NO;
    }
    return _pagingScrollView;
}
- (void)viewDidLoad {
    [super viewDidLoad];
    [self scrollViewSetUp];

    NSDictionary *views = NSDictionaryOfVariableBindings(_pagingScrollView);

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[_pagingScrollView]|"
                                                                      options:0
                                                                      metrics:nil
                                                                        views:views]];

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[_pagingScrollView]|"
                                                                      options:0
                                                                      metrics:nil
                                                                        views:views]];
}

- (void)scrollViewSetUp {

    [self.view addSubview:self.pagingScrollView];

    UIView *lastView = nil;
    NSInteger arrayCount = 5;

    for(NSInteger index = 0; index < arrayCount; index++)
    {
        UIView *view = [[UIView alloc] initWithFrame:CGRectZero];
        view.translatesAutoresizingMaskIntoConstraints = NO;
        view.backgroundColor = [UIColor yellowColor];

        [self.pagingScrollView addSubview:view];

        [self.pagingScrollView addConstraint:[NSLayoutConstraint constraintWithItem:view
                                                                        attribute:NSLayoutAttributeTop
                                                                        relatedBy:NSLayoutRelationEqual
                                                                           toItem:self.pagingScrollView
                                                                        attribute:NSLayoutAttributeTop
                                                                       multiplier:1
                                                                         constant:40]];

        [self.pagingScrollView addConstraint:[NSLayoutConstraint constraintWithItem:view
                                                                        attribute:NSLayoutAttributeHeight
                                                                        relatedBy:NSLayoutRelationEqual
                                                                           toItem:self.pagingScrollView
                                                                        attribute:NSLayoutAttributeHeight
                                                                       multiplier:0.80
                                                                         constant:0]];

        [self.pagingScrollView addConstraint:[NSLayoutConstraint constraintWithItem:view
                                                                        attribute:NSLayoutAttributeWidth
                                                                        relatedBy:NSLayoutRelationEqual
                                                                           toItem:self.pagingScrollView
                                                                        attribute:NSLayoutAttributeWidth
                                                                       multiplier:0.80
                                                                         constant:0]];

        if (lastView == nil && index == 0){
            [self.pagingScrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view(==_pagingScrollView)]"
                                                                                        options:0
                                                                                        metrics:nil
                                                                                          views:@{@"view":view, @"_pagingScrollView":_pagingScrollView}]];
        } else {
            [self.pagingScrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[lastView]-20-[view]"
                                                                                        options:0
                                                                                        metrics:nil
                                                                                          views:@{@"lastView":lastView, @"view":view, @"_pagingScrollView":_pagingScrollView}]];
        }

        if(index == arrayCount-1) {
            [self.pagingScrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[view]-20-|"
                                                                                        options:0
                                                                                        metrics:nil
                                                                                          views:@{@"view":view}]];
        }

        lastView = view;
    }
}
@end

任何指针/评论/反馈都非常感谢。感谢。

2 个答案:

答案 0 :(得分:1)

这是你想要的吗? enter image description here

//
//  ViewController.h
//  Test
//
//  Created by Lee on 7/8/16.
//  Copyright © 2016 Lee. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property (nonatomic, strong) UIScrollView *pagingScrollView;

@end



//
//  ViewController.m
//  Test
//
//  Created by Lee on 7/8/16.
//  Copyright © 2016 Lee. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()<UIScrollViewDelegate>
@property (nonatomic,strong)NSMutableArray *subviewsCenterArray;

@end

@implementation ViewController

- (UIScrollView *)pagingScrollView {
    if (!_pagingScrollView) {
        _pagingScrollView = [[UIScrollView alloc] initWithFrame:CGRectZero];
        _pagingScrollView.translatesAutoresizingMaskIntoConstraints = NO;
        _pagingScrollView.backgroundColor = [UIColor orangeColor];
        _pagingScrollView.showsHorizontalScrollIndicator = NO;
        _pagingScrollView.showsVerticalScrollIndicator = NO;
        _pagingScrollView.contentInset = UIEdgeInsetsZero;
        _pagingScrollView.pagingEnabled = NO;
        _pagingScrollView.clipsToBounds = NO;
        _pagingScrollView.bounces = NO;
        _pagingScrollView.delegate = self;
    }
    return _pagingScrollView;
}
- (void)viewDidLoad {
    [super viewDidLoad];
    [self scrollViewSetUp];

    NSDictionary *views = NSDictionaryOfVariableBindings(_pagingScrollView);

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[_pagingScrollView]|"
                                                                      options:0
                                                                      metrics:nil
                                                                        views:views]];

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[_pagingScrollView]|"
                                                                      options:0
                                                                      metrics:nil
                                                                        views:views]];
}

- (void)scrollViewSetUp {

    [self.view addSubview:self.pagingScrollView];

    UIView *lastView = nil;
    NSInteger arrayCount = 5;
    _subviewsCenterArray = [NSMutableArray array];
    for(NSInteger index = 0; index < arrayCount; index++)
    {
        UIView *view = [[UIView alloc] initWithFrame:CGRectZero];
        view.translatesAutoresizingMaskIntoConstraints = NO;
        view.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1];
        view.tag = 9999;
        view.layer.cornerRadius = 6;
        [self.pagingScrollView addSubview:view];

        [self.pagingScrollView addConstraint:[NSLayoutConstraint constraintWithItem:view
                                                                          attribute:NSLayoutAttributeTop
                                                                          relatedBy:NSLayoutRelationEqual
                                                                             toItem:self.pagingScrollView
                                                                          attribute:NSLayoutAttributeTop
                                                                         multiplier:1
                                                                           constant:40]];

        [self.pagingScrollView addConstraint:[NSLayoutConstraint constraintWithItem:view
                                                                          attribute:NSLayoutAttributeHeight
                                                                          relatedBy:NSLayoutRelationEqual
                                                                             toItem:self.pagingScrollView
                                                                          attribute:NSLayoutAttributeHeight
                                                                         multiplier:0.80
                                                                           constant:0]];

        [self.pagingScrollView addConstraint:[NSLayoutConstraint constraintWithItem:view
                                                                          attribute:NSLayoutAttributeWidth
                                                                          relatedBy:NSLayoutRelationEqual
                                                                             toItem:self.pagingScrollView
                                                                          attribute:NSLayoutAttributeWidth
                                                                         multiplier:0.80
                                                                           constant:0]];

        if (lastView == nil && index == 0){
            [self.pagingScrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view(==_pagingScrollView)]"
                                                                                          options:0
                                                                                          metrics:nil
                                                                                            views:@{@"view":view, @"_pagingScrollView":_pagingScrollView}]];
        } else {
            [self.pagingScrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[lastView]-20-[view]"
                                                                                          options:0
                                                                                          metrics:nil
                                                                                            views:@{@"lastView":lastView, @"view":view, @"_pagingScrollView":_pagingScrollView}]];
        }

        if(index == arrayCount-1) {
            [self.pagingScrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[view]-20-|"
                                                                                          options:0
                                                                                          metrics:nil
                                                                                            views:@{@"view":view}]];
        }

        [self.view layoutIfNeeded];




        lastView = view;
    }
}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{

    [self changeTheCardStatus:scrollView];

}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    [self changeTheCardStatus:scrollView];

}


-(void)changeTheCardStatus:(UIScrollView *)scrollView{

    for (UIView *view in scrollView.subviews) {
        if (view.tag == 9999) {
            [_subviewsCenterArray addObject:@(view.center.x)];
        }

    }



    CGFloat currentCenterOffsetX = scrollView.contentOffset.x + CGRectGetWidth(self.view.frame)/2.0;

    NSMutableArray *absoluteValueArray = [NSMutableArray array];
    NSMutableDictionary *absoluteValueDictionary = [NSMutableDictionary dictionary];
    for (int i  = 0; i < _subviewsCenterArray.count; i ++) {
        float subviewsCenterPointX = [_subviewsCenterArray[i] floatValue];
        double  absolute = fabs(subviewsCenterPointX - currentCenterOffsetX);
        [absoluteValueArray addObject:@(absolute)];
        [absoluteValueDictionary setValue:@(subviewsCenterPointX) forKey:[NSString stringWithFormat:@"%f",absolute]];
    }


    [absoluteValueArray sortUsingComparator:^NSComparisonResult(id  _Nonnull obj1, id  _Nonnull obj2) {

        double a = [obj1 doubleValue];
        double b = [obj2 doubleValue];
        if (a>b) {
            return NSOrderedDescending;
        }
        else if (a<b){
            return NSOrderedAscending;
        }
        else{
            return NSOrderedSame;
        }

    }];


    double shortValue = [absoluteValueArray.firstObject doubleValue];
    double centerX = [[absoluteValueDictionary objectForKey:[NSString stringWithFormat:@"%f",shortValue]] doubleValue];
    [UIView animateWithDuration:0.25 animations:^{
        scrollView.contentOffset = CGPointMake(centerX - CGRectGetWidth(self.view.frame)/2.0, 0);

    }];

}



- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

答案 1 :(得分:0)

当然不是。 pagingScrollView的子视图没有正确的宽度!这些子视图也没有正确的水平边距。

  1. 首先您应该更正您的设置宽度代码,将乘数更改为1并将常量更改为-40。像这样:

    alt+shift+R
  2. 然后修改子视图边距,将-20更改为-40,就像这样

    [self.pagingScrollView addConstraint:[NSLayoutConstraint constraintWithItem:view
                                                                    attribute:NSLayoutAttributeWidth
                                                                    relatedBy:NSLayoutRelationEqual
                                                                       toItem:self.pagingScrollView
                                                                    attribute:NSLayoutAttributeWidth
                                                                   multiplier:1
                                                                     constant:-40]];