সুইফ্ট - কোণার ব্যাসার্ধ এবং ড্রপ ছায়া নিয়ে সমস্যা


86

আমি বৃত্তাকার কোণ এবং একটি ড্রপ ছায়া সহ একটি বোতাম তৈরি করার চেষ্টা করছি । আমি কীভাবে স্যুইচ আপ করি না কেন, বোতামটি সঠিকভাবে প্রদর্শিত হবে না। আমি চেষ্টা করেছি 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
    }
}

আপনি বিভিন্ন স্তরগুলিতে ছায়া এবং ক্লিপিং রাখতে চাইবেন। এবং স্তর বৈশিষ্ট্যগুলি সেট আপ করা drawRectখুব ভাল ধারণা নয়। এগুলি রাখা ভাল initWithCoder
ডেভিড বেরি

এখানে কেবল গুগল করা যে কারও জন্য, প্রায়শই খুব পুরানো প্রশ্নগুলির সাথে ঘটে থাকে, শীর্ষস্থানীয় উত্তরগুলি সাধারণত যখন সঠিক হয় তবে এখন কিছু সমালোচনামূলক ভুল রয়েছে । (আমি একটি সঠিক উত্তর দিয়েছি)) বেশিরভাগ লোকেরা, বিশেষত আমাকে, অন্ধভাবে অনুলিপি করে উপরের এসও উত্তরটি থেকে পেস্ট করুন - এটি খুব পুরানো কিউএ হলে সাবধান ! (এটি এখন ২০২০ - কেউ আমার উত্তরটি পাঁচ বছরে প্রতিস্থাপন করতে হবে!)
ফ্যাটি

যদি আপনার বোতামটির কোনও চিত্র থাকে তবে আপনাকে কোণার ব্যাসার্ধটিও যুক্ত করতে হবে বাটনটির চিত্র ভিউ। এটি সহজ উপায় হবে
গারনিক

উত্তর:


146

নিম্নলিখিত সুইফ্ট 5 / আইওএস 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])
    }

}

পূর্ববর্তী কোডটি আইফোন সিমুলেটারে নীচের চিত্রটি উত্পাদন করে:

এখানে চিত্র বর্ণনা লিখুন


আইওএস দিয়ে আমার আমার পুরানো প্রয়োগে সমস্যা ছিল, এখন এটি কার্যকর হয়। ধন্যবাদ!
কার্লোডোনজ

4
আপনি কীভাবে আপনার প্রধান ভিউ কন্ট্রোলার @ পিওবি থেকে ক্লাসটি কল করবেন?
নেতৃত্বে

4
ছায়াময়ী ছাঁটাইয়ের কোনও উপায় কি কেবল দৃশ্যমান অংশ রেখে?
জোহান টিংব্যাক

4
যেহেতু ছায়াময়কটি বোতামটির নিজস্ব স্তরটির একটি সাবলেয়ার, যা masksToBounds = YESবৃত্তাকার কোণগুলি দেখাতে হবে, সেই ছায়াটিও কি ছাঁটা যাবে না?
ম্যাটসসন

4
এটি ফাইন কাজ করে তবে আমি আর বোতামের পটভূমি পরিবর্তন করতে পারছি না। এটি সম্ভবত শ্যাডলায়ার.ফিল কালারের কারণে। আপনি কি পরামর্শ দিচ্ছেন? ধন্যবাদ!
গ্রেফক্স

36

কিছু ছায়া এবং বৃত্তাকার কোণগুলির সাথে আমার কাস্টম বোতামটি , আমি এটিকে সরাসরি প্রোগ্রামের মাধ্যমে স্পর্শ করার প্রয়োজন না করে ব্যবহার করি ।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
    }
}

এখানে চিত্র বর্ণনা লিখুন


দ্রুত এবং সহজ।
দেববোট 10

4
আমার পক্ষে কোডটি পুনরায় স্থাপন করার সময় এটি কৌশলটি করেছিল layoutSubviews()
যশ বেদী

14

Imanou এর পোস্টে প্রসারিত করার জন্য, কাস্টম বোতাম শ্রেণিতে ছায়া স্তর প্রোগ্রামক্রমে যুক্ত করা সম্ভব

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

4
আপনি স্তরের ছায়াকে মুখোশ দিচ্ছেন এবং আমি সত্যিই ছায়া দর্শনটি বোতামটির তত্ত্বাবধানে রাখার পরামর্শ দিচ্ছি না।
ম্যাটসসন

13

আরও ব্যবহারযোগ্য ও নিয়মিত বোতাম পাওয়ার বিকল্প উপায়।

সুইফট 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

4
সাধারণ এবং হাইলাইটের জন্য আপনার পৃথক পটভূমির রঙ থাকতে পারে এই পদ্ধতিটি সেরা
রায়ান হিটনার

4
ভাল লাগল আমার বোতামগুলিতে ব্যাকগ্রাউন্ড কালার, কর্নার ব্যাসার্ধ এবং ছায়া কাজ করার বিভিন্ন পদ্ধতির চেষ্টা করেছে, তবে এটিই কেবল কাজ করেছিল! ধন্যবাদ!
হ্যারি ব্লুম

এটি সঠিক সমাধান, এটির জন্য ধন্যবাদ! একটি নোট, যদি ইউআইটিবেলভিউসিলের অভ্যন্তরে ইউআইবাটন ব্যবহার করা হয় তবে প্রোগ্রামক্রমে, এটিকে লেআউটসুভিউ () এর ভিতরে রাখতে হবে।
ব্রা.স্ক্রিন

6

সুইফট 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

4
এটি সেই ভিউতে কোনও কোণার ব্যাসার্ধ যোগ করে না এবং কারণ হিসাবে আপনাকে UIBezierPathসেই নির্দিষ্ট দৃষ্টিভঙ্গিটি পুনরায় ব্যবহার করতে হবে এমন কারণে পারফরম্যান্সের কারণে আপনার প্রয়োজনীয় কারণটি।
মনকেন

4
পছন্দ করুন ? আবার একবার চেক করুন। আমি আমার প্রকল্পে এই পদ্ধতিটি ব্যবহার করছি। এবং যদি আপনার কোনও সন্দেহ থাকে তবে দয়া করে এই ভিডিওটি দেখুন youtu.be/5qdF5ocDU7w
হরি আর কৃষ্ণ

দয়া করে ভিডিওটি পরীক্ষা করুন
হরি আর কৃষ্ণ

বোতামটির জন্য আপনার পটভূমি চিত্র থাকলে এটি কাজ করে না। চিত্রগুলির কোণার ব্যাসার্ধটি সেট হয় না
ভেরুনগুলি

4

রিফ্যাক্টর এই কোন দৃশ্য সমর্থন। এটি থেকে আপনার ভিউ সাবক্লাস করুন এবং এটিতে গোলাকার কোণ হওয়া উচিত। যদি আপনি এই দৃশ্যের একটি সংক্ষিপ্তসার হিসাবে কোনও ইউআইভিউজুয়ালএফেক্টভিউয়ের মতো কিছু যুক্ত করেন তবে আপনাকে সম্ভবত সেই ইউআইভিউজুয়ালএফেক্টভিউতে একই বৃত্তাকার কোণগুলি ব্যবহার করতে হবে বা এটির বৃত্তাকার কোণগুলি নেই।

ইউআইভিউর জন্য ছায়াযুক্ত বৃত্তাকার কোণ - স্ক্রিনশট এছাড়াও একটি অস্পষ্ট ব্যবহার করে যা একটি সাধারণ ইউআইভিউজুয়ালএফেক্টভিউ যা গোলাকার কোণারও রয়েছে

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

2

পিটারপ্যানের উত্তরের উন্নতি করতে এবং সুইফট 3-এ একটি বিজ্ঞপ্তি বোতামের সাথে একটি আসল ছায়া (কেবল কোনও অস্পষ্টতার সাথে ব্যাকগ্রাউন্ড নয়) দেখানোর জন্য:

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

1

সমাধান যে এখানে কাজ করবে!


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

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()নমো হিসাবে এই পদ্ধতিটি ব্যবহার করুন :

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

এই পদ্ধতির প্রভাবটি হ'ল: এখানে চিত্র বর্ণনা লিখুন


0

ছায়া এবং কোণার ব্যাসার্ধ ছাড়ার জন্য বর্ধন

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

}

0

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 - বেসিক "যুক্ত" বেজিয়ার্স


-1

আপনি একটি প্রোটোকল তৈরি করতে পারেন এবং এটি আপনার কাছে ইউআইভিউ, ইউআইবাটন, সেল বা যা যা চান তার সাথে মানিয়ে নিতে পারেন:

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

-1

CAShapeLayer এবং UIBezierPath ব্যবহার করে আমরা সহজেই ইউআইভিউতে ছায়া এবং কোণার ব্যাসার্ধ যুক্ত করতে পারি এবং এটি থেকে উত্পন্ন ক্লাসের মতো ইউআইবিটন, ইউআইআইমেজভিউ, ইউআইএলবেল ইত্যাদি can

আমরা ইউআইভিউ এক্সটেনশন যুক্ত করব এবং এর ভাল পয়েন্টটি হ'ল এটি অর্জনের জন্য আপনার কেবলমাত্র একটি লাইন কোড লিখতে হবে।

আপনি নির্দিষ্ট কোণার পাশাপাশি গোল করতে পারেন আপনার প্রকল্পে ইউআইভিউ এক্সটেনশনের নীচে যুক্ত করুন:

 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)

-1

ছায়া সহ কর্নার ব্যাসার্ধ

ছোট ও সহজ উপায় !!!!!

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)

মাস্কটোবাউন্ডের দরকার নেই

ক্লিপটোবাউন্ডগুলি মিথ্যা কিনা তা যাচাই করুন।

আউটপুট

এখানে চিত্র বর্ণনা লিখুন


কোডের জন্য আপনাকে ধন্যবাদ তবে আমার পক্ষে কাজ করে না, কেন? দয়া করে চিত্রটি দেখুন: imgur.com/dY5M3BL
ম্যাক.লভোর

@ ম্যাক.লভার আপনি মাস্কটোবাউন্ড ব্যবহার করেছেন? বা ক্লিপস টোবাউন্ডস?
পঙ্কজ ভাললা
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.