可快速滑动的视图 [英] Swift swipe-able views

问题描述

我是Swift和iOS开发的新手，正在寻求建立一系列视图或卡片"，可以左右滑动，下一张/上一张卡片保留在边缘以指示他们在那里.这是在iOS App Store预览中完成的:

I'm new to Swift and iOS development, and am looking to set up a series of views, or "cards", that can be swiped left and right, with the next/previous cards remaining at the edges to indicate that they are there. This is done in iOS App Store previews:

到目前为止，我真正发现的只是这篇中篇文章:

So far all I've really found is this Medium article: iOS Swift: Swipe View. However I'm not sure if this is the right way to do what I'm asking above, and I also don't know how to get the next/previous cards to remain at the edges on each swipe.

有人有实现这一目标的提示吗?

Does anyone have any tips for achieving this?

推荐答案

最简单的方法是使用UICollectionView和UICollectionViewFlowLayout. UICollectionViewFlowLayout是开箱即用的，功能非常强大.

The easiest way will be to use UICollectionView and UICollectionViewFlowLayout. UICollectionViewFlowLayout is provided out of the box and is very powerful.

基本上您需要:

1. 将UICollectionView添加到您的视图控制器.
2. 默认情况下，UICollectionView会选择Flow布局.
3. 配置UICollectionViewFlowLayout
   • 将滚动方向设置为水平"
   • 定义商品尺寸和间距.请记住，您只需要一项即可完全可见.此外，左侧和右侧的空间也应该可见；此外，您还需要显示前几张和后几张卡片，因此需要一些基本的数学知识:).一个小技巧可以使您的第一张和最后一张纸牌正确居中:您应将垂直部分的插入位置指定为等于前一张纸牌的可见宽度加上两张纸牌之间的距离之和.

1. Add UICollectionView to your view controller.
2. By default UICollectionView goes with Flow layout selected.
3. Configure UICollectionViewFlowLayout
   • Set scroll direction to Horizontal
   • Define item size and spacing. Keep in mind that you need just one item to be fully visible; in addition spaces to the left and right should be visible as well; further more you need to show pieces of previous and next cards, so some basic math waiting for you:). One small trick to make you very first and very last cards be centered properly: you should specify vertical section insets to be equal to the sum of visible width of previous card plus space between cards.

以上步骤应足以显示垂直可滚动的卡片视图.但这看起来并不好！为了使其出色，您可能需要在用户端滚动后完全将最合适的卡居中. 要实现即时滚动，您需要使用以下UICollectionViewDelegate方法:

Steps above should be enough to have vertically scrollable cards view. But it will not look great! To make it great you probably need perfectly to center most appropriate card after user end scrolling. To achieve sticky scrolling you need to work with the following UICollectionViewDelegate methods:

// compute collection view content offset in method bellow
override func scrollViewDidEndDragging(scrollView: UIScrollView, willDecelerate decelerate: Bool) {
    ...
}

// compute targetContentOffset in method bellow 
override func scrollViewWillEndDragging(scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
    ...
}

...最后提示:要使视图视图的代码中的集合视图减速更快，请执行以下操作:

... last hint: to make collection view deceleration look quick in code of your view controller do:

self.collectionView?.decelerationRate = UIScrollViewDecelerationRateFast

分页指示器:

在您提供的示例中，有一个分页控件，可以反映当前项目和总项目数.您需要手动添加UIPageControll；您可以在情节提要中进行操作.更新页面控件状态的最佳位置是:

In example that you provide there is a paging control that reflects current item and overall items count. You need to add UIPageControll manually; you can do it in storyboard. The best place to update page control state will be:

// method in UICollectionView delegate that you need to define.
// update your paging info in method bellow.
override func scrollViewDidScroll(scrollView: UIScrollView) {
    ...    
}

备注:

处理我列出的滚动视图的方法是UIScrollViewDelegate从UICollectionViewDelegate继承的. UICollectionView本身是从UIScrollViewDelegate派生的.

Methods that deal with scroll view that i've listed are inherited by UICollectionViewDelegate from UIScrollViewDelegate. UICollectionView itself derived from UIScrollViewDelegate.

这篇关于可快速滑动的视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！