स्विफ्ट - कोने की त्रिज्या और ड्रॉप शैडो के साथ समस्याएं

Question

मैं गोल कोनों और एक ड्रॉप शैडो के साथ एक बटन बनाने की कोशिश कर रहा हूं । कोई फर्क नहीं पड़ता कि मैं कैसे स्विच करता हूं, बटन सही ढंग से प्रदर्शित नहीं होगा। मैंने कोशिश की है masksToBounds = falseऔर masksToBounds = true, लेकिन या तो कोने त्रिज्या काम करता है और छाया नहीं करता है या छाया काम करता है और कोने त्रिज्या बटन के कोनों को क्लिप नहीं करता है।

import UIKit
import QuartzCore

@IBDesignable
class Button : UIButton
{
    @IBInspectable var masksToBounds: Bool    = false                {didSet{updateLayerProperties()}}
    @IBInspectable var cornerRadius : CGFloat = 0                    {didSet{updateLayerProperties()}}
    @IBInspectable var borderWidth  : CGFloat = 0                    {didSet{updateLayerProperties()}}
    @IBInspectable var borderColor  : UIColor = UIColor.clearColor() {didSet{updateLayerProperties()}}
    @IBInspectable var shadowColor  : UIColor = UIColor.clearColor() {didSet{updateLayerProperties()}}
    @IBInspectable var shadowOpacity: CGFloat = 0                    {didSet{updateLayerProperties()}}
    @IBInspectable var shadowRadius : CGFloat = 0                    {didSet{updateLayerProperties()}}
    @IBInspectable var shadowOffset : CGSize  = CGSizeMake(0, 0)     {didSet{updateLayerProperties()}}

    override func drawRect(rect: CGRect)
    {
        updateLayerProperties()
    }

    func updateLayerProperties()
    {
        self.layer.masksToBounds = masksToBounds
        self.layer.cornerRadius = cornerRadius
        self.layer.borderWidth = borderWidth
        self.layer.borderColor = borderColor.CGColor
        self.layer.shadowColor = shadowColor.CGColor
        self.layer.shadowOpacity = CFloat(shadowOpacity)
        self.layer.shadowRadius = shadowRadius
        self.layer.shadowOffset = shadowOffset
    }
}

Comments

आप अलग-अलग परतों पर छाया और कतरन डालना चाहते हैं। और परत गुणों को स्थापित करना drawRectबहुत अच्छा विचार नहीं है। उन्हें अंदर करने के लिए बेहतर है initWithCoder।

— डेविड बेरी

बस यहाँ किसी के लिए भी जाना, जैसा कि अक्सर बहुत पुराने प्रश्नों के साथ होता है, यहाँ शीर्ष उत्तर जबकि आम तौर पर सही अब कुछ महत्वपूर्ण गलतियाँ हैं । (मैं एक सही उत्तर में डालता हूं।) ज्यादातर लोग, विशेष रूप से मुझे, आँख बंद करके कॉपी करते हैं और शीर्ष SO उत्तर से चिपकाते हैं - अगर यह बहुत पुराना है तो सावधान रहें ! (यह अब 2020 है - किसी को 5 साल में मेरे जवाब को बदलना होगा!)

— फेटी

Answer 1

निम्नलिखित स्विफ्ट 5 / iOS 12 कोड दिखाता है कि कैसे एक उपवर्ग सेट करना है UIButtonजो गोल कोनों और छाया के साथ उदाहरण बनाने की अनुमति देता है:

import UIKit

final class CustomButton: UIButton {

    private var shadowLayer: CAShapeLayer!

    override func layoutSubviews() {
        super.layoutSubviews()

        if shadowLayer == nil {
            shadowLayer = CAShapeLayer()
            shadowLayer.path = UIBezierPath(roundedRect: bounds, cornerRadius: 12).cgPath
            shadowLayer.fillColor = UIColor.white.cgColor

            shadowLayer.shadowColor = UIColor.darkGray.cgColor
            shadowLayer.shadowPath = shadowLayer.path
            shadowLayer.shadowOffset = CGSize(width: 2.0, height: 2.0)
            shadowLayer.shadowOpacity = 0.8
            shadowLayer.shadowRadius = 2

            layer.insertSublayer(shadowLayer, at: 0)
            //layer.insertSublayer(shadowLayer, below: nil) // also works
        }        
    }

}

अपनी आवश्यकताओं के अनुसार, आप UIButtonअपने स्टोरीबोर्ड में एक जोड़ सकते हैं और इसकी कक्षा सेट CustomButtonकर सकते हैं या आप CustomButtonप्रोग्रामेटिक रूप से एक उदाहरण बना सकते हैं । निम्न UIViewControllerकार्यान्वयन दिखाता है कि CustomButtonप्रोग्राम को कैसे बनाया जाए और उसका उपयोग कैसे किया जाए :

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let button = CustomButton(type: .system)
        button.setTitle("Button", for: .normal)
        view.addSubview(button)

        button.translatesAutoresizingMaskIntoConstraints = false
        let horizontalConstraint = button.centerXAnchor.constraint(equalTo: view.centerXAnchor)
        let verticalConstraint = button.centerYAnchor.constraint(equalTo: view.centerYAnchor)        
        let widthConstraint = button.widthAnchor.constraint(equalToConstant: 100)
        let heightConstraint = button.heightAnchor.constraint(equalToConstant: 100)
        NSLayoutConstraint.activate([horizontalConstraint, verticalConstraint, widthConstraint, heightConstraint])
    }

}

---

पिछला कोड iPhone सिम्युलेटर में नीचे की छवि बनाता है:

Comments

iOS के साथ मुझे अपने पुराने कार्यान्वयन में समस्या थी, अब यह काम करता है। धन्यवाद!

— carlodonz

आप अपने मुख्य दृश्य नियंत्रक @POB से कक्षा को कैसे कहते हैं?

— एलईडी

क्या छायावाद को ट्रिम करने का एक तरीका है, केवल दृश्य भाग को रखना?

— जोहान टिंगबैक 20

चूंकि शैडोलेयर बटन की अपनी परत की एक उप-परत है, जिसे masksToBounds = YESगोल कोनों को दिखाना है, तो क्या छाया भी बंद नहीं होगी?

— मैटसन

यह काम करता है, लेकिन मैं अब बटन की पृष्ठभूमि को बदलने में सक्षम नहीं हूं। यह शायद शैडोलेयर.फिलकॉलर की वजह से है। आपकी क्या सलाह है? धन्यवाद !

— ग्रेफॉक्स

Answer 2

कुछ छाया और गोल कोनों के साथ मेरा कस्टम बटन , मैं इसे प्रोग्रामेटिक रूप से छूने की आवश्यकता के साथ सीधे उपयोग करता हूं ।Storyboard

स्विफ्ट 4

class RoundedButtonWithShadow: UIButton {
    override func awakeFromNib() {
        super.awakeFromNib()
        self.layer.masksToBounds = false
        self.layer.cornerRadius = self.frame.height/2
        self.layer.shadowColor = UIColor.black.cgColor
        self.layer.shadowPath = UIBezierPath(roundedRect: self.bounds, cornerRadius: self.layer.cornerRadius).cgPath
        self.layer.shadowOffset = CGSize(width: 0.0, height: 3.0)
        self.layer.shadowOpacity = 0.5
        self.layer.shadowRadius = 1.0
    }
}

Comments

जल्द और आसान।

— देवबत १०

मेरे लिए इसने चाल चली जब मैंने कोड को फिर से रखा layoutSubviews()।

— यश बेदी

Answer 3

इमानौ की पोस्ट पर विस्तार करने के लिए, कस्टम बटन क्लास में छाया की परत को प्रोग्रामेटिक रूप से जोड़ना संभव है

@IBDesignable class CustomButton: UIButton {
    var shadowAdded: Bool = false

    @IBInspectable var cornerRadius: CGFloat = 0 {
        didSet {
            layer.cornerRadius = cornerRadius
            layer.masksToBounds = cornerRadius > 0
        }
    }

    override func drawRect(rect: CGRect) {
        super.drawRect(rect)

        if shadowAdded { return }
        shadowAdded = true

        let shadowLayer = UIView(frame: self.frame)
        shadowLayer.backgroundColor = UIColor.clearColor()
        shadowLayer.layer.shadowColor = UIColor.darkGrayColor().CGColor
        shadowLayer.layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: self.cornerRadius).CGPath
        shadowLayer.layer.shadowOffset = CGSize(width: 1.0, height: 1.0)
        shadowLayer.layer.shadowOpacity = 0.5
        shadowLayer.layer.shadowRadius = 1
        shadowLayer.layer.masksToBounds = true
        shadowLayer.clipsToBounds = false

        self.superview?.addSubview(shadowLayer)
        self.superview?.bringSubviewToFront(self)
    }
}

Comments

आप परत की छाया को मास्क कर रहे हैं और मैं वास्तव में छाया दृश्य को बटन के पर्यवेक्षण पर रखने की अनुशंसा नहीं करूंगा।

— मैटसन

Answer 4

अधिक उपयोगी और सुसंगत बटन प्राप्त करने का एक वैकल्पिक तरीका।

स्विफ्ट 2:

func getImageWithColor(color: UIColor, size: CGSize, cornerRadius:CGFloat) -> UIImage {
    let rect = CGRectMake(0, 0, size.width, size.height)
    UIGraphicsBeginImageContextWithOptions(size, false, 1)
    UIBezierPath(
        roundedRect: rect,
        cornerRadius: cornerRadius
        ).addClip()
    color.setFill()
    UIRectFill(rect)
    let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image
}

let button = UIButton(type: .Custom)
button.frame = CGRectMake(20, 20, 200, 50)
button.setTitle("My Button", forState: UIControlState.Normal)
button.setTitleColor(UIColor.blackColor(), forState: UIControlState.Normal)
self.addSubview(button)

let image = getImageWithColor(UIColor.whiteColor(), size: button.frame.size, cornerRadius: 5)
button.setBackgroundImage(image, forState: UIControlState.Normal)

button.layer.shadowRadius = 5
button.layer.shadowColor = UIColor.blackColor().CGColor
button.layer.shadowOpacity = 0.5
button.layer.shadowOffset = CGSizeMake(0, 1)
button.layer.masksToBounds = false

स्विफ्ट 3:

func getImageWithColor(_ color: UIColor, size: CGSize, cornerRadius:CGFloat) -> UIImage? {
    let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
    UIGraphicsBeginImageContextWithOptions(size, false, 0)
    color.setFill()
    UIBezierPath(roundedRect: rect, cornerRadius: cornerRadius).addClip()
    color.setFill()
    UIRectFill(rect)
    let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
    UIGraphicsEndImageContext()
    return image
}

let button = UIButton(type: .custom)
button.frame = CGRect(x:20, y:20, width:200, height:50)
button.setTitle("My Button", for: .normal)
button.setTitleColor(UIColor.black, for: .normal)
self.addSubview(button)

if let image = getImageWithColor(UIColor.white, size: button.frame.size, cornerRadius: 5) {
    button.setBackgroundImage(image, for: .normal)
}

button.layer.shadowRadius = 5
button.layer.shadowColor = UIColor.black.cgColor
button.layer.shadowOpacity = 0.5
button.layer.shadowOffset = CGSize(width:0, height:1)
button.layer.masksToBounds = false

Comments

यह तरीका सबसे अच्छा है क्योंकि आपके पास अलग-अलग पृष्ठभूमि का रंग हो सकता है। असामान्य और हाइलाइट किया गया

— रयान

अच्छा लगा। मेरे बटन में काम करने वाले बैकग्राउंड कलर, कॉर्नर रेडियस और शैडो को पाने के कई अलग-अलग तरीकों की कोशिश की, लेकिन यह एकमात्र तरीका था जिसने काम किया! धन्यवाद!

— हैरी ब्लूम

यह सही समाधान है, इसके लिए धन्यवाद! एक नोट, यदि यूआईबेटन को यूआईटेबल व्यूसेल के अंदर इस्तेमाल करते हैं, तो प्रोग्रामेटिक रूप से, इसे लेआउटसुब्यू () के अंदर रखना होगा।

— ब्रा.सैकेन

Answer 5

किसी भी दृश्य का समर्थन करने के लिए इसे फिर से दिखाया गया है। इस से अपने दृष्टिकोण को उपवर्गित करें और इसमें गोल कोने होने चाहिए। यदि आप इस दृश्य के उप-भाग के रूप में एक UIVisualEffectView जैसा कुछ जोड़ते हैं, तो आपको उस UIVisualEffectView पर उसी गोल कोनों का उपयोग करने की आवश्यकता है या इसमें गोल कोने नहीं होंगे।

/// Inspiration: https://stackoverflow.com/a/25475536/129202
class ViewWithRoundedcornersAndShadow: UIView {
    private var theShadowLayer: CAShapeLayer?

    override func layoutSubviews() {
        super.layoutSubviews()

        if self.theShadowLayer == nil {
            let rounding = CGFloat.init(22.0)

            let shadowLayer = CAShapeLayer.init()
            self.theShadowLayer = shadowLayer
            shadowLayer.path = UIBezierPath.init(roundedRect: bounds, cornerRadius: rounding).cgPath
            shadowLayer.fillColor = UIColor.clear.cgColor

            shadowLayer.shadowPath = shadowLayer.path
            shadowLayer.shadowColor = UIColor.black.cgColor
            shadowLayer.shadowRadius = CGFloat.init(3.0)
            shadowLayer.shadowOpacity = Float.init(0.2)
            shadowLayer.shadowOffset = CGSize.init(width: 0.0, height: 4.0)

            self.layer.insertSublayer(shadowLayer, at: 0)
        }
    }
}

Answer 6

"UIBezierPath" की स्विफ्ट 5 और कोई ज़रूरत नहीं

    view.layer.cornerRadius = 15
    view.clipsToBounds = true
    view.layer.masksToBounds = false
    view.layer.shadowRadius = 7
    view.layer.shadowOpacity = 0.6
    view.layer.shadowOffset = CGSize(width: 0, height: 5)
    view.layer.shadowColor = UIColor.red.cgColor

Comments

यह कभी भी किसी भी कोने के दायरे को देखने के लिए नहीं जोड़ता है और जिस कारण से आपको UIBezierPathउस विशेष दृश्य के पुन: उपयोग की आवश्यकता होती है, प्रदर्शन के कारणों की आवश्यकता होती है।

— शार्क

@SharkesMonken "कभी नहीं" वास्तव में !!!! ? कृपया एक बार फिर से देखें। मैं अपने पूरे प्रोजेक्ट में इस पद्धति का उपयोग कर रहा हूं। और अगर आपको कोई संदेह है, तो कृपया इस वीडियो की जाँच करें youtu.be/5qdF5ocDU7w

— हरि आर कृष्णा

काम नहीं कर रहा; cornerRadius का कोई प्रभाव नहीं है

— अमृत ​​एंग्री

कृपया वीडियो देखें

— हरि आर कृष्णा

Answer 7

स्विफ्ट 3 में एक गोलाकार बटन के साथ PiterPan के उत्तर को बेहतर बनाने और एक वास्तविक छाया दिखाने के लिए (न केवल एक धब्बा के साथ एक पृष्ठभूमि):

override func viewDidLoad() {
    super.viewDidLoad()
    myButton.layer.masksToBounds = false
    myButton.layer.cornerRadius = myButton.frame.height/2
    myButton.clipsToBounds = true
}

override func viewDidLayoutSubviews() {
    addShadowForRoundedButton(view: self.view, button: myButton, opacity: 0.5)
}

func addShadowForRoundedButton(view: UIView, button: UIButton, opacity: Float = 1) {
    let shadowView = UIView()
    shadowView.backgroundColor = UIColor.black
    shadowView.layer.opacity = opacity
    shadowView.layer.shadowRadius = 5
    shadowView.layer.shadowOpacity = 0.35
    shadowView.layer.shadowOffset = CGSize(width: 0, height: 0)
    shadowView.layer.cornerRadius = button.bounds.size.width / 2
    shadowView.frame = CGRect(origin: CGPoint(x: button.frame.origin.x, y: button.frame.origin.y), size: CGSize(width: button.bounds.width, height: button.bounds.height))
    self.view.addSubview(shadowView)
    view.bringSubview(toFront: button)
}

Answer 8

यहाँ समाधान है कि काम करेगा!

extension UIView {

    func applyShadowWithCornerRadius(color:UIColor, opacity:Float, radius: CGFloat, edge:AIEdge, shadowSpace:CGFloat)    {

        var sizeOffset:CGSize = CGSize.zero
        switch edge {
        case .Top:
            sizeOffset = CGSize(width: 0, height: -shadowSpace)
        case .Left:
            sizeOffset = CGSize(width: -shadowSpace, height: 0)
        case .Bottom:
            sizeOffset = CGSize(width: 0, height: shadowSpace)
        case .Right:
            sizeOffset = CGSize(width: shadowSpace, height: 0)


        case .Top_Left:
            sizeOffset = CGSize(width: -shadowSpace, height: -shadowSpace)
        case .Top_Right:
            sizeOffset = CGSize(width: shadowSpace, height: -shadowSpace)
        case .Bottom_Left:
            sizeOffset = CGSize(width: -shadowSpace, height: shadowSpace)
        case .Bottom_Right:
            sizeOffset = CGSize(width: shadowSpace, height: shadowSpace)


        case .All:
            sizeOffset = CGSize(width: 0, height: 0)
        case .None:
            sizeOffset = CGSize.zero
        }

        self.layer.cornerRadius = self.frame.size.height / 2
        self.layer.masksToBounds = true;

        self.layer.shadowColor = color.cgColor
        self.layer.shadowOpacity = opacity
        self.layer.shadowOffset = sizeOffset
        self.layer.shadowRadius = radius
        self.layer.masksToBounds = false

        self.layer.shadowPath = UIBezierPath(roundedRect:self.bounds, cornerRadius:self.layer.cornerRadius).cgPath
    }
}

enum AIEdge:Int {
    case
    Top,
    Left,
    Bottom,
    Right,
    Top_Left,
    Top_Right,
    Bottom_Left,
    Bottom_Right,
    All,
    None
}

अंत में, नीचे के अनुसार कोने त्रिज्या कॉल के साथ छाया लागू करने के लिए:

viewRounded.applyShadowWithCornerRadius(color: .gray, opacity: 1, radius: 15, edge: AIEdge.All, shadowSpace: 15)

परिणाम छवि

अद्यतन : यदि आप अपेक्षित आउटपुट नहीं देखते हैं, तो मुख्य थ्रेड से एक्सटेंशन विधि को कॉल करने का प्रयास करें , यह सुनिश्चित करने के लिए काम करेगा!

DispatchQueue.main.async {
    viewRounded.applyShadowWithCornerRadius(color: .gray, opacity: 1, radius: 15, edge: AIEdge.All, shadowSpace: 15)
}

Answer 9

अगर किसी को स्विफ्ट 3.0 में गोल बटन के लिए छाया जोड़ने की आवश्यकता है , तो यह करने के लिए एक अच्छा तरीका है।

func addShadowForRoundedButton(view: UIView, button: UIButton, shadowColor: UIColor, shadowOffset: CGSize, opacity: Float = 1) {
    let shadowView = UIView()
    shadowView.backgroundColor = shadowColor
    shadowView.layer.opacity = opacity
    shadowView.layer.cornerRadius = button.bounds.size.width / 2
    shadowView.frame = CGRect(origin: CGPoint(x: button.frame.origin.x + shadowOffset.width, y: button.frame.origin.y + shadowOffset.height), size: CGSize(width: button.bouds.width, height: button.bounds.height))
    self.view.addSubview(shadowView)
    view.bringSubview(toFront: button)
}

इस विधि func viewDidLayoutSubviews()को bellow के रूप में उपयोग करें :

override func viewDidLayoutSubviews() {
    addShadowForRoundedButton(view: self.view, button: button, shadowColor: .black, shadowOffset: CGSize(width: 2, height: 2), opacity: 0.5)
}

इस विधि का प्रभाव है:

Answer 10

छाया और कोने के दायरे को छोड़ने के लिए विस्तार

extension UIView {

func dropShadow(color: UIColor, opacity: Float = 0.5, offSet: CGSize, shadowRadius: CGFloat = 1, scale: Bool = true, cornerRadius: CGFloat) {
    let shadowLayer = CAShapeLayer()
    shadowLayer.path = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius).cgPath
    shadowLayer.fillColor = UIColor.white.cgColor
    shadowLayer.shadowColor = color.cgColor
    shadowLayer.shadowPath = shadowLayer.path
    shadowLayer.shadowOffset = offSet
    shadowLayer.shadowOpacity = opacity
    shadowLayer.shadowRadius = shadowRadius
    layer.insertSublayer(shadowLayer, at: 0)
}

}

Answer 11

2020 सिंटैक्स के लिए सटीक समाधान

import UIKit
class ColorAndShadowButton: UIButton {
    override init(frame: CGRect) { super.init(frame: frame), common() }
    required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder), common() }
    private func common() {
        // UIButton is tricky: you MUST set the clear bg in bringup;  NOT in layout
        backgroundColor = .clear
        clipsToBounds = false
        self.layer.insertSublayer(backgroundAndShadow, below: layer)
    }
    
   lazy var colorAndShadow: CAShapeLayer = {
        let s = CAShapeLayer()
        // set your button color HERE (NOT on storyboard)
        s.fillColor = UIColor.black.cgColor
        // now set your shadow color/values
        s.shadowColor = UIColor.red.cgColor
        s.shadowOffset = CGSize(width: 0, height: 10)
        s.shadowOpacity = 1
        s.shadowRadius = 10
        // now add the shadow
        layer.insertSublayer(s, at: 0)
        return s
    }()
    
    override func layoutSubviews() {
        super.layoutSubviews()
        // you MUST layout these two EVERY layout cycle:
        colorAndShadow = bounds
        colorAndShadow = UIBezierPath(roundedRect: bounds, cornerRadius: 12).cgPath
    }
}

• ध्यान दें कि यहां बहुत पुराना शीर्ष उत्तर सही है लेकिन एक महत्वपूर्ण त्रुटि है

ध्यान दें कि UIButtonदुर्भाग्य से UIViewआईओएस से काफी अलग है ।

• आईओएस में एक अजीब व्यवहार के कारण, आपको प्रारंभ में पृष्ठभूमि रंग निर्धारित करना चाहिए (जो इस मामले में निश्चित रूप से स्पष्ट होना चाहिए) लेआउट में नहीं । आप इसे स्टोरीबोर्ड में स्पष्ट रूप से सेट कर सकते हैं (लेकिन आप आमतौर पर इसे कुछ ठोस रंग के लिए क्लिक करते हैं, ताकि आप इसे स्टोरीबोर्ड में काम करते समय देख सकें।)

आईओएस में छाया / गोलाई के सामान्य कॉम्बो एक वास्तविक दर्द हैं। इसी तरह के समाधान:

https://stackoverflow.com/a/57465440/294884 - छवि + गोलाकार + छाया
https://stackoverflow.com/a/41553784/294884 - दो-कोने की समस्या
https://stackoverflow.com/a/59092828/294884 - "छाया + छेद" या "ग्लोबॉक्स" समस्या
https://stackoverflow.com/a/57400842/294884 - "सीमा और अंतराल" समस्या
https://stackoverflow.com/a/57514286/294884 - मूल "जोड़ना" बेज़ियर्स

Answer 12

आप एक प्रोटोकॉल बना सकते हैं और उसे आपके अनुरूप कर सकते हैं UIView, UIButton, सेल या आप जो चाहें, जैसे:

protocol RoundedShadowable: class {
    var shadowLayer: CAShapeLayer? { get set }
    var layer: CALayer { get }
    var bounds: CGRect { get }
}
​
extension RoundedShadowable {
    func applyShadowOnce(withCornerRadius cornerRadius: CGFloat, andFillColor fillColor: UIColor) {
        if self.shadowLayer == nil {
            let shadowLayer = CAShapeLayer()
            shadowLayer.path = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius).cgPath
            shadowLayer.fillColor = fillColor.cgColor
            shadowLayer.shadowColor = UIColor.black.cgColor
            shadowLayer.shadowPath = shadowLayer.path
            shadowLayer.shadowOffset = CGSize(width: 0.0, height: 2.0)
            shadowLayer.shadowOpacity = 0.2
            shadowLayer.shadowRadius = 3
            self.layer.insertSublayer(shadowLayer, at: 0)
            self.shadowLayer = shadowLayer
        }
    }
}
​
class RoundShadowView: UIView, RoundedShadowable {

    var shadowLayer: CAShapeLayer?
    private let cornerRadius: CGFloat
    private let fillColor: UIColor

    init(cornerRadius: CGFloat, fillColor: UIColor) {
        self.cornerRadius = cornerRadius
        self.fillColor = fillColor
        super.init(frame: .zero)
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        self.applyShadowOnce(withCornerRadius: self.cornerRadius, andFillColor: self.fillColor)
    }
}
​
class RoundShadowButton: UIButton, RoundedShadowable {

    var shadowLayer: CAShapeLayer?
    private let cornerRadius: CGFloat
    private let fillColor: UIColor

    init(cornerRadius: CGFloat, fillColor: UIColor) {
        self.cornerRadius = cornerRadius
        self.fillColor = fillColor
        super.init(frame: .zero)
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        self.applyShadowOnce(withCornerRadius: self.cornerRadius, andFillColor: self.fillColor)
    }
}

Answer 13

CAShapeLayer और UIBezierPath का उपयोग करके हम छाया और कोने की त्रिज्या को आसानी से UIView और उससे प्राप्त वर्ग जैसे UIButton, UIImageView, UILabel आदि से जोड़ सकते हैं।

हम UIView Extension जोड़ेंगे और इसका अच्छा बिंदु यह है, इसे प्राप्त करने के लिए आपको केवल एक लाइन कोड लिखना होगा।

आप विशिष्ट कोने को गोल कर सकते हैं और अपनी परियोजना में बस यूआईईवीवाई एक्सटेंशन के नीचे जोड़ सकते हैं:

 extension UIView {

  func addShadow(shadowColor: UIColor, offSet: CGSize, opacity: Float, shadowRadius: 
  CGFloat, cornerRadius: CGFloat, corners: UIRectCorner, fillColor: UIColor = .white) {

    let shadowLayer = CAShapeLayer()
    let size = CGSize(width: cornerRadius, height: cornerRadius)
    let cgPath = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: size).cgPath //1
    shadowLayer.path = cgPath //2
    shadowLayer.fillColor = fillColor.cgColor //3
    shadowLayer.shadowColor = shadowColor.cgColor //4
    shadowLayer.shadowPath = cgPath
    shadowLayer.shadowOffset = offSet //5
    shadowLayer.shadowOpacity = opacity
    shadowLayer.shadowRadius = shadowRadius
    self.layer.addSublayer(shadowLayer)
  }
}

अब छाया और कॉर्नर त्रिज्या जोड़ने के लिए बस नीचे दिए गए कोड को लिखें

  self.myView.addShadow(shadowColor: .black, offSet: CGSize(width: 2.6, height: 2.6), 
  opacity: 0.8, shadowRadius: 5.0, cornerRadius: 20.0, corners: [.topRight, .topLeft], 
  fillColor: .red)

Answer 14

छाया के साथ कॉर्नर रेडियस

छोटा और सरल तरीका !!!!!

extension CALayer {
    func applyCornerRadiusShadow(
        color: UIColor = .black,
        alpha: Float = 0.5,
        x: CGFloat = 0,
        y: CGFloat = 2,
        blur: CGFloat = 4,
        spread: CGFloat = 0,
        cornerRadiusValue: CGFloat = 0)
    {
        cornerRadius = cornerRadiusValue
        shadowColor = color.cgColor
        shadowOpacity = alpha
        shadowOffset = CGSize(width: x, height: y)
        shadowRadius = blur / 2.0
        if spread == 0 {
            shadowPath = nil
        } else {
            let dx = -spread
            let rect = bounds.insetBy(dx: dx, dy: dx)
            shadowPath = UIBezierPath(rect: rect).cgPath
        }
    }

कोड का उपयोग

btn.layer.applyCornerRadiusShadow(color: .black, 
                            alpha: 0.38, 
                            x: 0, y: 3, 
                            blur: 10, 
                            spread: 0, 
                            cornerRadiusValue: 24)

कोई ज़रूरत नहीं है मास्कटबाउंड

कृपया सत्यापित करें कि क्लिपटॉब गलत है।

आउटपुट

Comments

कोड के लिए धन्यवाद, लेकिन मेरे लिए काम नहीं करता, क्यों? कृपया छवि की जाँच करें: imgur.com/dY5M3BL

— 18

@ Mc.Lover आपने मास्कटबाउंड का इस्तेमाल किया था? या क्लिप

— बजे पंकज भालला जूल