ios - UIView の外側 (内側ではなく) に境界線を追加します。

Question

次のようなビューでコードを使用してビューの境界線を追加する場合

self.layer.borderColor = [UIColor yellowColor].CGColor;
self.layer.borderWidth = 2.0f;

次のように、ビュー内に境界線が追加されます。ここに画像の説明を入力

右側のビューは元のビューです。ご覧のとおり、境界線で囲まれたビューの黒い領域は元のビューよりも少なくなっています。しかし、私が取得したいのは、次のような元のビューの外側の境界線です: ここに画像の説明を入力 . 黒い領域は元のものと同じですが、どうすれば実装できますか?

score 106 · Accepted Answer

残念ながら、境界線を外側に揃えるために設定できる小さなプロパティはありません。UIView のデフォルトの描画操作はその境界内に描画されるため、内側に合わせて描画されます。

頭に浮かぶ最も簡単な解決策は、境界線を適用するときに境界線幅のサイズで UIView を拡張することです。

CGFloat borderWidth = 2.0f;

self.frame = CGRectInset(self.frame, -borderWidth, -borderWidth);
self.layer.borderColor = [UIColor yellowColor].CGColor;
self.layer.borderWidth = borderWidth;

score 25 · Accepted Answer

わかりました、すでに受け入れられた答えがありますが、それを行うためのより良い方法があると思います.ビューより少し大きい新しいレイヤーを作成し、ビューのレイヤーの境界にマスクしないでください(実際にはデフォルトの動作）。サンプルコードは次のとおりです。

CALayer * externalBorder = [CALayer layer];
externalBorder.frame = CGRectMake(-1, -1, myView.frame.size.width+2, myView.frame.size.height+2);
externalBorder.borderColor = [UIColor blackColor].CGColor;
externalBorder.borderWidth = 1.0;

[myView.layer addSublayer:externalBorder];
myView.layer.masksToBounds = NO;

もちろん、これは、境界線を 1 単位の大きさにしたい場合です。さらに必要な場合はborderWidth、それに応じてレイヤーのフレームとフレームを調整します。CALayerこれは、がよりも軽くUIView、のフレームを変更する必要がないため、少し大きい 2 番目のビューを使用するよりも優れmyViewていますmyView。UIImageView

NB :私にとって、結果はシミュレーターでは完璧ではありませんでした (レイヤーが正確な位置になかったため、レイヤーの片側が厚い場合がありました) が、実際のデバイスで要求されたものとまったく同じでした。

編集

実際、私がNBで話している問題は、シミュレーターの画面を縮小したためであり、通常のサイズではまったく問題ありません。

それが役に立てば幸い

score 24 · Accepted Answer

Swift 実装の場合、これを UIView 拡張機能として追加できます。

extension UIView {

    struct Constants {
        static let ExternalBorderName = "externalBorder"
    }

    func addExternalBorder(borderWidth: CGFloat = 2.0, borderColor: UIColor = UIColor.whiteColor()) -> CALayer {
        let externalBorder = CALayer()
        externalBorder.frame = CGRectMake(-borderWidth, -borderWidth, frame.size.width + 2 * borderWidth, frame.size.height + 2 * borderWidth)
        externalBorder.borderColor = borderColor.CGColor
        externalBorder.borderWidth = borderWidth
        externalBorder.name = Constants.ExternalBorderName

        layer.insertSublayer(externalBorder, atIndex: 0)
        layer.masksToBounds = false

        return externalBorder
    }

    func removeExternalBorders() {
        layer.sublayers?.filter() { $0.name == Constants.ExternalBorderName }.forEach() {
            $0.removeFromSuperlayer()
        }
    }

    func removeExternalBorder(externalBorder: CALayer) {
        guard externalBorder.name == Constants.ExternalBorderName else { return }
        externalBorder.removeFromSuperlayer()
    }

}

score 13 · Accepted Answer

それを行う直接的な方法はありません。いくつかの回避策を検討できます。

フレームを変更して増やし、ボーダーカラーを追加します
現在のビューの背後に大きなサイズのビューを追加して、境界線として表示します。ビューのカスタムクラスとして使用できます

明確な境界線（明確な境界線）が必要ない場合は、目的のために影に頼ることができます

[view1 setBackgroundColor:[UIColor blackColor]];
UIColor *color = [UIColor yellowColor];
view1.layer.shadowColor = [color CGColor];
view1.layer.shadowRadius = 10.0f;
view1.layer.shadowOpacity = 1;
view1.layer.shadowOffset = CGSizeZero;
view1.layer.masksToBounds = NO;

score 2 · Accepted Answer

ボーダーを追加する前に、ビューのフレームの幅と高さをボーダー幅で増やします。

float borderWidth = 2.0f
CGRect frame = self.frame;
frame.width += borderWidth;
frame.height += borderWidth;
 self.layer.borderColor = [UIColor yellowColor].CGColor;
 self.layer.borderWidth = 2.0f;

score 1 · Accepted Answer

実はとても簡単な解決策があります。両方を次のように設定するだけです：

view.layer.borderWidth = 5

view.layer.borderColor = UIColor(red: 1, green: 1, blue: 1, alpha: 0.5).cgColor

view.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 0.25).cgColor

score 0 · Accepted Answer

ストーリーボードで UI ビュー (メイン - SubscriptionAd) の周りに境界線を配置する方法は、別の UI ビュー (背景 - BackgroundAd) 内に配置することです。背景UIViewには、必要な境界線の色と一致する背景色があり、メインUIViewには、両側から制約値2があります。

背景ビューを ViewController にリンクし、背景色を変更して境界線のオンとオフを切り替えます。

ios - UIView の外側 (内側ではなく) に境界線を追加します。

11 に答える 11

Related

Reference