swift label only border left
swift label only border left
早上好，
我有一个这样的表格视图：
示例：
在第一个单元格中，右侧有一个红色文本标签。
从它左边我包括一个像灰线的图像。
使用这段代码我可以设置一个完整的绿色边框：
cell.Label.layer.borderWidth = 0.5
cell.Label.layer.borderColor = UIColor.greenColor().CGColor
我可以只在这个文本标签的左侧设置边框吗？
我使用 swift ios8 - 所以，我需要一个 swift 解决方案
这是您可以添加到项目中的扩展：
extension CALayer {
func addBorder(edge: UIRectEdge, color: UIColor, thickness: CGFloat) {
var border = CALayer()
switch edge {
case UIRectEdge.Top:
border.frame = CGRectMake(0, 0, CGRectGetHeight(self.frame), thickness)
break
case UIRectEdge.Bottom:
border.frame = CGRectMake(0, CGRectGetHeight(self.frame) - thickness, UIScreen.mainScreen().bounds.width, thickness)
break
case UIRectEdge.Left:
border.frame = CGRectMake(0, 0, thickness, CGRectGetHeight(self.frame))
break
case UIRectEdge.Right:
border.frame = CGRectMake(CGRectGetWidth(self.frame) - thickness, 0, thickness, CGRectGetHeight(self.frame))
break
default:
break
}
border.backgroundColor = color.CGColor;
self.addSublayer(border)
}
}
然后像这样使用它：
cell.Label.layer.addBorder(UIRectEdge.Top, color: UIColor.greenColor(), thickness: 0.5)
对于 SWIFT 3、4 和 5：
extension CALayer {
func addBorder(edge: UIRectEdge, color: UIColor, thickness: CGFloat) {
let border = CALayer()
switch edge {
case UIRectEdge.top:
border.frame = CGRect(x: 0, y: 0, width: self.frame.height, height: thickness)
break
case UIRectEdge.bottom:
border.frame = CGRect(x: 0, y: self.frame.height - thickness, width: UIScreen.main.bounds.width, height: thickness)
break
case UIRectEdge.left:
border.frame = CGRect(x: 0, y: 0, width: thickness, height: self.frame.height)
break
case UIRectEdge.right:
border.frame = CGRect(x: self.frame.width - thickness, y: 0, width: thickness, height: self.frame.height)
break
default:
break
}
border.backgroundColor = color.cgColor;
self.addSublayer(border)
}
}
Swift 3 版本：
extension CALayer {
func addBorder(edge: UIRectEdge, color: UIColor, thickness: CGFloat) {
let border = CALayer()
switch edge {
case UIRectEdge.top:
border.frame = CGRect(x: 0, y: 0, width: self.frame.width, height: thickness)
break
case UIRectEdge.bottom:
border.frame = CGRect(x: 0, y: self.frame.height - thickness, width: self.frame.width, height: thickness)
break
case UIRectEdge.left:
border.frame = CGRect(x: 0, y: 0, width: thickness, height: self.frame.height)
break
case UIRectEdge.right:
border.frame = CGRect(x: self.frame.width - thickness, y: 0, width: thickness, height: self.frame.height)
break
default:
break
}
border.backgroundColor = color.cgColor;
self.addSublayer(border)
}
}
或使用 IBDesignable（见下面的答案）
除了使用扩展，你还可以使用@IBDesignable / @IBInspectable从UILabel创建子类并绘制边框那里。这有一些优势，因为您可以使用界面生成器来设置标签的样式，并且它会直接显示在 Storyboard 中。
@IBDesignable
class LeftBorderedLabel: UILabel {
@IBInspectable var blockColor: UIColor = UIColor.black {
didSet{
let border = CALayer()
border.frame = CGRect(x: 0, y: 0, width: 15, height: self.frame.height)
border.backgroundColor = blockColor.cgColor;
self.layer.addSublayer(border)
}
}
override func prepareForInterfaceBuilder() {
super.prepareForInterfaceBuilder()
}
}
界面生成器中的示例（示例用于 tableViewCell）：
这是您可以添加到项目中的扩展。
SWIFT 3 :-
extension CALayer {
func addBorder(edge: UIRectEdge, color: UIColor, thickness: CGFloat) {
let border = CALayer()
switch edge {
case UIRectEdge.top:
border.frame = CGRect(x: 0, y: 0, width: self.frame.width, height: thickness)
break
case UIRectEdge.bottom:
border.frame = CGRect(x: 0, y: self.frame.height - thickness, width: self.frame.width, height: thickness)
break
case UIRectEdge.left:
border.frame = CGRect(x: 0, y: 0, width: thickness, height: self.frame.height)
break
case UIRectEdge.right:
border.frame = CGRect(x: self.frame.width - thickness, y: 0, width: thickness, height: self.frame.height)
break
default:
//For Center Line
border.frame = CGRect(x: self.frame.width/2 - thickness, y: 0, width: thickness, height: self.frame.height)
break
}
border.backgroundColor = color.cgColor;
self.addSublayer(border)
}
}
然后像这样使用它：
labelName.layer.addBorder(edge: UIRectEdge.right, color: UIColor.black, thickness: 1.5)
如果你想在中心画一条线，那么你可以在任何场景中设置以下框架:-
border.frame = CGRect(x: self.frame.width/2 - thickness, y: 0, width: thickness, height: self.frame.height)
Swift 4 版本:
extension CALayer {
func addBorder(edge: UIRectEdge, color: UIColor, thickness: CGFloat) {
let border = CALayer()
switch edge {
case UIRectEdge.top:
border.frame = CGRect(x: 0, y: 0, width: self.bounds.width, height: thickness)
case UIRectEdge.bottom:
border.frame = CGRect(x: 0, y: self.bounds.height - thickness, width: self.bounds.width, height: thickness)
case UIRectEdge.left:
border.frame = CGRect(x: 0, y: 0, width: thickness, height: self.bounds.height)
case UIRectEdge.right:
border.frame = CGRect(x: self.bounds.width - thickness, y: 0, width: thickness, height: self.bounds.height)
default:
break
}
border.backgroundColor = color.cgColor;
self.addSublayer(border)
}
}
这些解决方案对我有用，但是我使用的是 tableview 行，并且行的高度是根据行中的内容量动态设置的。
对于上述解决方案，我发现如果行的大小由于行内的内容而动态增加，边框的大小不会增加。所以我在比正常大的行上有一个不完整的边框。
我在这个 link（2017 年 10 月 11 日 post）从@Debaprio B 那里看到了这个解决方案：
UIView set only side borders
他的解决方案对我有用，当我的行的大小时动态增加时，边框的大小也会相应地改变。为简洁起见，我在下面分享@Debaprio 的回答：
public extension UIView {
// Border type and arbitrary tag values to identify UIView borders as subviews
public enum BorderType: Int {
case left = 20000
case right = 20001
case top = 20002
case bottom = 20003
}
public func addBorder(borderType: BorderType, width: CGFloat, color: UIColor {
// figure out frame and resizing based on border type
var autoresizingMask: UIViewAutoresizing
var layerFrame: CGRect
switch borderType {
case .left:
layerFrame = CGRect(x: 0, y: 0, width: width, height: self.bounds.height)
autoresizingMask = [ .flexibleHeight, .flexibleRightMargin ]
case .right:
layerFrame = CGRect(x: self.bounds.width - width, y: 0, width: width, height: self.bounds.height)
autoresizingMask = [ .flexibleHeight, .flexibleLeftMargin ]
case .top:
layerFrame = CGRect(x: 0, y: 0, width: self.bounds.width, height: width)
autoresizingMask = [ .flexibleWidth, .flexibleBottomMargin ]
case .bottom:
layerFrame = CGRect(x: 0, y: self.bounds.height - width, width: self.bounds.width, height: width)
autoresizingMask = [ .flexibleWidth, .flexibleTopMargin ]
}
// look for the existing border in subviews
var newView: UIView?
for eachSubview in self.subviews {
if eachSubview.tag == borderType.rawValue {
newView = eachSubview
break
}
}
早上好，
我有一个这样的表格视图：
示例： 在第一个单元格中，右侧有一个红色文本标签。 从它左边我包括一个像灰线的图像。
使用这段代码我可以设置一个完整的绿色边框：
cell.Label.layer.borderWidth = 0.5
cell.Label.layer.borderColor = UIColor.greenColor().CGColor
我可以只在这个文本标签的左侧设置边框吗？ 我使用 swift ios8 - 所以，我需要一个 swift 解决方案
这是您可以添加到项目中的扩展：
extension CALayer {
func addBorder(edge: UIRectEdge, color: UIColor, thickness: CGFloat) {
var border = CALayer()
switch edge {
case UIRectEdge.Top:
border.frame = CGRectMake(0, 0, CGRectGetHeight(self.frame), thickness)
break
case UIRectEdge.Bottom:
border.frame = CGRectMake(0, CGRectGetHeight(self.frame) - thickness, UIScreen.mainScreen().bounds.width, thickness)
break
case UIRectEdge.Left:
border.frame = CGRectMake(0, 0, thickness, CGRectGetHeight(self.frame))
break
case UIRectEdge.Right:
border.frame = CGRectMake(CGRectGetWidth(self.frame) - thickness, 0, thickness, CGRectGetHeight(self.frame))
break
default:
break
}
border.backgroundColor = color.CGColor;
self.addSublayer(border)
}
}
然后像这样使用它：
cell.Label.layer.addBorder(UIRectEdge.Top, color: UIColor.greenColor(), thickness: 0.5)
对于 SWIFT 3、4 和 5：
extension CALayer {
func addBorder(edge: UIRectEdge, color: UIColor, thickness: CGFloat) {
let border = CALayer()
switch edge {
case UIRectEdge.top:
border.frame = CGRect(x: 0, y: 0, width: self.frame.height, height: thickness)
break
case UIRectEdge.bottom:
border.frame = CGRect(x: 0, y: self.frame.height - thickness, width: UIScreen.main.bounds.width, height: thickness)
break
case UIRectEdge.left:
border.frame = CGRect(x: 0, y: 0, width: thickness, height: self.frame.height)
break
case UIRectEdge.right:
border.frame = CGRect(x: self.frame.width - thickness, y: 0, width: thickness, height: self.frame.height)
break
default:
break
}
border.backgroundColor = color.cgColor;
self.addSublayer(border)
}
}
Swift 3 版本：
extension CALayer {
func addBorder(edge: UIRectEdge, color: UIColor, thickness: CGFloat) {
let border = CALayer()
switch edge {
case UIRectEdge.top:
border.frame = CGRect(x: 0, y: 0, width: self.frame.width, height: thickness)
break
case UIRectEdge.bottom:
border.frame = CGRect(x: 0, y: self.frame.height - thickness, width: self.frame.width, height: thickness)
break
case UIRectEdge.left:
border.frame = CGRect(x: 0, y: 0, width: thickness, height: self.frame.height)
break
case UIRectEdge.right:
border.frame = CGRect(x: self.frame.width - thickness, y: 0, width: thickness, height: self.frame.height)
break
default:
break
}
border.backgroundColor = color.cgColor;
self.addSublayer(border)
}
}
或使用 IBDesignable（见下面的答案）
除了使用扩展，你还可以使用@IBDesignable / @IBInspectable从UILabel创建子类并绘制边框那里。这有一些优势，因为您可以使用界面生成器来设置标签的样式，并且它会直接显示在 Storyboard 中。
@IBDesignable
class LeftBorderedLabel: UILabel {
@IBInspectable var blockColor: UIColor = UIColor.black {
didSet{
let border = CALayer()
border.frame = CGRect(x: 0, y: 0, width: 15, height: self.frame.height)
border.backgroundColor = blockColor.cgColor;
self.layer.addSublayer(border)
}
}
override func prepareForInterfaceBuilder() {
super.prepareForInterfaceBuilder()
}
}
界面生成器中的示例（示例用于 tableViewCell）：
这是您可以添加到项目中的扩展。
SWIFT 3 :-
extension CALayer {
func addBorder(edge: UIRectEdge, color: UIColor, thickness: CGFloat) {
let border = CALayer()
switch edge {
case UIRectEdge.top:
border.frame = CGRect(x: 0, y: 0, width: self.frame.width, height: thickness)
break
case UIRectEdge.bottom:
border.frame = CGRect(x: 0, y: self.frame.height - thickness, width: self.frame.width, height: thickness)
break
case UIRectEdge.left:
border.frame = CGRect(x: 0, y: 0, width: thickness, height: self.frame.height)
break
case UIRectEdge.right:
border.frame = CGRect(x: self.frame.width - thickness, y: 0, width: thickness, height: self.frame.height)
break
default:
//For Center Line
border.frame = CGRect(x: self.frame.width/2 - thickness, y: 0, width: thickness, height: self.frame.height)
break
}
border.backgroundColor = color.cgColor;
self.addSublayer(border)
}
}
然后像这样使用它：
labelName.layer.addBorder(edge: UIRectEdge.right, color: UIColor.black, thickness: 1.5)
如果你想在中心画一条线，那么你可以在任何场景中设置以下框架:-
border.frame = CGRect(x: self.frame.width/2 - thickness, y: 0, width: thickness, height: self.frame.height)
Swift 4 版本:
extension CALayer {
func addBorder(edge: UIRectEdge, color: UIColor, thickness: CGFloat) {
let border = CALayer()
switch edge {
case UIRectEdge.top:
border.frame = CGRect(x: 0, y: 0, width: self.bounds.width, height: thickness)
case UIRectEdge.bottom:
border.frame = CGRect(x: 0, y: self.bounds.height - thickness, width: self.bounds.width, height: thickness)
case UIRectEdge.left:
border.frame = CGRect(x: 0, y: 0, width: thickness, height: self.bounds.height)
case UIRectEdge.right:
border.frame = CGRect(x: self.bounds.width - thickness, y: 0, width: thickness, height: self.bounds.height)
default:
break
}
border.backgroundColor = color.cgColor;
self.addSublayer(border)
}
}
这些解决方案对我有用，但是我使用的是 tableview 行，并且行的高度是根据行中的内容量动态设置的。
对于上述解决方案，我发现如果行的大小由于行内的内容而动态增加，边框的大小不会增加。所以我在比正常大的行上有一个不完整的边框。
我在这个 link（2017 年 10 月 11 日 post）从@Debaprio B 那里看到了这个解决方案： UIView set only side borders
他的解决方案对我有用，当我的行的大小时动态增加时，边框的大小也会相应地改变。为简洁起见，我在下面分享@Debaprio 的回答：
public extension UIView {
// Border type and arbitrary tag values to identify UIView borders as subviews
public enum BorderType: Int {
case left = 20000
case right = 20001
case top = 20002
case bottom = 20003
}
public func addBorder(borderType: BorderType, width: CGFloat, color: UIColor {
// figure out frame and resizing based on border type
var autoresizingMask: UIViewAutoresizing
var layerFrame: CGRect
switch borderType {
case .left:
layerFrame = CGRect(x: 0, y: 0, width: width, height: self.bounds.height)
autoresizingMask = [ .flexibleHeight, .flexibleRightMargin ]
case .right:
layerFrame = CGRect(x: self.bounds.width - width, y: 0, width: width, height: self.bounds.height)
autoresizingMask = [ .flexibleHeight, .flexibleLeftMargin ]
case .top:
layerFrame = CGRect(x: 0, y: 0, width: self.bounds.width, height: width)
autoresizingMask = [ .flexibleWidth, .flexibleBottomMargin ]
case .bottom:
layerFrame = CGRect(x: 0, y: self.bounds.height - width, width: self.bounds.width, height: width)
autoresizingMask = [ .flexibleWidth, .flexibleTopMargin ]
}
// look for the existing border in subviews
var newView: UIView?
for eachSubview in self.subviews {
if eachSubview.tag == borderType.rawValue {
newView = eachSubview
break
}
}