Question

我正在尝试重新创建iOS Flipkart应用产品详细信息顶视图，如下图所示 First image when image is displayed full and detail is at bottom (http://i.stack.imgur.com/1cutn.png)

Second image as user scroll up the detail content (http://i.stack.imgur.com/DXcHf.png)

我要使用的上述屏幕中的功能：

用户可以水平滚动浏览产品图像。用户还可以通过垂直拖动图像来向上滚动细节内容。

根据我的想法，表格视图覆盖整个屏幕，透明的标题视图和集合视图保留在表格视图后面。

我的方法：

添加UIViewController子类

let viewController = ProductDetailViewController()
self.navigationController?.pushViewController(viewController, animated: true)

在导航栏下方添加UICollectionView

var collectionView: UICollectionView = {
let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
layout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0)
layout.minimumLineSpacing = 5
layout.scrollDirection = UICollectionViewScrollDirection.Horizontal
let collectionView = UICollectionView(frame: CGRectZero, collectionViewLayout: layout)
collectionView.backgroundColor = UIColor.lightGrayColor()
collectionView.showsHorizontalScrollIndicator = false
return collectionView
}()
self.collectionView.registerClass(PDetailImageCell.self, forCellWithReuseIdentifier: PDetailImageCellIdentifier)
func addCollectionViewForProductImages() {
let screenSize = UIScreen.mainScreen().bounds.size
self.collectionView.frame = CGRect(x: 0, y: 0, width: screenSize.width, height: self.tableHeaderHeight)
self.collectionView.pagingEnabled = true
self.collectionView.dataSource = self
self.collectionView.delegate = self
self.tableView.tableHeaderView?.addSubview(self.collectionView)
}

添加UITableView

let screenSize = UIScreen.mainScreen().bounds.size
self.tableView.frame = CGRect(x: 0, y: 0, width: screenSize.width, height: screenSize.height)
self.view.addSubview(self.tableView)
self.tableView.backgroundColor = UIColor.clearColor()
self.tableView.dataSource = self
self.tableView.delegate = self
self.tableView.canCancelContentTouches = false

添加透明的UITableHeaderView

let headerView = TableTransparentHeaderView(frame: CGRect(x: 0, y: 0, width: screenSize.width, height: self.tableHeaderHeight))
headerView.backgroundColor = UIColor.clearColor()
self.tableView.tableHeaderView = headerView

当用户拖动表头时跳过触摸。为此，我重写了TouchHandledTableView类中的hitTest方法。

class TouchHandledTableView: UITableView {

    var isScrollingHorizontal: Bool?

override func hitTest(point: CGPoint, withEvent event: UIEvent?) -> UIView? {
    let hitView = super.hitTest(point, withEvent: event)
    let liesInHeaderView = self.tableHeaderView?.pointInside(point, withEvent: event)
    if liesInHeaderView == true && self.isScrollingHorizontal != nil {
        if self.isScrollingHorizontal == false {
            debugPrint("hitTest returned hitView")
            return hitView
        } else {
            debugPrint("hitTest returned nil")
            return nil
        }
    } else {
        debugPrint("hitTest returned hitView")
        return hitView
    }
}
}

但这停止了表格垂直滚动。所以我试图抓住天气，桌面视图被垂直或水平拖动。为了捕捉滚动方向，我添加了滑动手势，触摸事件处理程序，scrollViewDidScroll，但所有这些都是在调用hitTest方法后调用的。一旦检测到方向，就不会在同一阶段调用hitTest。

重新创建iOS Flipkart App产品详细信息顶视图

0 个答案: