web-dev-qa-db-ja.com

swiftラベルのみの境界線が残っています

一緒におはよう、

私はこのようなテーブルビューを持っています： enter image description here

例：セル1には、右側に赤いテキストラベルがあります。そこから左に灰色の線のような画像が含まれています。

このコードを使用すると、完全な緑色の境界線を設定できます。

    cell.Label.layer.borderWidth = 0.5
    cell.Label.layer.borderColor = UIColor.greenColor().CGColor

このテキストラベルの左側に境界線のみを設定できますか？私はSwift ios8を使用します-したがって、Swiftソリューションが必要です

swiftios8border
8
Ghost108

プロジェクトに追加できる拡張機能は次のとおりです。

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)
36
Maysam

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)
    }

}
16
Tom

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)
    }
}
1
Kunal Shah

これらのソリューションは私にとってはうまくいきましたが、私はテーブルビューの行を使用しており、行の高さは行のコンテンツの量に基づいて動的に設定されていました。

上記の解決策では、行内のコンテンツのために行のサイズが動的に増加した場合、境界線のサイズは増加しないことがわかりました。そのため、通常よりも大きい行の境界線が不完全でした。

私はこのリンクで@DebaprioBからこの解決策に出くわしました（2017年10月11日投稿）： IViewはサイドボーダーのみを設定しました

彼の解決策は私のために機能し、私の行のサイズが動的に増加すると、境界線のサイズが適切に変更されました。簡潔にするために、以下の@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
    }
}
1
Andrew

拡張機能を使用する以外に、@ IBDesignable/@ IBInspectableを使用することもできます。 ）UILabelからサブクラスを作成し、そこに境界線を描画します。これにはいくつかの利点があります。これは、Interface Builderを使用してラベルのスタイルを設定でき、ストーリーボードに直接表示されるためです。

@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()
    }
}

Interface Builderの例（例はtableViewCellの場合）：

Interface builder example

0
Tom