初学Swift(二)横向TableView篇实现轮播图

2016-12-30  本文已影响0人  lczzik

此篇文章只是实现横向TableView,后面轮播图的部分可以参考上篇文章。
横向TableView,原理是将TableView逆时针旋转90°,

  override init (frame:CGRect){
        ksTableView = UITableView.init(frame:CGRect.init(x: 0, y: 0, width: frame.size.height, height: frame.size.width) , style: UITableViewStyle.plain)
        dataAry = NSArray()
        super.init(frame: frame);
        ksTableView.delegate = self;
        ksTableView.dataSource = self;
        self.addSubview(ksTableView)
        ksTableView.transform = CGAffineTransform.init(rotationAngle: CGFloat(-M_PI/2))
        ksTableView.center = CGPoint.init(x: frame.size.width/2.0, y: frame.size.height/2.0)
        ksTableView.backgroundColor = UIColor.red
        ksTableView.isPagingEnabled = true
        ksTableView.showsVerticalScrollIndicator = false
        ksTableView.separatorStyle = UITableViewCellSeparatorStyle.none
    }

现在TableView横向之后,我们需要把cell顺时针旋转90°,这样cell就和我们竖向tableView一样了。

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let indentifier = "CarouselCell"
        let cell = KSCarouselCell.init(style: UITableViewCellStyle.default, reuseIdentifier: indentifier)
        cell.transform = CGAffineTransform.init(rotationAngle: CGFloat(M_PI/2))
        cell.img.image = UIImage.init(named: self.dataAry[indexPath.row] as! String)
        return cell
    }

这样我们只需要把图片加到cell上面,图片的坐标和放在竖向TableView的坐标就一致了。

class KSCarouselCell: UITableViewCell {

    var img : UIImageView
    override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
        img = UIImageView.init(frame: CGRect.init(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: 200))
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        self.contentView.addSubview(img)
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
}

剩下的轮播图的实现就和scrollView一样了,请参考上篇文章。横向TableView除了轮播图还有很多时候可以用到,比如横向的商品列表,当然了也是为了用tableView的复用!

上一篇下一篇

猜你喜欢

热点阅读