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

时间:2017-02-16 11:45:35

标签: uitableview swift3 uicollectionview ios10

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

问题:当我将滚动视图嵌入到ViewController时,UIPageControl和CollectionViewCells保持在相同的位置。

我这里有一个样本。请参阅图片以便更好地理解:Image showing my ViewController where the PageControl stays same while the View is scrolled以及ViewController while scrolling up的另一张图片。

所以,我发现scrollview与我的CollectionView和PageControl滚动冲突。

有人可以告诉我如何在自定义TableViewCell中嵌入我的UIView以及其他自定义TableViewCell中的其他CollectionViews以启用垂直滚动吗?

这是我的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,还有滑动图像的选项。

有人可以帮帮我吗?提前谢谢。

1 个答案:

答案 0 :(得分: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)
    }
}

希望这个答案可以解决你的问题。