美文网首页swift
Swift - RxSwift的使用详解40(UICollect

Swift - RxSwift的使用详解40(UICollect

作者: 八级大狂风AM | 来源:发表于2018-03-30 09:39 被阅读899次

    四、相关样式的修改

            有时我们可能需要调整 collectionView 单元格尺寸、间距,或者修改 section 头尾视图尺寸等等。虽然 RxSwift 没有封装相关的方法,但我们仍然可以通过相关的代理方法来设置。

    1,效果图

    (1)不管屏幕尺寸如何,collectionView 每行总是固定显示 4 个单元格,即单元格的宽度随屏幕尺寸的变化而变化。
    (2)而单元格的高度为宽度的 1.5 倍。

    2,样例代码

    import UIKit
    import RxSwift
    import RxCocoa
    import RxDataSources
     
    class ViewController: UIViewController {
         
        var collectionView:UICollectionView!
         
        let disposeBag = DisposeBag()
         
        override func viewDidLoad() {
            super.viewDidLoad()
             
            //定义布局方式
            let flowLayout = UICollectionViewFlowLayout()
             
            //创建集合视图
            self.collectionView = UICollectionView(frame: self.view.frame,
                                                   collectionViewLayout: flowLayout)
            self.collectionView.backgroundColor = UIColor.white
             
            //创建一个重用的单元格
            self.collectionView.register(MyCollectionViewCell.self,
                                         forCellWithReuseIdentifier: "Cell")
            self.view.addSubview(self.collectionView!)
             
            //初始化数据
            let items = Observable.just([
                SectionModel(model: "", items: [
                    "Swift",
                    "PHP",
                    "Python",
                    "Java",
                    "C++",
                    "C#"
                    ])
                ])
             
            //创建数据源
            let dataSource = RxCollectionViewSectionedReloadDataSource
                <SectionModel<String, String>>(
                configureCell: { (dataSource, collectionView, indexPath, element) in
                    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell",
                                                    for: indexPath) as! MyCollectionViewCell
                    cell.label.text = "\(element)"
                    return cell}
            )
             
            //绑定单元格数据
            items
                .bind(to: collectionView.rx.items(dataSource: dataSource))
                .disposed(by: disposeBag)
             
            //设置代理
            collectionView.rx.setDelegate(self)
                .disposed(by: disposeBag)
        }
    }
     
    //collectionView代理实现
    extension ViewController : UICollectionViewDelegateFlowLayout {
        //设置单元格尺寸
        func collectionView(_ collectionView: UICollectionView,
                            layout collectionViewLayout: UICollectionViewLayout,
                            sizeForItemAt indexPath: IndexPath) -> CGSize {
            let width = collectionView.bounds.width
            let cellWidth = (width - 30) / 4 //每行显示4个单元格
            return CGSize(width: cellWidth, height: cellWidth * 1.5) //单元格宽度为高度1.5倍
        }
    }
     
    //自定义单元格
    class MyCollectionViewCell: UICollectionViewCell {
         
        var label:UILabel!
         
        override init(frame: CGRect) {
            super.init(frame: frame)
             
            //背景设为橙色
            self.backgroundColor = UIColor.orange
             
            //创建文本标签
            label = UILabel(frame: frame)
            label.textColor = UIColor.white
            label.textAlignment = .center
            self.contentView.addSubview(label)
        }
         
        override func layoutSubviews() {
            super.layoutSubviews()
            label.frame = bounds
        }
         
        required init?(coder aDecoder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }
    }
    

    RxSwift使用详解系列
    原文出自:www.hangge.com转载请保留原文链接

    相关文章

      网友评论

        本文标题:Swift - RxSwift的使用详解40(UICollect

        本文链接:https://www.haomeiwen.com/subject/onubcftx.html