Swift 画线控件(支持xib和storyboard)

来源:互联网 发布:视觉识别软件 编辑:程序博客网 时间:2024/05/29 16:24

因项目中经常用到各种分割线,索性封装了一个画线的控件。

[github] 路径

特性

  • 支持在xib中使用
  • 支持设置线的颜色
  • 支持设置线的粗细
  • padding属性
  • 支持横线和竖线
  • 支持画虚线
  • 可设置虚线间隔
  • 可设置虚线线段的长度

效果预览

image.png

代码如下

////  CUILine.swift//  JYHealth////  Created by luoyang on 2017/11/30.//  Copyright © 2017年 JY. All rights reserved.//import UIKit@IBDesignableclass CUILine: UIView {    // line    @IBInspectable var lineWidth: CGFloat = 1    @IBInspectable var lineColor: UIColor = UIColor.black    // padding    @IBInspectable var paddingLeft: CGFloat = 0    @IBInspectable var paddingRight: CGFloat = 0    @IBInspectable var paddingTop: CGFloat = 0    @IBInspectable var paddingBottom: CGFloat = 0    // direct    @IBInspectable var isHorizontal: Bool = true    // dash    @IBInspectable var isDash: Bool = false    @IBInspectable var dashPointWidth: CGFloat = 3.0    @IBInspectable var dashSpace: CGFloat = 1.0    override func draw(_ rect: CGRect) {        super.draw(rect)        // Drawing code        // 获取上下文对象        let context = UIGraphicsGetCurrentContext()        var bx: CGFloat = 0, by: CGFloat = 0, ex: CGFloat = 0, ey: CGFloat = 0;        if isHorizontal {            bx = paddingLeft            by = CGFloat(Int(rect.size.height)/2)            ex = rect.size.width - paddingRight            ey = by        } else {            bx = CGFloat(Int(rect.size.width)/2)            by = paddingTop            ex = bx            ey = rect.size.height - paddingBottom        }        // 画中间虚线        let path    = CGMutablePath()        let begin   = CGPoint(x: bx, y: by),            end     = CGPoint(x: ex, y: ey)        path.move(to: begin)        path.addLine(to: end)        // 2、 添加路径到图形上下文        context!.addPath(path)        // 3、 设置状态        context!.setLineWidth(lineWidth / UIScreen.main.scale)        context!.setStrokeColor(lineColor.cgColor)        if isDash {            context!.setLineDash(phase: 0, lengths: [dashPointWidth, dashSpace])        }        // 4、 绘制图像到指定图形上下文        context!.drawPath(using: .fillStroke)    }}

xib中用法

step1: 拖一个UIView到界面上
step2: 如下图设置该UIView的class为CUILine
image.png
step3: Attributes inspector可设置线的各种属性参数,如下图
image.png