• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

swift - TableView的使用以及圆角分组表格实现的思路

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

TableView的使用:

与oc语言中的tableview基本类似,swift中的表格依然是如下的实现步骤

1、创建表格

2、设置代理,并注册单元格

3、遵循协议

4、实现代理方法

swift创建表格:

lazy var tableView:UITableView = {

        let table:UITableView = UITableView.init(frame: .zero, style: .grouped)

        table.delegate = self

        table.dataSource = self

        table.backgroundColor = RGBColorFromHex(rgbValue: 0xF5F4F4)

        table.register(OrderTableViewCell.self , forCellReuseIdentifier: "orderCellid")

        table.register(OrderTableTitleViewCell.self , forCellReuseIdentifier: "orderTitleCellid")

        table.register(OrderFooterView.self , forHeaderFooterViewReuseIdentifier: "footerCellid")

        table.rowHeight = 45

        return table

    }()

表格实现的代理方法

func numberOfSections(in tableView: UITableView) -> Int {

        return 3 // 返回的分组数

    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

        return 3 // 每一个分组的内容个数

    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let titleCell:OrderTableTitleViewCell = tableView.dequeueReusableCell(withIdentifier: "orderTitleCellid", for: indexPath) as! OrderTableTitleViewCell

        let cell:OrderTableViewCell = tableView.dequeueReusableCell(withIdentifier: "orderCellid", for: indexPath) as! OrderTableViewCell

        if indexPath.row == 0 {

            titleCell.setCellWithData(data: "titleData")

            return titleCell

        } else {

            cell.setCellWithData(data: "cellData")

            return cell

        }

    }

圆角分组表格实现思路:


实现如上图的分组圆角表格思路:

实现的思路有两种,第一种是含有分组footer的tabView,对每个分组中的第一个cell设置左上放圆角与右上角圆角。每一个分组的footerView设置左下方圆角与右下方圆角

代码例子:(在tableView将要进行展示的代理方法中去实现)

func tableView(_ tableView: UITableView, willDisplayFooterView view: UIView, forSection section: Int) {

                // 圆角路径

        let path:UIBezierPath = UIBezierPath.init(roundedRect: view.bounds, byRoundingCorners: [.bottomLeft,.bottomRight], cornerRadii: CGSize(width: 10, height: 0))

        // 

        let shapLayer:CAShapeLayer = CAShapeLayer()

        shapLayer.lineWidth = 1

        shapLayer.strokeColor = UIColor.white.cgColor

        shapLayer.fillColor = UIColor.clear.cgColor

        shapLayer.path = path.cgPath

        let maskLayer:CAShapeLayer = CAShapeLayer.init()

        maskLayer.path = path.cgPath

        view.layer.mask = maskLayer

        view.layer.addSublayer(shapLayer)

    }

    

    func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {

        if indexPath.row == 0 {

            let path:UIBezierPath = UIBezierPath.init(roundedRect: cell.contentView.bounds, byRoundingCorners: [.topLeft,.topRight], cornerRadii: CGSize(width: 10, height: 0))

            let shapLayer:CAShapeLayer = CAShapeLayer()

            shapLayer.lineWidth = 1

            shapLayer.strokeColor = UIColor.white.cgColor

            shapLayer.fillColor = UIColor.clear.cgColor

            shapLayer.path = path.cgPath

            let maskLayer:CAShapeLayer = CAShapeLayer.init()

            maskLayer.path = path.cgPath

            cell.layer.mask = maskLayer

            cell.layer.addSublayer(shapLayer)

        }

    }

原理解释:这里我通过使用UIBezierPath去创建含有圆角弧度的路径,并绘制layer层加入需要进行显示的视图上,之后并对需要显示的layer设置蒙版进行展示

第二种实现思路是不含有FooterView的圆角分组表格,其思路与第一种类似,对每一个分组的第一个cell于最后一个cell进行绘制圆角

代码例子如下

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {

        

        let rowsCount:Int = tableView.numberOfRows(inSection: indexPath.section)

        if indexPath.row == 0 {

            let path:UIBezierPath = UIBezierPath.init(roundedRect: cell.contentView.bounds, byRoundingCorners: [.topLeft,.topRight], cornerRadii: CGSize(width: 10, height: 0))

            let shapLayer:CAShapeLayer = CAShapeLayer()

            shapLayer.lineWidth = 1

            shapLayer.strokeColor = UIColor.white.cgColor

            shapLayer.fillColor = UIColor.clear.cgColor

            shapLayer.path = path.cgPath

            let maskLayer:CAShapeLayer = CAShapeLayer.init()

            maskLayer.path = path.cgPath

            cell.layer.mask = maskLayer

            cell.layer.addSublayer(shapLayer)

        }

        if indexPath.row =  rowsCount - 1 {


            

        let path:UIBezierPath = UIBezierPath.init(roundedRect: cell.contentView.bounds, byRoundingCorners: [.topLeft,.topRight], cornerRadii: CGSize(width: 10, height: 0))

            let shapLayer:CAShapeLayer = CAShapeLayer()

            shapLayer.lineWidth = 1

            shapLayer.strokeColor = UIColor.white.cgColor

            shapLayer.fillColor = UIColor.clear.cgColor

            shapLayer.path = path.cgPath

            let maskLayer:CAShapeLayer = CAShapeLayer.init()

            maskLayer.path = path.cgPath

            cell.layer.mask = maskLayer

            cell.layer.addSublayer(shapLayer)


        }



    }



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Swift 掌控Moya的网络请求、数据解析与缓存发布时间:2022-07-13
下一篇:
[Swift]LeetCode339.嵌套链表权重和$NestedListWeightSum发布时间:2022-07-13
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap