web-dev-qa-db-ja.com

CALayer：片側にのみ境界線を追加します

このようにして、CALayerに境界線を追加できます。

[webView.layer setBorderColor: [[UIColor colorWithRed:0.6 green:0.7 blue:0.2 alpha:1] CGColor]];
[webView.layer setBorderWidth: 2.75];

しかし、片側だけに境界線を追加することは可能ですか？一番下のボーダーだけが必要です。または、他のプロパティ、たとえばフレーム、境界、マスク、...？

enter image description here

ご協力いただきありがとうございます！

@ Control-V

        UIWebView *webView = [[UIWebView alloc] init];
        CALayer *webViewLayer = webView.layer;

        // now you can do a lot of stuff like borders:
        [webViewLayer setBorderColor: [[UIColor greenColor] CGColor]];
        [webViewLayer setBorderWidth: 2.75];

CALayerのドキュメントをご覧ください： https://developer.Apple.com/documentation/quartzcore/calayer

そして、こちらをご覧ください： http://iosdevelopertips.com/cocoa/add-rounded-corners-and-border-to-uiwebview.html

iphoneobjective-ccore-animationcalayer
62
Manni

これを使用して右の境界線を作成しました。

leftScrollView.clipsToBounds = YES;

CALayer *rightBorder = [CALayer layer];
rightBorder.borderColor = [UIColor darkGrayColor].CGColor;
rightBorder.borderWidth = 1;
rightBorder.frame = CGRectMake(-1, -1, CGRectGetWidth(leftScrollView.frame), CGRectGetHeight(leftScrollView.frame)+2);

[leftScrollView.layer addSublayer:rightBorder];
131
Kazzar

最も簡単な方法は、選択的な境界線を描画するsubLayerを追加することですが、このソリューションを選択する際に考慮すべき点がいくつかあります。レイヤーのフレーム。

これらの問題を処理するオープンソースソリューションのドロップを実装し、次のような選択的な境界線を宣言できます。

myView.borderDirection = AUIFlexibleBordersDirectionRight | AUIFlexibleBordersDirectionTop;

コードを取得して、それについてさらに読むことができます here

17
adamsiton

Borderプロパティは、ビューの4辺に常に境界線を追加します。独自の描画メソッドを作成して、ビューの下部に境界線を描画できます。

しかし、UIWebViewの上にビューを追加して、境界線のように見せてみませんか？

7
xuzhe

My Swift Solution。これには、UIViewのすべての拡張機能である4つの異なる関数が含まれます。各関数は異なる境界線を追加します。

extension UIView {
@discardableResult func addRightBorder(color: UIColor, width: CGFloat) -> UIView {
    let layer = CALayer()
    layer.borderColor = color.cgColor
    layer.borderWidth = width
    layer.frame = CGRect(x: self.frame.size.width-width, y: 0, width: width, height: self.frame.size.height)
    self.layer.addSublayer(layer)
    return self
    }
@discardableResult func addLeftBorder(color: UIColor, width: CGFloat) -> UIView {
    let layer = CALayer()
    layer.borderColor = color.cgColor
    layer.borderWidth = width
    layer.frame = CGRect(x: 0, y: 0, width: width, height: self.frame.size.height)
    self.layer.addSublayer(layer)
    return self
    }
@discardableResult func addTopBorder(color: UIColor, width: CGFloat) -> UIView {
    let layer = CALayer()
    layer.borderColor = color.cgColor
    layer.borderWidth = width
    layer.frame = CGRect(x: 0, y: 0, width: self.frame.size.width, height: width)
    self.layer.addSublayer(layer)
    return self
    }
@discardableResult func addBottomBorder(color: UIColor, width: CGFloat) -> UIView {
    let layer = CALayer()
    layer.borderColor = color.cgColor
    layer.borderWidth = width
    layer.frame = CGRect(x: 0, y: self.frame.size.height-width, width: self.frame.size.width, height: width)
    self.layer.addSublayer(layer)
    return self
    }
}
6
Bawpotter

Swiftと同等

leftScrollView.clipsToBounds = true
let rightBorder: CALayer = CALayer()
rightBorder.borderColor = UIColor.darkGrayColor().CGColor
rightBorder.borderWidth = 1
rightBorder.frame = CGRectMake(-1, -1, CGRectGetWidth(leftScrollView.frame), CGRectGetHeight(leftScrollView.frame)+2)
leftScrollView.layer.addSublayer(rightBorder)
5
conorgriffin

これを行う別の方法があります。 CAShapeLayerには、「strokeStart」および「strokeEnd」というプロパティがあります。ストロークが0から始まり、Originに戻ったときに1で終了し、パスが完成することを考慮して、開始と終了の値を設定して、片側に境界線を描画できます。

パスのストロークを開始する相対位置。アニメート可能。このプロパティの値は、0.0〜1.0の範囲である必要があります。このプロパティのデフォルト値は0.0です。 strokeEndプロパティと組み合わせて、このプロパティはストロークするパスのサブ領域を定義します。このプロパティの値は、ストロークを開始するパスに沿った相対ポイントを示し、strokeEndプロパティはエンドポイントを定義します。値0.0はパスの始まりを表し、値1.0はパスの終わりを表します。間の値は、パスの長さに沿って直線的に解釈されます。

例：

let path = UIBezierPath(roundedRect: bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
let mask = CAShapeLayer()
mask.path = path.CGPath
mask.strokeColor = UIColor.redColor().CGColor
mask.strokeStart = 0.45
mask.strokeEnd = 0.92
self.layer.mask = mask
2
Anindya Sengupta

以下は、既存のUIViewに沿って境界線を適用するためのSwift 4.2で動作します。

extension UIView {
    enum Side {
        case top
        case bottom
        case left
        case right
    }

    func addBorder(to side: Side, color: UIColor, borderWidth: CGFloat) {
        let subLayer = CALayer()
        subLayer.borderColor = color.cgColor
        subLayer.borderWidth = borderWidth
        let Origin = findOrigin(side: side, borderWidth: borderWidth)
        let size = findSize(side: side, borderWidth: borderWidth)
        subLayer.frame = CGRect(Origin: Origin, size: size)
        layer.addSublayer(subLayer)
    }

    private func findOrigin(side: Side, borderWidth: CGFloat) -> CGPoint {
        switch side {
        case .right:
            return CGPoint(x: frame.maxX - borderWidth, y: 0)
        case .bottom:
            return CGPoint(x: 0, y: frame.maxY - borderWidth)
        default:
            return .zero
        }
    }

    private func findSize(side: Side, borderWidth: CGFloat) -> CGSize {
        switch side {
        case .left, .right:
            return CGSize(width: borderWidth, height: frame.size.height)
        case .top, .bottom:
            return CGSize(width: frame.size.width, height: borderWidth)
        }
    }
}

そして、あなたはこれでそれを呼び出すことができます：

myView.addBorder(to: .left, color: .black, borderWidth: 2.0)

何が起こっているのか

  • ユーザーは、Sideおよびcolorとともに、enumで定義されているborderWidthを提供します。
  • 新しいサブレイヤーが作成され、borderColorおよびborderWidthが与えられます
  • 側で決定されるように、原点が計算されます
  • サイズも計算され、サイドによって決定されます
  • 最後に、レイヤーにフレームが与えられ、サブレイヤーとして追加されます
0
CodeBender