iOS使用部分可见的下一个和上一个视图滑动视图

Question

我正在尝试为iPhone要求实现类似闪存卡的功能。文本内容位于卡片中心和左侧（前一张卡片），右侧（下一张卡片）部分可见。

到目前为止，我尝试了nicklockwood/SwipeView from github。 但我未能满足左/右侧卡部分可见度要求。

有没有变通方法/图书馆？请在这里告诉我。

Answer 1

我只想使用UICollectionView。

对齐行为：UICollectionView with paging - setting page width

布局：

UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
layout.itemSize = CGSizeMake(200, 400);
layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;

关于这一点很酷的是，当用户点击左侧或右侧部分可见的单元格时，您可以轻松实现居中行为（这对于某些UIScrollView黑客攻击并不容易）：

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    [self.collectionView scrollToItemAtIndexPath:indexPath
                                atScrollPosition:UICollectionViewScrollPositionCenteredHorizontally
                                        animated:YES];
}

Answer 2

如果你想用可用的UIScrollView分页api实现这个目的，那就有一个简单的技巧。除了将pagingEnabled设置为YES之外，还要确保将clipsToBounds设置为NO。

UIScrollView *scrollView = [UIScrollView new];
self.scrollView.pagingEnabled = YES;
self.scrollView.clipsToBounds = NO;

您现在需要将滚动视图的大小设置为页面大小。滚动视图将在其边界之外绘制，显示其他页面。

为了能够在滚动视图外部开始拖动，您需要创建一个包含滚动视图的容器视图。然后在此容器视图中覆盖hitTest:，始终返回滚动视图：

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
    return self.scrollView;
}

如果容器视图的clipToBounds设置为YES，则这将是滚动视图可见的区域。

Answer 3

由于我的滚动视图很小（只有100p高），因此hitTest方法将获得整个ViewController，这不是我想要的。此解决方案可覆盖任何大小的ScrollView，并使用Swift 4完成：

class ScrollViewContainer: UIView {

@IBOutlet weak var scrollView: UIScrollView!

override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {

    guard self.bounds.contains(point) else {
        return super.hitTest(point, with: event)
    }

    guard self.scrollView.frame.contains(point) else {
        return self.scrollView
    }

    return super.hitTest(point, with: event)
   }
}

如果匹配超出其范围，则第一个Guard返回默认值UIView hitTest。

如果匹配项在我的容器内部但在ScrollView外部（这正是此问题的目的），则第二个返回UIScrollView。

如果该匹配项位于ScrollView内部，则无需执行任何其他操作，只需让UIView使用其默认实现对其进行处理即可。

唯一需要处理的事情是当您的触摸在容器内部但在滚动视图外部时。

此代码只能简化为一个guard，但我认为这种方法更容易解释逻辑。

Answer 4

经过数小时的尝试后，我尝试使用hitTest并没有获得正面的结果，

Try this

:host /deep/ .mat-form-field-label-wrapper .mat-form-field-label {
    color:white !important;
}

我刚刚在容器视图内部的组件滚动视图中使用了此类，并且一切都很好。

像我上课一样的图片