如何在两个自定义 TableViewCells 中显示 UIView 图片幻灯片和 CollectionViews？

Question

我正在 iPhone 使用 Swift 3 开发一个简单的商业应用程序，我是开发新手。我有一个带有 UIView 的 ViewController，它通过带有 UIPageControl 的图像循环。我在同一个 ViewController 中也有标签和水平滚动的 UICollectionViews。我使用故事板配置了滚动视图，并在代码中配置了 UIPageControl。

问题：当我将滚动视图嵌入到 ViewController 时，UIPageControl 和 CollectionViewCells 保持在同一位置。

我这里有一个样本。请查看图片以便更好地理解：Image showing my ViewController where the PageControl stays same while the View is scrolled and another image of the ViewController while scrolling up。

因此，我发现滚动视图与我的 CollectionView 和 PageControl 滚动冲突。

有人可以告诉我如何将用于滑动图像的 UIView 嵌入到自定义 TableViewCell 中，并将我的 CollectionView 的其余部分嵌入到另一个自定义 TableViewCell 中以启用垂直滚动吗？

这是我的 ViewController.swift:

import UIKit  
class Home: UIViewController{
    @IBOutlet var myView: UIView!     
    @IBOutlet var pageControl: UIPageControl!

    override func viewDidLoad() {
        super.viewDidLoad()            
        self.addSlideMenuButton()
        self.title="Home"
        //Image Loop
        self.pageControl.currentPage = -1
        configurePageControl()
        slide = -1
        self.changeSlide()
        var timer = Timer.scheduledTimer(timeInterval: 10
            , target: self, selector: #selector(changeSlide), userInfo: nil, repeats: true);          

        myView.isUserInteractionEnabled = true
        let swipeRight = UISwipeGestureRecognizer(target: self, action: #selector(self.swiped(_gesture:)))

        swipeRight.direction = UISwipeGestureRecognizerDirection.right
        myView.addGestureRecognizer(swipeRight)

        let swipeLeft = UISwipeGestureRecognizer(target: self, action: #selector(swiped(_gesture:)))
        swipeLeft.direction = UISwipeGestureRecognizerDirection.left
        myView.addGestureRecognizer(swipeLeft)           

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    var images = [UIImage(named:"banner2"),UIImage(named:"banner1"),UIImage(named:"banner3"),UIImage(named:"banner4"),UIImage(named:"banner5")]    

    var slide:Int = 0          
    func changeSlide(){

        var loop : UIImageView!            
        loop = UIImageView(frame: myView.bounds)
        loop.contentMode =  UIViewContentMode.scaleToFill          

        if(slide == images.count-1)
        {
            slide=0
            loop.image = images[slide]
            self.pageControl.currentPage=slide
        }
        else
        {
            slide+=1
            loop.image = images[slide]
            self.pageControl.currentPage=slide
        }
            loop.layer.affineTransform()
        myView.addSubview(loop)            
    }


    @IBAction func pageChange(_ sender: AnyObject) {        
    }

    func swiped(_gesture: UIGestureRecognizer) {

        var loop : UIImageView!
        loop = UIImageView(frame: myView.bounds)
        loop.contentMode =  UIViewContentMode.scaleToFill
        loop.image = images[slide]
        myView.addSubview(loop)

        if let swipeGesture = _gesture as? UISwipeGestureRecognizer {

            switch swipeGesture.direction {

            case UISwipeGestureRecognizerDirection.right :

                 // decrease index first
                 // check if index is in range

                if (slide == 0) {

                    slide = images.count-1
                    loop.image = images[slide]
                    self.pageControl.currentPage = slide
                }

                else
                {

                    slide-=1
                    loop.image = images[slide]
                    self.pageControl.currentPage = slide

                }

            case UISwipeGestureRecognizerDirection.left:


                // increase index first
                // check if index is in range

                if (slide == images.count-1) {

                    slide = 0
                    loop.image = images[slide]
                    self.pageControl.currentPage = slide
                }
                else{
                    slide+=1
                    loop.image = images[slide]
                    self.pageControl.currentPage = slide
                }                   
            default:
                break //stops the code/codes nothing.

           }
        }

    }

    func configurePageControl() {
        self.pageControl.numberOfPages = images.count
        self.pageControl.currentPage = slide
        self.pageControl.tintColor = UIColor.red
        self.pageControl.pageIndicatorTintColor = UIColor.gray
        self.pageControl.currentPageIndicatorTintColor = UIColor.green  

        self.myView.addSubview(pageControl)

        self.view.addSubview(pageControl)
    }        
}

这包含 UIView 图像循环和 UIPageControl 的代码，还带有滑动浏览图像的选项。

有人可以帮帮我吗？提前致谢。

Answer 1

**我是这样做的：** 步骤1： - 首先，您需要创建自定义单元格。这是自定义单元格的代码：

class MovieCollectionViewCell: UICollectionViewCell {

var moviePoster = UIImageView()
var view: UIView = UIView()
override init(frame: CGRect) {
    super.init(frame: frame)

    contentView.addSubview(moviePoster)
    moviePoster.contentMode = .scaleAspectFill
    moviePoster.translatesAutoresizingMaskIntoConstraints = false

    let constraints : [NSLayoutConstraint] = [

        moviePoster.topAnchor.constraint(equalTo: contentView.topAnchor),
        moviePoster.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
        moviePoster.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
        moviePoster.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
    ]
    NSLayoutConstraint.activate(constraints)
}

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}    
}

这会将您的图片设置为图片视图。我按照 swift 3.

使用锚点

第 2 步：- 创建 tableView，其中 swipeView 是将设置为 tableView 的 headerView 的视图。在 swipeView 中添加 collectionView 作为它的子视图。之后将 swapView 设置为 tableView 的 headerView 并进行 pageControl 设置。这是代码：

 var tableView : UITableView = UITableView(
    frame: CGRect.zero,
    style: .grouped
)
var swipeView : UIView = UIView()
var myCollectionView: UICollectionView!
var indicator = MyIndicator()
var pageControl : UIPageControl = UIPageControl()
var detailsViewVM : DetailsViewViewModel!

override func viewDidLoad() {
    super.viewDidLoad()


    self.view.backgroundColor = UIColor.white
    self.view.addSubview(self.tableView)

    self.tableView.rowHeight = UITableViewAutomaticDimension
    self.tableView.estimatedRowHeight = 44
    self.tableView.dataSource = self
    self.tableView.delegate = self
    self.tableView.register(
        DetailsCustomTableViewCell.self,
        forCellReuseIdentifier: "textCell"
    )
    self.tableView.register(
        StarRatingCell.self,
        forCellReuseIdentifier: "starRatingCell"
    )
    self.tableView.translatesAutoresizingMaskIntoConstraints = false
 //   self.tableView.backgroundColor = UIColor(netHex:  0x90caf9 )
    self.view.addSubview(self.tableView)

    let tableViewConstraints : [NSLayoutConstraint] = [
        self.tableView.topAnchor.constraint(equalTo: view.topAnchor),
        self.tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        self.tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        self.tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
    ]
    NSLayoutConstraint.activate(tableViewConstraints)

// MARK : Collection view layout

    let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
    layout.scrollDirection = .horizontal

    self.myCollectionView = UICollectionView(
        frame: CGRect(
            x: 0,
            y: 0,
            width: self.view.bounds.width,
            height: 200),
        collectionViewLayout: layout
    )

    self.myCollectionView.isPagingEnabled = true
    self.myCollectionView.dataSource = self
    self.myCollectionView.delegate = self

    self.myCollectionView.register(
        MovieCollectionViewCell.self,
        forCellWithReuseIdentifier: "MyCell"
    )
    self.swipeView = UIView(frame: CGRect(x: 0, y: 0, width: self.view.bounds.width, height: 200))
    self.myCollectionView.backgroundColor = UIColor.gray
    indicator.StartActivityIndicator(obj: self.myCollectionView)
    self.swipeView.addSubview(myCollectionView)
    self.tableView.tableHeaderView = self.swipeView

// MARK : UIPageControl

    configurePageControl()
    self.pageControl.translatesAutoresizingMaskIntoConstraints = false
    self.pageControl.bottomAnchor.constraint(equalTo: swipeView.bottomAnchor, constant : 8).isActive = true
    self.pageControl.centerXAnchor.constraint(equalTo: swipeView.centerXAnchor).isActive = true
    self.pageControl.heightAnchor.constraint(equalToConstant: 44).isActive = true
    self.pageControl.leadingAnchor.constraint(equalTo: self.swipeView.leadingAnchor).isActive = true
    self.pageControl.trailingAnchor.constraint(equalTo: self.swipeView.trailingAnchor).isActive = true

}

func configurePageControl() {
        self.pageControl.currentPage = 0
        self.pageControl.pageIndicatorTintColor = UIColor(netHex : 0xd6eaf8 )
        self.pageControl.currentPageIndicatorTintColor = UIColor(netHex: 0xd81b60 )
        self.swipeView.addSubview(pageControl)
        swipeView.bringSubview(toFront: pageControl)
    }

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
    let x = myCollectionView.contentOffset.x
    let w = myCollectionView.bounds.size.width
    self.pageControl.currentPage = Int(ceil(x/w))
}

func reloadView() {
    self.pageControl.numberOfPages = self.detailsViewVM.getMoviePosterArray().count
    self.myCollectionView.reloadData()
    indicator.StopActivityIndicator()
}

extension DetailsViewController:  UICollectionViewDelegateFlowLayout {

func collectionView(_ collectionView: UICollectionView,
                    layout collectionViewLayout: UICollectionViewLayout,
                    minimumLineSpacingForSectionAt section: Int) -> CGFloat
{

    return 0.0
}

    func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        sizeForItemAt indexPath: IndexPath) -> CGSize
    {

        return CGSize(width: self.view.bounds.width, height: self.myCollectionView.bounds.height)
    }
}

希望这个回答能解决您的问题。

如何在两个自定义 TableViewCells 中显示 UIView 图片幻灯片和 CollectionViews？

How to display UIView image slides and CollectionViews in two custom TableViewCells?

uitableview

uicollectionview

swift3

ios10