Swift 纯代码实现 UICollectionView 布局

开发环境

  • macOS Serria (10.12)
  • xCode 8.0 (Swift 3)

总体思路

  1. 建立空白的 storyboard 用于呈现列表
  2. 实现自定义单个单元格(继承自:UICollectionViewCell)
  3. 将列表(UICollectionView)注册到页面(StoryBoard)中,同时将自定义单元格注册到列表中

总体效果

Swift 纯代码实现 UICollectionView 布局_第1张图片
总体效果

接下来,正式上代码。

建立 storyboard

示例代码集成了 Tab Bar 和 Navigation Bar,整个项目(main.storyboard)如下所示:


Swift 纯代码实现 UICollectionView 布局_第2张图片
main.storyboard

示例将在大厅页面(HomeNavItem Scene)呈现列表,如下图所示:


Swift 纯代码实现 UICollectionView 布局_第3张图片
HomeNavItem

创建 HomeNavItemController.swift,作为上述页面的后台代码,关联方式如上图右上角 Custom Class 所示。
至此,界面端的工作就全部完毕了。

自定义单个单元格(HomeCollectionViewCell.swift)

自定义单元格,继承自 UICollectionViewCell,代码如下所示:

import UIKit;

class HomeCollectionViewCell: UICollectionViewCell {
    
    var id: Int = 0;   // 用于记录每个记录的ID
    
    var cover: UIImageView?;
    var avatar: UIImageView?;
    var title: UILabel?;
    var author: UILabel?;
    var follow: UILabel?;
    var begin: UILabel?;
    var like: UILabel?;
    
    override init(frame: CGRect) {
        super.init(frame: frame);
        
        // 将 cover 注册到单元格
        cover = UIImageView(image: UIImage.init(named: "DefaultCover"));
        cover?.frame = CGRect(x: 8, y: 10, width: UIScreen.main.bounds.width - 16, height: 160);
        cover?.contentMode = UIViewContentMode.scaleAspectFill;
        cover?.clipsToBounds = true;
        self.addSubview(cover!);
        
        // 添加 avatar 背景
        let avatarBack = UIView(frame: CGRect(x: 8, y: 16, width: 37.5, height: 25));
        avatarBack.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.6);
        let path = UIBezierPath(roundedRect: avatarBack.bounds, byRoundingCorners: [UIRectCorner.topRight, UIRectCorner.bottomRight], cornerRadii: CGSize(width: 12.5, height: 12.5));
        let layer = CAShapeLayer();
        layer.frame = avatarBack.bounds;
        layer.path = path.cgPath;
        avatarBack.layer.mask = layer;
        self.addSubview(avatarBack);
        
        // 将 avatar 注册到单元格
        avatar = UIImageView(image: UIImage.init(named: "DefaultCover"));
        avatar?.frame = CGRect(x: 23, y: 18.5, width: 20, height: 20);
        avatar?.layer.cornerRadius = 10;
        avatar?.contentMode = UIViewContentMode.scaleAspectFill;
        avatar?.clipsToBounds = true;
        self.addSubview(avatar!);
        
        // 将 author 注册到单元格
        author = UILabel(frame: CGRect(x: 50, y: 19, width: UIScreen.main.bounds.width - 58, height: 11));
        author?.textColor = UIColor.black;
        author?.font = UIFont(name: "Heiti SC", size: 11);
        self.addSubview(author!);
        
        // 将 follow 注册到单元格
        follow = UILabel(frame: CGRect(x: 50, y: 31, width: UIScreen.main.bounds.width - 58, height: 9));
        follow?.textColor = UIColor.darkGray;
        follow?.font = UIFont(name: "Heiti SC", size: 9);
        self.addSubview(follow!);
        
        // 添加 title 引导线
        let sepTitle = UIView(frame: CGRect(x: 8, y: 175, width: 2, height: 31));
        sepTitle.backgroundColor = UIColor(red: 222/255, green: 81/255, blue: 27/255, alpha: 1);
        sepTitle.layer.cornerRadius = 1;
        self.addSubview(sepTitle);
        
        // 将 title 注册到单元格
        title = UILabel(frame: CGRect(x: 14 + sepTitle.bounds.width, y: 177, width: UIScreen.main.bounds.width - 22 - sepTitle.bounds.width, height: 14));
        title?.textColor = UIColor.black;
        title?.font = UIFont(name: "Heiti SC", size: 14);
        self.addSubview(title!);
        
        // 将 begin 注册到单元格
        begin = UILabel(frame: CGRect(x: 14 + sepTitle.bounds.width, y: 195, width: UIScreen.main.bounds.width - 22 - sepTitle.bounds.width, height: 10));
        begin?.textColor = UIColor.gray;
        begin?.font = UIFont(name: "Heiti SC", size: 10);
        self.addSubview(begin!);
        
        // 添加 good 分割线
        let sepLine = UIView(frame: CGRect(x: 0, y: 212, width: UIScreen.main.bounds.width, height: 1));
        sepLine.backgroundColor = UIColor(red: 240/255, green: 240/255, blue: 240/255, alpha: 1);
        self.addSubview(sepLine);
        
        // 将 begin 注册到单元格
        like = UILabel(frame: CGRect(x: UIScreen.main.bounds.width - 88, y: 220, width: 80, height: 12));
        like?.textColor = UIColor.gray;
        like?.font = UIFont(name: "Heiti SC", size: 12);
        self.addSubview(like!);
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("Cell 初始化失败");
    }
}

至此,自定义单元格的代码完毕。
接下来,将列表注册到页面中去,同时,将自定义单元格注册到列表中,代码如下:

import UIKit;

class HomeNavItemController: BaseViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
    
    var colView: UICollectionView?;   // 创建一个列表
    
    // 在手机反转时重绘列表
    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews();
        
        let layout = UICollectionViewFlowLayout();
        
        colView = UICollectionView(frame: CGRect.init(x: 0, y: 0, width: UIScreen.main.bounds.width, height: self.view.bounds.height), collectionViewLayout: layout);
        colView?.register(HomeCollectionViewCell.self, forCellWithReuseIdentifier: "homeCell")
        colView?.delegate = self;
        colView?.dataSource = self;
        colView?.backgroundColor = UIColor(red: 240/255, green: 240/255, blue: 240/255, alpha: 1);
        
        layout.scrollDirection = .vertical;
        layout.itemSize = CGSize(width: UIScreen.main.bounds.width, height: 240);
        
        self.view.addSubview(colView!);
    }
    
    // Cell 数量
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10;
    }
    
    // Cell 具体内容
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "homeCell", for: indexPath) as! HomeCollectionViewCell;
        
        cell.id = indexPath.row + 10;
        
        cell.cover?.image = UIImage.downloadFromURL(url: "http://pic9.nipic.com/20100904/4845745_195609329636_2.jpg");
        //cell.cover!.image = UIImage.init(named: "DefaultCover");
        
        cell.title?.text = "\\(indexPath.row)这里是标题内容看这里是标题内容看这里看这里";
        cell.author?.text = "张三";
        cell.follow?.text = "\\(indexPath.row)关注";
        
        let now = Date();
        let format = DateFormatter();
        format.locale = Locale.current;
        format.dateFormat = "yyyy年M月d日 HH:mm";
        cell.begin?.text = "@ \\(format.string(from: now))";
        
        cell.like?.text = "\\(indexPath.row)点赞";
        
        cell.backgroundColor = UIColor.white;
        return cell;
    }

    // 单击单元格时,跳转到详情页面
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        let cell = collectionView.cellForItem(at: indexPath) as! HomeCollectionViewCell;
        let player = PlayerController();
        player.id = cell.id;
        self.navigationController?.pushViewController(player, animated: true);
    }
}

至此,全部页面功能实现完毕。

在页面下载图片时,采用了对 UIImage 的扩展方式来实现,实现代码如下:

import UIKit;

extension UIImage {
    class func downloadFromURL(url: String) -> UIImage {
        let url = URL(string: url)!;
        var img = UIImage();
        
        do{
            let data = try Data(contentsOf: url);
            img = UIImage(data: data)!;
        } catch let err as NSError {
            print("下载图片出错:\\(err)");
        }
        
        return img;
    }
}

至此,所有功能实现完毕。

你可能感兴趣的:(Swift 纯代码实现 UICollectionView 布局)