বৃত্তাকার কোণ এবং ড্রপ ছায়া সহ ইউআইভিউ?


389

আমি একটি কাস্টম চাই UIView...: আমি কেবল গোলাকার কোণ এবং একটি হালকা ড্রপ ছায়া (কোনও আলোক প্রভাব ছাড়াই) সহ একটি ফাঁকা সাদা দর্শন চাইছিলাম। আমি সেগুলির প্রতিটি এক এক করে করতে পারি তবে স্বাভাবিক clipToBounds/ maskToBoundsবিবাদগুলি ঘটে।


1
যেহেতু আপনি নীচে একটি মন্তব্যে বলেছেন যে আপনি এই কাজটি কোরগ্রাফিক্স ব্যবহার করে পেয়েছেন, তাই আপনি কি সম্প্রদায়ের সাথে উত্তরটি ভাগ করে নিতে আপত্তি করবেন যাতে আপনি অন্যদের যেমন একই পরিস্থিতিতে সহায়তা করতে পারেন, যেমন তারা আপনাকে সহায়তা করার চেষ্টা করেছিল?
lnafziger

আমি দুঃখিত, এটি অনেক আগে ছিল এবং আমার আর উত্স নেই। আমি যা করেছি তা -আড্রাইরেক্ট: ওআইআইবিজেয়ারপথটি একটি আয়তক্ষেত্র আঁকতে ব্যবহার করুন এবং দৃশ্যের পিছনে লেয়ারে একটি ছায়া প্রয়োগ করুন ... যদি আমি সঠিকভাবে মনে করি তবে। :)
আদিত্য বৈদ্যম

5
গৃহীত উত্তর কাজ করে না!
onmyway133

1

1
@ সচবিজয় আপনার মন্তব্য করার আগে উভয় পোস্টের তারিখ যাচাই করা উচিত।
আদিত্য বৈদ্যম

উত্তর:


444

নিম্নলিখিত কোড স্নিপেট একটি সীমানা, সীমান্ত ব্যাসার্ধ, এবং অক্ষরের নীচের ছায়া যোগ করে v, একটি UIView:

// border radius
[v.layer setCornerRadius:30.0f];

// border
[v.layer setBorderColor:[UIColor lightGrayColor].CGColor];
[v.layer setBorderWidth:1.5f];

// drop shadow
[v.layer setShadowColor:[UIColor blackColor].CGColor];
[v.layer setShadowOpacity:0.8];
[v.layer setShadowRadius:3.0];
[v.layer setShadowOffset:CGSizeMake(2.0, 2.0)];

আপনার প্রয়োজন অনুসারে আপনি সেটিংস সামঞ্জস্য করতে পারেন।

এছাড়াও, আপনার প্রকল্পে কোয়ার্টজোর কাঠামো যুক্ত করুন এবং:

#import <QuartzCore/QuartzCore.h>

দেখুন আমার অন্যান্য জবাব সংক্রান্ত masksToBounds


বিঃদ্রঃ

এটি সব ক্ষেত্রে কার্যকর নাও হতে পারে। যদি আপনি দেখতে পান যে এই পদ্ধতিটি আপনি করছেন এমন অন্যান্য অঙ্কন ক্রিয়াকলাপে হস্তক্ষেপ করে, দয়া করে এই উত্তরটি দেখুন


83
তবে সমস্যাটি হ'ল আমি যখন কোণার ব্যাসার্ধ সেট করি তখন এটি মাস্কটোবাউন্ডস সেট করে: হ্যাঁ, যেখানে ছায়ার জন্য ক্লিপটোবাউন্ডস প্রয়োজন: না (যেখানে ক্লিপটোবাউন্ডগুলি মাস্কটোবাউন্ডের মতো একই কাজ করে)
আদিত্য বৈদ্যম

15
এখানে একই সমস্যা। যদি আমার পটভূমির রঙ থাকে তবে আমি চাই যে এটি বৃত্তাকার কোণগুলিতে ক্লিপ হয়ে যায়। এটি করার জন্য আমাকে মাস্কটোবাউন্ডস = সত্য ব্যবহার করতে হবে তবে ছায়া
অদৃশ্য হয়ে যায়

3
আমার মতো নবাবিদের জন্য: লেয়ার অবজেক্টে পদ্ধতিগুলি কল করার জন্য আমাকে আমার প্রকল্পে কোয়ার্টজোর ফ্রেমওয়ার্কটি আমদানি করতে হয়েছিল।
সিলিথক্রো

38
এটি সঠিকভাবে কাজ করার উপায়টি হল একটি অভ্যন্তরীণ ধারক ভিউ ব্যবহার করা, যা আপনার সীমানা এবং আপনার ব্যাকগ্রাউন্ডের রঙ উভয় কোণার ব্যাসার্ধের সাথে রাখবে। এই দৃশ্যটি সীমানায় ক্লিপ হবে! দ্বিতীয়, বাহ্যিক ধারক দৃশ্যে প্রথমটি থাকবে, একই ফ্রেম থাকবে, কেবল একটি ড্রপ ছায়া। আমি একটি সীমানা, ড্রপ ছায়া এবং কোণার ব্যাসার্ধ একত্রিত করতে বেশ কয়েকবার এটি করেছি। এটি সত্যিই বিরক্তিকর, তবে এটি সত্যই ভাল কাজ করে।
কেএমপুরফি 91

23
কাজ করে না। কেন এত বেশি ভোট রয়েছে তা ধারণা নেই। এটি কি পুরানো সংস্করণগুলিতে প্রযোজ্য ছিল?
ইয়ার্নিও

627

দ্রুতগতি

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

// corner radius
blueView.layer.cornerRadius = 10

// border
blueView.layer.borderWidth = 1.0
blueView.layer.borderColor = UIColor.black.cgColor

// shadow
blueView.layer.shadowColor = UIColor.black.cgColor
blueView.layer.shadowOffset = CGSize(width: 3, height: 3)
blueView.layer.shadowOpacity = 0.7
blueView.layer.shadowRadius = 4.0

বিকল্পগুলি অন্বেষণ করা

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

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

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

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

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

সমস্যা 1: ছায়াটি ক্লিপড হয়ে যায়

যদি সাবলেয়ার বা সাবভিউ (কোনও চিত্রের মতো) থাকে তবে যার বিষয়বস্তু আমরা আমাদের দেখার সীমানায় ক্লিপ করতে চাই?

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

আমরা এটি দিয়ে সম্পন্ন করতে পারি

blueView.layer.masksToBounds = true

(বিকল্পভাবে, একই ফলাফলblueView.clipsToBounds = true দেয় ।)

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

কিন্তু, ওরে না! ছায়াটিও ক্লিপ হয়ে গেল কারণ এটি সীমার বাইরে! কি করো? কি করো?

সমাধান

ছায়া এবং সীমানার জন্য পৃথক দর্শন ব্যবহার করুন। বেস দৃশ্যটি স্বচ্ছ এবং এর ছায়া রয়েছে। বর্ডার ভিউটি তার সীমানায় থাকা যে কোনও অন্য সাব-কন্টেন্টকে ক্লিপ করে।

// add the shadow to the base view
baseView.backgroundColor = UIColor.clear
baseView.layer.shadowColor = UIColor.black.cgColor
baseView.layer.shadowOffset = CGSize(width: 3, height: 3)
baseView.layer.shadowOpacity = 0.7
baseView.layer.shadowRadius = 4.0

// add the border to subview
let borderView = UIView()
borderView.frame = baseView.bounds
borderView.layer.cornerRadius = 10
borderView.layer.borderColor = UIColor.black.cgColor
borderView.layer.borderWidth = 1.0
borderView.layer.masksToBounds = true
baseView.addSubview(borderView)

// add any other subcontent that you want clipped
let otherSubContent = UIImageView()
otherSubContent.image = UIImage(named: "lion")
otherSubContent.frame = borderView.bounds
borderView.addSubview(otherSubContent)

এটি নিম্নলিখিত ফলাফল দেয়:

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

সমস্যা 2: খারাপ পারফরম্যান্স

বৃত্তাকার কোণ এবং ছায়া যুক্ত করা একটি পারফরম্যান্স হিট হতে পারে। আপনি ছায়ার জন্য একটি পূর্বনির্ধারিত পথ ব্যবহার করে এবং এটি জঞ্জাল করা হয়েছে তা উল্লেখ করে কর্মক্ষমতা উন্নত করতে পারেন। উপরের উদাহরণে নিম্নলিখিত কোড যুক্ত করা যেতে পারে।

baseView.layer.shadowPath = UIBezierPath(roundedRect: baseView.bounds, cornerRadius: 10).cgPath
baseView.layer.shouldRasterize = true
baseView.layer.rasterizationScale = UIScreen.main.scale

আরও বিস্তারিত জানার জন্য এই পোস্টটি দেখুন । এখানে এবং এখানে দেখুন ।

এই উত্তরটি সুইফট 4 এবং এক্সকোড 9 দিয়ে পরীক্ষা করা হয়েছিল।


1
@ EICaptainv2.0, আপনি যদি কেবল একটি সীমানা (এবং / অথবা কোণার ব্যাসার্ধ) চান তবে আপনার আলাদা ভিউ প্রয়োজন হবে না। আপনার পৃথক দৃষ্টিভঙ্গি এমন পরিস্থিতির জন্য যেখানে আপনার চারদিকে কোণ এবং ছায়া দরকার
সুরগাচ

2
এটি আমার পক্ষে কাজ করছে না। আমি যখন বেসভিউতে সাফ করার জন্য পিছনের গ্রাউন্ড কালার সেট করি তখন একটি ছায়া আর উপস্থিত হয় না। আমি কি ভুল করছি?
রুটার হুইজসম্যানস

3
কাজ করছে না, সেটিং baseView.backgroundColor = UIColor.clearছায়া সরিয়ে দেয়। আপনি যদি পটভূমির রঙ সেট করেন তবেই আপনি এটি দেখতে পাবেন।
আলেকসান্দার

2
আমার জন্য কাজ না।
মারকাস 21

4
এফওয়াইআই আমি প্রথম দিকে একই সমস্যাটি দেখছিলাম যা অন্যান্য কমেন্টাররা দেখছিল যেখানে ব্যাকগ্রাউন্ডের রঙটি পরিষ্কার থাকলে বেসভিউয়ের ছায়াটি প্রদর্শিত হচ্ছে না। সমস্যাটি হ'ল আমি কেবল কোডের প্রথম অংশটি (বেসভিউ স্টাফ) চালাচ্ছিলাম। একবার আমি বর্ডারভিউকে সাবউভিউ হিসাবে যুক্ত করে ছায়াটি প্রদর্শন শুরু করলাম। মনে হয় যে ছায়াটি প্রদর্শনের জন্য অবশ্যই এর ভিউ হায়ারার্কিতে কমপক্ষে একটি দৃশ্যমান সীমানা (বা পটভূমি) থাকতে হবে। সুতরাং অবিচ্ছিন্ন সীমানা ভিউ.লেয়ার.বর্ডার কালার (বা একটি স্বচ্ছ নয় এমন পটভূমির রঙ) সহ সীমানা ভিউ.লেয়ার.বর্ডারউইথ> = 0 থাকার বিষয়ে নিশ্চিত হন
মাইক ভোসেলার

79

এটি করার একটি উপায় হ'ল ড্রপ ছায়া সহ একটি দৃষ্টিতে বৃত্তাকার কোণগুলির সাথে ভিউটি রাখা।

UIView* roundedView = [[UIView alloc] initWithFrame: frame];
roundedView.layer.cornerRadius = 5.0;
roundedView.layer.masksToBounds = YES;

UIView* shadowView = [[UIView alloc] initWithFrame: frame];
shadowView.layer.shadowColor = [UIColor blackColor].CGColor;
shadowView.layer.shadowRadius = 5.0;
shadowView.layer.shadowOffset = CGSizeMake(3.0, 3.0);
shadowView.layer.shadowOpacity = 1.0;
[shadowView addSubview: roundedView];

তারপরে আপনি যেখানেই চান ছায়া ভিউ যুক্ত করতে পারেন।


5
অমিত, আপনাকে কেবল * রাউন্ডভিউ * এর জন্য মাস্কটোবাউন্ডস / ক্লিপটোবাউন্ডস = ইয়েস সেট করতে হবে। এটিকে শেডভিউতে সেট করবেন না। আমি উপরের কোডটি চেষ্টা করে দেখিনি তবে নিশ্চিতভাবেই জানি যে এই সমাধানটি অবশ্যই আদর্শ না হলেও কার্যকরভাবে কাজ করে। উচ্চতর ছায়া রেডিওয়াস কোণার ব্যাসার্ধের অঞ্চলগুলির যত্ন নেয়। শ্যাডো রেডিয়াসকে 0 বা 1 তে সেট করুন এবং আপনি কী বলতে চাইছেন তা আপনি লক্ষ্য করবেন।
দীপক জিএম

2
শ্যাডভিউ.লেয়ার.শাদোঅ্যাপেসিটির মতো কিছু = 0.6; নিখোঁজ
বো।

3
"শ্যাডভিউ.লেয়ার.অ্যাপটিসিটি = 1.0" "শ্যাডভিউ.লেয়ার.শ্যাডোঅ্যাপেসিটি = 1.0" হওয়া উচিত
ক্রিস

শেইডভিউ.লেয়ার.শাদোঅ্যাপেসিটি = 1.0 ব্যবহার করা হলে আইওএস 9 এ কাজ করে
মনসুরভ রুসলান

শেডোস্পেসিটির জন্য কোড ঠিক করা হয়েছে
সফটলিয়ন

63

পরীক্ষা করে দেখুন GitHub থেকে উদাহরণস্বরূপ প্রকল্পের নিশ্চিত করুন যে আপনি সঠিকভাবে উপাদান ব্যবহারের করতে।

কোনও অতিরিক্ত সাবভিউ বা সাবক্লাসিং ছাড়াই সাধারণ সুইফট 5 সমাধান:

extension UIView {

    func addShadow(offset: CGSize, color: UIColor, radius: CGFloat, opacity: Float) {
        layer.masksToBounds = false
        layer.shadowOffset = offset
        layer.shadowColor = color.cgColor
        layer.shadowRadius = radius
        layer.shadowOpacity = opacity

        let backgroundCGColor = backgroundColor?.cgColor
        backgroundColor = nil
        layer.backgroundColor =  backgroundCGColor
    }
}

নোট করুন যে আপনার কল করার আগে কোণার ব্যাসার্ধ এবং অন্যান্য বৈশিষ্ট্য সহ আপনার ভিউ সেট আপ করা উচিত addShadow

এর পরে, কেবল এটির থেকে এই কল করুন viewDidLoad:

button.addShadow(offset: CGSize.init(width: 0, height: 3), color: UIColor.black, radius: 2.0, opacity: 0.35)

সর্বশেষ ফলাফল:

ফলাফল

সুপার সহজ এবং সহজ!


এটি কি বোতামগুলিতে কাজ করে? কারণ এটি আমার শেষের দিকে কাজ করছে না।
সিজারে

আপনার প্রস্তাবিত সঠিক পদক্ষেপগুলি অনুসরণ করার চেষ্টা করেছি। তবে এখনও ভাগ্য নেই। আপনি কীভাবে এমনটি করেছেন যেটি আমার এবং অন্যান্য ব্যক্তির পক্ষে অসম্ভব বলে মনে হচ্ছে আপনি যদি কোনও নমুনা ভাগ করেন (গিথুবের উপর) তবে তা দুর্দান্ত হবে।
হেমাং

কেবল এই লাইনটি সরিয়েই এটি কাজ করার জন্য পরিচালিত layer.shadowPath = UIBezierPath.init(roundedRect: layer.bounds, cornerRadius: layer.cornerRadius).cgPath। যদিও কারও কাছে এর ব্যাখ্যা আছে কেন তা ব্যাখ্যা করতে পারছি না?
trupin

@ কার্নেলিয়াস একটি এক্সকোড প্রকল্পের উদাহরণ সহ আপডেট হওয়া উত্তরটি একবার নির্দ্বিধায় দেখতে পারেন। এটি কাজ করতে পারে না :)
সের্গেই গ্রিসিওভ

3
এটি আমার পক্ষেও কাজ করেছে, কেবলমাত্র আরও একটি বিষয় প্রয়োজন সমস্ত সংক্ষিপ্তসারকে ব্যাকগ্রাউন্ড-রঙ সাফ করার জন্য যাতে কেবল ধারক দর্শনটির দৃশ্যমান ব্যাকগ্রাউন্ড থাকে এবং এটি আমার সমস্যার সমাধান করে। ধন্যবাদ !! @SergeyGrischyov
Rishabh

42

এটি আমার পক্ষে কাজ করেছে। ট্রিকটি ব্যাকগ্রাউন্ডের রঙটি মূল ভিউ থেকে লেয়ারে স্থানান্তরিত করতে হয়েছিল।

CALayer *layer = view.layer;
layer.cornerRadius = 15.0f;
layer.masksToBounds = NO;

layer.shadowOffset = CGSizeMake(0, 3);
layer.shadowColor = [[UIColor blackColor] CGColor];
layer.shadowRadius = 2.0f;
layer.shadowOpacity = 0.35f;
layer.shadowPath = [[UIBezierPath bezierPathWithRoundedRect:layer.bounds cornerRadius:layer.cornerRadius] CGPath];

CGColorRef  bColor = view.backgroundColor.CGColor;
view.backgroundColor = nil;
layer.backgroundColor =  bColor ;

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

এই উত্তর হওয়া উচিত। পরিষ্কার এবং মার্জিত।
অ্যাক্সি

সেরা সমাধান এবং অবশ্যই মার্জিত!
রবার্তো ফেরাজ

বাহ, এটি আসলে কাজ করে। এটি কেন কাজ করা উচিত তা আমি বুঝতে পারছি না - আপনি ভাবেন যে এই দৃশ্যের ব্যাকগ্রাউন্ড কালারটি সঠিকভাবে আইওএস-এ লেয়ারে ফিরে আসবে back (এক্সকোড ৮, সুইফট ৩।) ভাল হয়েছে, এবং ধন্যবাদ। এটি গ্রহণযোগ্য উত্তর হওয়া উচিত।
Womble

আমি আপনার ব্যবহারের উত্তরটি UIView extensionএখানে একটি সুইফট ৩.১ সংস্করণ তৈরি করেছি - stackoverflow.com/a/43295741/1313939 অনুপ্রেরণার জন্য ধন্যবাদ!
সের্গেই গ্রিসিওভ

26

ধারক দেখার জন্য ছায়া পথ নির্ধারণ করার সময় আমি নিম্নলিখিত কৌশলটি ব্যবহার করে সমস্যার সমাধান করেছি:

[UIBezierPath bezierPathWithRoundedRect:cell.bounds cornerRadius:12]

খেয়াল করুন যে ছায়ায় দেওয়া পথটি ঘরের ব্যাকগ্রাউন্ডের মতো একই কোণার ব্যাসার্ধের সাথে একটি বৃত্তাকার আয়তক্ষেত্র রয়েছে:

//this is the border for the UIView that is added to a cell
cell.backgroundView.layer.cornerRadius = 12;
cell.backgroundView.layer.masksToBounds = YES;
cell.backgroundView.layer.borderColor = [UIColor darkGrayColor].CGColor;
cell.backgroundView.layer.borderWidth = 1;

//this is the shadow around the cell itself (cannot have round corners with borders and shadow, need to use two views
cell.layer.shadowRadius = 2;
cell.layer.cornerRadius = 12;
cell.layer.masksToBounds = NO;
[[cell layer] setShadowColor:[[UIColor darkGrayColor] CGColor]];

[[cell layer] setShadowOffset:CGSizeMake(0.0,0.0)];
[[cell layer] setShadowOpacity:1.0];

UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:cell.bounds cornerRadius:12];
[[cell layer] setShadowPath:[path CGPath]];

সেরা উত্তর কারণ এটি কোনও বৃত্তাকার কোণযুক্ত দৃশ্যে ছায়া যুক্ত করার সঠিক উপায়টি ব্যাখ্যা করে। ধন্যবাদ @ অ্যালেক্স স্টোন
প্রোগ্রামার

17

আপনি যদি গোলাকার cornersবনাম subviewsবনামের কারণে লড়াই করে চলেছেন masksToBoundsতবে আমার ফাংশনটি ব্যবহার করে দেখুন:

- (UIView*)putView:(UIView*)view insideShadowWithColor:(UIColor*)color andRadius:(CGFloat)shadowRadius andOffset:(CGSize)shadowOffset andOpacity:(CGFloat)shadowOpacity
{
    CGRect shadowFrame; // Modify this if needed
    shadowFrame.size.width = 0.f;
    shadowFrame.size.height = 0.f;
    shadowFrame.origin.x = 0.f;
    shadowFrame.origin.y = 0.f;
    UIView * shadow = [[UIView alloc] initWithFrame:shadowFrame];
    shadow.userInteractionEnabled = NO; // Modify this if needed
    shadow.layer.shadowColor = color.CGColor;
    shadow.layer.shadowOffset = shadowOffset;
    shadow.layer.shadowRadius = shadowRadius;
    shadow.layer.masksToBounds = NO;
    shadow.clipsToBounds = NO;
    shadow.layer.shadowOpacity = shadowOpacity;
    [view.superview insertSubview:shadow belowSubview:view];
    [shadow addSubview:view];
    return shadow;
}

আপনার দৃষ্টিতে এটি কল করুন। আপনার দৃষ্টিভঙ্গিটি গোলাকার কোণগুলি রয়েছে কিনা, এর আকার, আকারটি যাই হোক না কেন - একটি সুন্দর ছায়া আঁকবে।

কেবল ফাংশনের রিটার্ন মান রাখুন যাতে আপনি সারণীটি সরিয়ে ফেলতে চান (বা উদাহরণস্বরূপ ব্যবহার insertSubview:aboveView:)


এটা ঠিক কাজ করে। তবে যদি ভিউতে অঙ্গভঙ্গি সনাক্তকারী থাকে তবে এটি কার্যকর হবে না। আমরা কীভাবে এটি সমাধান করতে পারি?
manujmv

@ মানুজমভ আপনি কি সেই লাইনগুলি দেখেন যেখানে "// প্রয়োজনে এটি সংশোধন করুন" নির্দিষ্ট করা আছে? এটাই আপনার দরকার। छाया.userInterationEn सक्षम = ইয়েস;
daniel.gindi

@ মানুজমভিভ তারপর আপনার ভিউ এবং সাবভিউয়ের ফ্রেমগুলি পরীক্ষা করতে হবে তা দেখতে see কিছু সম্ভবত সেখানে ঠিক নেই। এই সঠিক কোডটি আমার জন্য খুব সুন্দর কিছু অ্যাপ্লিকেশনগুলিতে কাজ করে
daniel.gindi

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

@ কার্লোস এডুয়ার্ডো ল্যাপেজ আপনি কি shadow.userInteractionEnabled = NO; // Modify this if neededলাইনটি দেখতে পাচ্ছেন ? সুতরাং এটি প্রয়োজন যেখানে প্রয়োজন। userInteractionEnabledএটি একটি মৌলিক এবং জনপ্রিয় সম্পত্তি: আপনি ইতিমধ্যে পরিচিত হতে হবে :-)
ড্যানিয়েল.gind

12

সুইফট 4 এবং এক্সকোড 9 ব্যবহার করে , এটি ImageViewএকটি ড্রপ শেডো এবং একটি সীমানা দিয়ে গোল করার একটি কার্যকরী উদাহরণ ।

    //set dimensions and position of image (in this case, centered)
    let imageHeight: CGFloat = 150, imageWidth: CGFloat = 150
    let xPosition = (self.view.frame.width / 2) - (imageWidth / 2)
    let yPosition = (self.view.frame.height / 2) - (imageHeight / 2)

    //set desired corner radius
    let cornerRadius: CGFloat = 20

    //create container for the image
    let imageContainer = UIView(frame: CGRect(x: xPosition, y: yPosition, width: imageWidth, height: imageHeight))

    //configure the container
    imageContainer.clipsToBounds = false
    imageContainer.layer.shadowColor = UIColor.black.cgColor
    imageContainer.layer.shadowOpacity = 1
    imageContainer.layer.shadowOffset = CGSize(width: 3.0, height: 3.0)
    imageContainer.layer.shadowRadius = 5
    imageContainer.layer.shadowPath = UIBezierPath(roundedRect: imageContainer.bounds, cornerRadius: cornerRadius).cgPath

    //create imageView
    let imageView = UIImageView(frame: imageContainer.bounds)

    //configure the imageView
    imageView.clipsToBounds = true
    imageView.layer.cornerRadius = cornerRadius
    //add a border (if required)
    imageView.layer.borderColor = UIColor.black.cgColor
    imageView.layer.borderWidth = 1.0
    //set the image
    imageView.image = UIImage(named: "bird")

    //add the views to the superview
    view.addSubview(imageContainer)
    imageContainer.addSubview(imageView)

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

আপনি যদি চিত্রটি বিজ্ঞপ্তিযুক্ত করতে চান: (এবং সীমান্ত ছাড়াই প্রদর্শিত হবে)

let cornerRadius = imageWidth / 2

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


7

আমি ইউআইভিউতে একটি সহায়ক তৈরি করেছি

@interface UIView (Helper)

- (void)roundCornerswithRadius:(float)cornerRadius
               andShadowOffset:(float)shadowOffset;
@end

আপনি এটি এভাবে কল করতে পারেন

[self.view roundCornerswithRadius:5 andShadowOffset:5];

এখানে বাস্তবায়ন

- (void)roundCornerswithRadius:(float)cornerRadius
               andShadowOffset:(float)shadowOffset
{
    const float CORNER_RADIUS = cornerRadius;
    const float SHADOW_OFFSET = shadowOffset;
    const float SHADOW_OPACITY = 0.5;
    const float SHADOW_RADIUS = 3.0;

    UIView *superView = self.superview;

    CGRect oldBackgroundFrame = self.frame;
    [self removeFromSuperview];

    CGRect frameForShadowView = CGRectMake(0, 0, oldBackgroundFrame.size.width, oldBackgroundFrame.size.height);
    UIView *shadowView = [[UIView alloc] initWithFrame:frameForShadowView];
    [shadowView.layer setShadowOpacity:SHADOW_OPACITY];
    [shadowView.layer setShadowRadius:SHADOW_RADIUS];
    [shadowView.layer setShadowOffset:CGSizeMake(SHADOW_OFFSET, SHADOW_OFFSET)];

    [self.layer setCornerRadius:CORNER_RADIUS];
    [self.layer setMasksToBounds:YES];

    [shadowView addSubview:self];
    [superView addSubview:shadowView];

}

2
এটি একটি ভাল মার্জিত সমাধান। আপনার ভিউ ব্যবহারের আগে তার তত্ত্বাবধানে যুক্ত করা হয়েছে তা নিশ্চিত করুন। আমাকে ছায়ার উপর আরও নিয়ন্ত্রণ দেওয়ার জন্য আমি কিছু পরামিতি যুক্ত করেছি, তবে সামগ্রিকভাবে নিখুঁত কাজ করে। ধন্যবাদ!
অ্যারন ভেগ

এটি দুর্দান্ত সমাধান তবে এটি
অটোলেআউটটির

5

ছায়া সহ বৃত্তাকার কোণার দৃশ্যের পুরো দিন গবেষণা করার পরে, আমি আমার কাস্টম ইউভিউ ক্লাসটি এখানে পোস্ট করে আনন্দিত, এই প্রশ্নটি শেষ করার আশা করি:

RoundCornerShadowView.h

#import <UIKit/UIKit.h>

@interface RoundCornerShadowView : UIView

@end

RoundCornerShadowView.m

#import "RoundCornerShadowView.h"

@implementation RoundCornerShadowView

// *** must override this method, not the other method ***
// otherwise, the background corner doesn't disappear....
// @2015/05/29
-(void) layoutSubviews {
    [super layoutSubviews];//is must to ensure rightly layout children view

    //1. first, create Inner layer with content
    CALayer *innerView = [CALayer layer];
    innerView.frame = CGRectMake(0,0,self.bounds.size.width,self.bounds.size.height);
    //instead of: innerView.frame = self.frame;
    innerView.borderWidth = 1.0f;
    innerView.cornerRadius = 6.0f;
    innerView.masksToBounds = YES;
    innerView.borderColor = [[UIColor lightGrayColor] CGColor];
    innerView.backgroundColor = [[UIColor whiteColor] CGColor];
    //put the layer to the BOTTOM of layers is also a MUST step...
    //otherwise this layer will overlay the sub uiviews in current uiview...
    [self.layer insertSublayer:innerView atIndex:0];

    //2. then, create shadow with self layer
    self.layer.masksToBounds = NO;
    self.layer.shadowColor = [[UIColor darkGrayColor] CGColor];
    self.layer.shadowOpacity = 0.4f;
    //shadow length
    self.layer.shadowRadius = 2.0f;
    //no offset
    self.layer.shadowOffset = CGSizeMake(0, 0);
    //right down shadow
    //[self.layer setShadowOffset: CGSizeMake(1.0f, 1.0f)];

    //3. last but important, MUST clear current view background color, or the color will show in the corner!
    self.backgroundColor = [UIColor clearColor];
}

@end

সুতরাং, লক্ষ্য দর্শনে ভিউ বা নীচে সাবভিউ যুক্ত করার দরকার নেই, কেবলমাত্র বর্তমান দৃশ্যে একটি স্তর যুক্ত করুন এবং এটি সম্পূর্ণ করার জন্য 3 টি পদক্ষেপ করুন!

কোডটিতে থাকা মন্তব্যগুলিকে ঘনিষ্ঠভাবে দেখুন, এটি উপাদানটি বোঝার জন্য সহায়ক!


5

সুইফট 4-তে কিছু তাত্পর্যপূর্ণ পরীক্ষা করা হয়েছে

import UIKit

extension UIView {
    @IBInspectable var dropShadow: Bool {
        set{
            if newValue {
                layer.shadowColor = UIColor.black.cgColor
                layer.shadowOpacity = 0.4
                layer.shadowRadius = 1
                layer.shadowOffset = CGSize.zero
            } else {
                layer.shadowColor = UIColor.clear.cgColor
                layer.shadowOpacity = 0
                layer.shadowRadius = 0
                layer.shadowOffset = CGSize.zero
            }
        }
        get {
            return layer.shadowOpacity > 0
        }
    }
}

উত্পাদন

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

আপনি যদি এটিকে ইন্সপেক্টরটিতে এটি সক্ষম করে থাকেন:

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

এটি ব্যবহারকারীর সংজ্ঞায়িত রানটাইম অ্যাট্রিবিউট যুক্ত করবে, ফলস্বরূপ:

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

(আমি আগে যোগ করেছি cornerRadius = 8)

:)


5

আপনার ব্যবহার shadowViewএবং ব্যবহার করা দরকারroundView

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

shadowView

  • ব্যাকগ্রাউন্ড রঙ থাকতে হবে
  • পিছনে রাখা উচিত roundView
  • কৌশলটি হ'ল shadowViewকিছুটা অভ্যন্তরে বিন্যাস করা এবং এর ছায়াটি আলোকিত হওয়া দরকার। insetsযাতে shadowViewপুরোপুরি অদৃশ্য হয় তাই সামঞ্জস্য করুনroundView

roundView

  • ক্লিপ সাবউভিউ অবশ্যই

কোড

addSubviews(shadowView, roundView)
roundView.addSubviews(titleLabel, subtitleLabel, imageView)

// need inset
shadowView.pinEdges(view: self, inset: UIEdgeInsets(constraintInsets: 2))
roundView.pinEdges(view: self)

do {
  shadowView.backgroundColor = .white // need background
  let layer = shadowView.layer
  layer.shadowColor = UIColor.black.cgColor
  layer.shadowRadius = 3
  layer.shadowOffset = CGSize(width: 3, height: 3)
  layer.shadowOpacity = 0.7
  layer.shouldRasterize = true
}

do {
  roundView.backgroundColor = .white
  let layer = roundView.layer
  layer.masksToBounds = true
  layer.cornerRadius = 5
}

অথবা আপনি নির্দিষ্ট করে নীচে নীচে করতে পারেন clipToBounds/maskToBounds

layer.shadowColor = UIColor.gray.cgColor
layer.shadowOffset = CGSize(width: 3, height: 3)
layer.shadowOpacity = 0.8

4

সুইফট 3 এবং আইবিআই স্পেসটেবল সমাধান: অ্যাডির সমাধান থেকে
অনুপ্রাণিত

প্রথমে একটি ইউআইভিউ এক্সটেনশন তৈরি করুন:

//
//  UIView-Extension.swift
//  

import Foundation
import UIKit

@IBDesignable
extension UIView {
     // Shadow
     @IBInspectable var shadow: Bool {
          get {
               return layer.shadowOpacity > 0.0
          }
          set {
               if newValue == true {
                    self.addShadow()
               }
          }
     }

     fileprivate func addShadow(shadowColor: CGColor = UIColor.black.cgColor, shadowOffset: CGSize = CGSize(width: 3.0, height: 3.0), shadowOpacity: Float = 0.35, shadowRadius: CGFloat = 5.0) {
          let layer = self.layer
          layer.masksToBounds = false

          layer.shadowColor = shadowColor
          layer.shadowOffset = shadowOffset
          layer.shadowRadius = shadowRadius
          layer.shadowOpacity = shadowOpacity
          layer.shadowPath = UIBezierPath(roundedRect: layer.bounds, cornerRadius: layer.cornerRadius).cgPath

          let backgroundColor = self.backgroundColor?.cgColor
          self.backgroundColor = nil
          layer.backgroundColor =  backgroundColor
     }


     // Corner radius
     @IBInspectable var circle: Bool {
          get {
               return layer.cornerRadius == self.bounds.width*0.5
          }
          set {
               if newValue == true {
                    self.cornerRadius = self.bounds.width*0.5
               }
          }
     }

     @IBInspectable var cornerRadius: CGFloat {
          get {
               return self.layer.cornerRadius
          }

          set {
               self.layer.cornerRadius = newValue
          }
     }


     // Borders
     // Border width
     @IBInspectable
     public var borderWidth: CGFloat {
          set {
               layer.borderWidth = newValue
          }

          get {
               return layer.borderWidth
          }
     }

     // Border color
     @IBInspectable
     public var borderColor: UIColor? {
          set {
               layer.borderColor = newValue?.cgColor
          }

          get {
               if let borderColor = layer.borderColor {
                    return UIColor(cgColor: borderColor)
               }
               return nil
          }
     }
}

তারপরে, কেবল আপনার ইউআইভিউটি নীচের মত ইন্টারফেস বিল্ডার সেটিং শেডোকোণার ব্যাসার্ধে নির্বাচন করুন :

আপনার ইউআইভিউ ভিউ নির্বাচন করা হচ্ছে

কোণার ব্যাসার্ধ ও ছায়া সেট করা হচ্ছে

ফলাফল!

ফলাফল


এই থ্রেডের প্রতিটি "সমাধান" এর মতো এটি কেবল কার্যকর হয় না, অন্তত আইওএস 11.0 / সুইফট 4.1 এ নয় on
ইনসেসিটাস

থ্রেডের শুরুতে আপনি "সুইফট 3" পড়েছেন? সুতরাং, এর অর্থ এটি একটি সুইফট 3 সমাধান, আমি এটি সুইফট ৪.১ এ পরীক্ষা করিনি কারণ আমার আর এটির দরকার নেই। উত্তরটি সম্পাদনা করতে এবং নির্দ্বিধায় মুক্ত মনে করুন। ;) চিয়ার্স
থমস কলমন

3

এখানে মাস্কটোবাউন্ডস দ্বন্দ্ব সমস্যার সমাধান রয়েছে, এটি আমার পক্ষে কাজ করে।

আপনি কর্ডাররেডিয়াস / বর্ডার কালার / শ্যাডো সেট করার পরে, মাস্কটবাউন্ডগুলি কোনও হিসাবে সেট করুন:

v.layer.masksToBounds = NO;

এটি আমার জন্য কাজ করেছে !! ওএমজি আমি আপনার উপরের সমস্ত কৌশলগুলি প্রায় উত্তর দিয়েছি! ধন্যবাদ শাওপেং
মন্টডেস্কা

3

ছায়া + বর্ডার + কোণার ব্যাসার্ধ এখানে চিত্র বর্ণনা লিখুন

    scrollview.backgroundColor = [UIColor whiteColor]; 
    CALayer *ScrlViewLayer = [scrollview layer];
    [ScrlViewLayer setMasksToBounds:NO ];
    [ScrlViewLayer setShadowColor:[[UIColor lightGrayColor] CGColor]];
    [ScrlViewLayer setShadowOpacity:1.0 ];
    [ScrlViewLayer setShadowRadius:6.0 ];
    [ScrlViewLayer setShadowOffset:CGSizeMake( 0 , 0 )];
    [ScrlViewLayer setShouldRasterize:YES];
    [ScrlViewLayer setCornerRadius:5.0];
    [ScrlViewLayer setBorderColor:[UIColor lightGrayColor].CGColor];
    [ScrlViewLayer setBorderWidth:1.0];
    [ScrlViewLayer setShadowPath:[UIBezierPath bezierPathWithRect:scrollview.bounds].CGPath];

3

এখানে ইউআইভিউয়ের জন্য সুইফট 3-এ আমার সংস্করণটি রয়েছে

let corners:UIRectCorner = [.bottomLeft, .topRight]
let path = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
let mask = CAShapeLayer()

mask.path = path.cgPath
mask.fillColor = UIColor.white.cgColor

let shadowLayer = CAShapeLayer()
shadowLayer.shadowColor = UIColor.black.cgColor
shadowLayer.shadowOffset = CGSize(width: 0.0, height: 4.0)
shadowLayer.shadowRadius = 6.0
shadowLayer.shadowOpacity = 0.25
shadowLayer.shadowPath = mask.path

self.layer.insertSublayer(shadowLayer, at: 0)
self.layer.insertSublayer(mask, at: 1)

3

সুইফ্ট 4: ইউআইভিউর সাবক্লাস তৈরি করুন

class ShadowView: UIView {

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)

        // corner radius
        self.layer.cornerRadius = 10

        // border
        self.layer.borderWidth = 1.0
        self.layer.borderColor = UIColor.black.cgColor

        // shadow
        self.layer.shadowColor = UIColor.black.cgColor
        self.layer.shadowOffset = CGSize(width: 3, height: 3)
        self.layer.shadowOpacity = 0.7
        self.layer.shadowRadius = 4.0
    }

}

ব্যবহার..

ক্লাস শ্যাডো ভিউ ব্যবহার করুন


2

আচ্ছা আপনি যদি নিজের নিবগুলি পরিবর্তন করতে না চান এবং ডেভিড সি এর পরামর্শ অনুসারে শ্রেণিবদ্ধতা দেখতে না চান তবে এই পদ্ধতিটি এটি আপনার জন্য করবে। আপনার ইউআইআইমেজভিউতে বৃত্তাকার কোণ এবং ছায়া যুক্ত করতে কেবল এই পদ্ধতিটি ব্যবহার করুন, উদাহরণস্বরূপ:

[Utils roundCornersForImageView:myImageView withCornerRadius:6.0 
andShadowOffset:2.0];

! সুতরাং আমি আপনার নিব পরিবর্তন করতে এবং ছায়া প্রভাবের জন্য একটি ধারক ভিউ যুক্ত করার জন্য এবং ডেভিক সি কোড ব্যবহার করার পরামর্শ দেব।

+ (void)roundCornersForImageView:(UIImageView *)imageView 
withCornerRadius:(float)cornerRadius andShadowOffset:(float)shadowOffset
{
    const float CORNER_RADIUS = cornerRadius;
    const float BORDER_WIDTH = 1.0; 
    const float SHADOW_OFFSET = shadowOffset;
    const float SHADOW_OPACITY = 0.8;
    const float SHADOW_RADIUS = 3.0;

    //Our old image now is just background image view with shadow
    UIImageView *backgroundImageView = imageView;
    UIView *superView = backgroundImageView.superview;

    //Make wider actual visible rect taking into account shadow
    //offset
    CGRect oldBackgroundFrame = backgroundImageView.frame;
    CGRect newBackgroundFrame = CGRectMake(oldBackgroundFrame.origin.x, oldBackgroundFrame.origin.y, oldBackgroundFrame.size.width + SHADOW_OFFSET, oldBackgroundFrame.size.height + SHADOW_OFFSET);
    [backgroundImageView removeFromSuperview];
    backgroundImageView.frame = newBackgroundFrame;        

    //Make new UIImageView with rounded corners and put our old image
    CGRect frameForRoundedImageView = CGRectMake(0, 0, oldBackgroundFrame.size.width, oldBackgroundFrame.size.height);
    UIImageView *roundedImageView = [[UIImageView alloc]initWithFrame:frameForRoundedImageView];
    roundedImageView.image = imageView.image;
    [roundedImageView.layer setCornerRadius:CORNER_RADIUS];
    [roundedImageView.layer setBorderColor:[UIColor lightGrayColor].CGColor];        
    [roundedImageView.layer setBorderWidth:BORDER_WIDTH]; 
    [roundedImageView.layer setMasksToBounds:YES];

    //Set shadow preferences
    [backgroundImageView setImage:nil];
    [backgroundImageView.layer setShadowColor:[UIColor blackColor].CGColor];
    [backgroundImageView.layer setShadowOpacity:SHADOW_OPACITY];
    [backgroundImageView.layer setShadowRadius:SHADOW_RADIUS];
    [backgroundImageView.layer setShadowOffset:CGSizeMake(SHADOW_OFFSET, SHADOW_OFFSET)];   

    //Add out two image views back to the view hierarchy.
    [backgroundImageView addSubview:roundedImageView];
    [superView addSubview:backgroundImageView];   
}    

2

পুরানো থ্রেড এখনও বর্তমান ...

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

+ (UIView*)putView:(UIView*)view insideShadowWithColor:(CGColorRef)color 
                                 andRadius:(CGFloat)shadowRadius 
                                 andOffset:(CGSize)shadowOffset 
                                 andOpacity:(CGFloat)shadowOpacity
{
    // Must have same position like "view"
    UIView *shadow = [[UIView alloc] initWithFrame:view.frame]; 

    shadow.layer.contentsScale = [UIScreen mainScreen].scale;
    shadow.userInteractionEnabled = YES; // Modify this if needed
    shadow.layer.shadowColor = color;
    shadow.layer.shadowOffset = shadowOffset;
    shadow.layer.shadowRadius = shadowRadius;
    shadow.layer.masksToBounds = NO;
    shadow.clipsToBounds = NO;
    shadow.layer.shadowOpacity = shadowOpacity;
    shadow.layer.rasterizationScale = [UIScreen mainScreen].scale;
    shadow.layer.shouldRasterize = YES;

    [view.superview insertSubview:shadow belowSubview:view];
    [shadow addSubview:view];

    // Move view to the top left corner inside the shadowview 
    // ---> Buttons etc are working again :)
    view.frame = CGRectMake(0, 0, view.frame.size.width, view.frame.size.height);

    return shadow;
}

2

নিম্নলিখিতটি আমার পক্ষে সবচেয়ে ভাল কাজ করেছে (এই কোডটি ইউআইভিউ এক্সটেনশনের মধ্যে রয়েছে তাই স্ব স্ব এমন কিছু ইউআইভিউউকে বোঝায় যেখানে আমাদের অবশ্যই একটি ছায়া এবং বৃত্তাকার কোণ যুক্ত করতে হবে)

- (void)addShadowViewWithCornerRadius:(CGFloat)radius {

UIView *container = self.superview;

if (!container) {
    return;
}

UIView *shadowView = [[UIView alloc] init];
shadowView.translatesAutoresizingMaskIntoConstraints = NO;
shadowView.backgroundColor = [UIColor lightGrayColor];
shadowView.layer.cornerRadius = radius;
shadowView.layer.masksToBounds = YES;

[container addSubview:shadowView];
[container bringSubviewToFront:shadowView];

[container addConstraint:[NSLayoutConstraint constraintWithItem:shadowView
                                                      attribute:NSLayoutAttributeWidth
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:self
                                                      attribute:NSLayoutAttributeWidth
                                                     multiplier:1.0
                                                       constant:0.0]];
[container addConstraint:[NSLayoutConstraint constraintWithItem:shadowView
                                                      attribute:NSLayoutAttributeLeading
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:self
                                                      attribute:NSLayoutAttributeLeading
                                                     multiplier:1.0
                                                       constant:2.0]];

[container addConstraint:[NSLayoutConstraint constraintWithItem:shadowView
                                                      attribute:NSLayoutAttributeHeight
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:self
                                                      attribute:NSLayoutAttributeHeight
                                                     multiplier:1.0
                                                       constant:0.0]];
[container addConstraint:[NSLayoutConstraint constraintWithItem:shadowView
                                                      attribute:NSLayoutAttributeTop
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:self
                                                      attribute:NSLayoutAttributeTop
                                                     multiplier:1.0
                                                       constant:2.0]];
[container sendSubviewToBack:shadowView];
}

এটি এবং অন্যান্য কোড নমুনার মধ্যে মূল পার্থক্য এই একটি হিসাবে ছায়া দৃশ্য যোগ করে সহোদর দৃশ্য (ছায়া দেখুন subview যেমন বর্তমান দৃশ্য যোগ করার বিরুদ্ধে), যার ফলে কোন ভাবেই বিদ্যমান দৃশ্য অনুক্রমের পরিবর্তন করতে হবে দূর করে।


1

উপরের ডানিয়েলিন্দির উত্তরটি আমার পক্ষে কৌতুক করেছিল! (+1 ড্যানিয়েল) তবে, আমাকে ছোটখাটো সামঞ্জস্য করতে হয়েছিল - শ্যাডো ফ্রেমের আকারটি দেখতে ফ্রেমের আকারের মতো হতে হবে এবং ব্যবহারকারীর ইন্টারঅ্যাকশন সক্ষম করতে হবে। আপডেট হওয়া কোডটি এখানে:

+ (UIView*)putView:(UIView*)view insideShadowWithColor:(UIColor*)color andRadius:(CGFloat)shadowRadius andOffset:(CGSize)shadowOffset andOpacity:(CGFloat)shadowOpacity
{
    CGRect shadowFrame; // Modify this if needed

    // Modified this line
    shadowFrame.size = CGSizeMake(view.frame.size.width, view.frame.size.height);

    shadowFrame.origin.x = 0.f;
    shadowFrame.origin.y = 0.f;
    UIView * shadow = [[UIView alloc] initWithFrame:shadowFrame];

    // Modified this line
    shadow.userInteractionEnabled = YES;
    shadow.layer.shadowColor = color.CGColor;
    shadow.layer.shadowOffset = shadowOffset;
    shadow.layer.shadowRadius = shadowRadius;
    shadow.layer.masksToBounds = NO;
    shadow.clipsToBounds = NO;
    shadow.layer.shadowOpacity = shadowOpacity;

    [shadow addSubview:view];
    return shadow;
}

আমি এটিকে যুক্ত করতে চাই, আমি এটি একটি তৃতীয় পক্ষের ভিউ কন্ট্রোলারের সাথে যুক্ত করার চেষ্টা করছিলাম, অর্থাত্ কোডটির উপর আমার সরাসরি নিয়ন্ত্রণ ছিল না। সুতরাং, আমি এখানে উপরে ফাংশনটি কীভাবে ব্যবহার করেছি:

UIView *shadow = [self putView:vc.view 
         insideShadowWithColor:[UIColor blackColor]
                     andRadius:5.0 
                     andOffset:CGSizeMake(0.0, 0.0) 
                    andOpacity:1.0];
vc.view = shadow;
vc.view.layer.cornerRadius = 5.0;
vc.view.layer.masksToBounds = YES;

1

আমি ড্যানিয়েল ইন্ডি কোডের কিছু পরিবর্তন করেছি

এটি কার্যকর করার জন্য এটি আপনার প্রয়োজন।

+ (void)putView:(UIView*)view insideShadowWithColor:(UIColor*)color andBlur:         (CGFloat)blur andOffset:(CGSize)shadowOffset andOpacity:(CGFloat)shadowOpacity
{
    CGRect shadowFrame = view.frame;
    UIView * shadow = [[UIView alloc] initWithFrame:shadowFrame];
    shadow.backgroundColor = [UIColor redColor];
    shadow.userInteractionEnabled = YES; // Modify this if needed
    shadow.layer.shadowColor = color.CGColor;
    shadow.layer.shadowOffset = shadowOffset;
    shadow.layer.shadowRadius = blur;
    shadow.layer.cornerRadius = view.layer.cornerRadius;
    shadow.layer.masksToBounds = NO;
    shadow.clipsToBounds = NO;
    shadow.layer.shadowOpacity = shadowOpacity;
    [view.superview insertSubview:shadow belowSubview:view];
}

1

UIViewsএটি অর্জনের জন্য আপনার দুটি ব্যবহার করতে হবে। একজন UIViewছায়ার মতো কাজ করবে এবং অন্যটি বৃত্তাকার সীমান্তের জন্য কাজ করবে।

এটির Class Methodসহায়তায় একটি কোড স্নিপেট এখানে রয়েছে protocol:

@implementation UIMethods

+ (UIView *)genComposeButton:(UIViewController <UIComposeButtonDelegate> *)observer;
{
    UIView *shadow = [[UIView alloc]init];
    shadow.layer.cornerRadius = 5.0;
    shadow.layer.shadowColor = [[UIColor blackColor] CGColor];
    shadow.layer.shadowOpacity = 1.0;
    shadow.layer.shadowRadius = 10.0;
    shadow.layer.shadowOffset = CGSizeMake(0.0f, -0.5f);

    UIButton *btnCompose = [[UIButton alloc]initWithFrame:CGRectMake(0, 0,60, 60)];
    [btnCompose setUserInteractionEnabled:YES];
    btnCompose.layer.cornerRadius = 30;
    btnCompose.layer.masksToBounds = YES;
    [btnCompose setImage:[UIImage imageNamed:@"60x60"] forState:UIControlStateNormal];
    [btnCompose addTarget:observer action:@selector(btnCompose_click:) forControlEvents:UIControlEventTouchUpInside];
    [shadow addSubview:btnCompose];
    return shadow;
}

উপরের কোডে btnCompose_click:একটি @requiredপ্রতিনিধি পদ্ধতিতে পরিণত হবে যা বোতামটির উপর ক্লিক করবে।

এবং এখানে আমি আমার UIViewControllerমতো একটি বোতাম যুক্ত করেছি :

UIView *btnCompose = [UIMethods genComposeButton:self];
btnCompose.frame = CGRectMake(self.view.frame.size.width - 75,
                          self.view.frame.size.height - 75,
                          60, 60);
[self.view addSubview:btnCompose];

ফলাফলটি এরকম দেখাবে:

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


1

আমি এই পোস্ট থেকে অনেকগুলি সমাধান চেষ্টা করেছি এবং নীচের সমাধানটি দিয়ে শেষ করেছি। এটি সম্পূর্ণ প্রমাণযদি আপনি পরিষ্কার রঙের দৃশ্যে ছায়া ছাড়ার প্রয়োজন না হয় তবে সমাধান ।

- (void)addShadowWithRadius:(CGFloat)shadowRadius withOpacity:(CGFloat)shadowOpacity withOffset:(CGSize)shadowOffset withColor:(UIColor *)shadowColor withCornerradius:(CGFloat)cornerRadius
{
    UIView *viewShadow = [[UIView alloc]initWithFrame:self.frame];
    viewShadow.backgroundColor = [UIColor whiteColor];
    viewShadow.layer.shadowColor = shadowColor.CGColor;
    viewShadow.layer.shadowOffset = shadowOffset;
    viewShadow.layer.shadowRadius = shadowRadius;
    viewShadow.layer.shadowOpacity = shadowOpacity;
    viewShadow.layer.cornerRadius = cornerRadius;
    viewShadow.layer.masksToBounds = NO;
    [self.superview insertSubview:viewShadow belowSubview:self];

    [viewShadow setTranslatesAutoresizingMaskIntoConstraints:NO];
    [self.superview addConstraint:[NSLayoutConstraint constraintWithItem:viewShadow attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0]];
    [self.superview addConstraint:[NSLayoutConstraint constraintWithItem:viewShadow attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0]];
    [self.superview addConstraint:[NSLayoutConstraint constraintWithItem:viewShadow attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:viewShadow attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0]];
    [self.superview addConstraint:[NSLayoutConstraint constraintWithItem:viewShadow attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:viewShadow attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0]];
    [self layoutIfNeeded];

    self.layer.cornerRadius = cornerRadius;
    self.layer.masksToBounds = YES;
}

প্রকাশটি হ'ল "বোকা প্রমাণ"। :)
বেন টমাস

আমি শুধু ইংরেজি সংশোধন করছিলাম। :) সমাধান কাজ করে।
বেন থমাস

1

এখানে সমাধানটি নিশ্চিতভাবে কাজ করবে!

নীচে হিসাবে ছায়া প্রয়োগ করতে প্রয়োজনীয় প্রান্তগুলি সহ আমি ইউআইভিউ এক্সটেনশন তৈরি করেছি


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

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

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

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

ফলাফল চিত্র

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

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

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


0

ইভান মুলাওস্কি প্রদত্ত উত্তরটি নিখুঁতভাবে কাজ করবে। ক্যাচটি হ'ল আপনাকে ক্লিয়ার কালার এবং মস্কোটোবাউন্ডস বৈশিষ্ট্যটি NO এ দেখার জন্য পটভূমি রঙ সেট করতে হবে।

আপনি দেখার জন্য যা রঙ চান তা সেট করতে পারেন, এটি পছন্দ মতো করুন

v.layer.backgroundColor = your color;

আশাকরি এটা সাহায্য করবে..


0

রাস্তাগুলি বিরক্ত না করে বৃত্তাকার কোণ এবং বৃত্তাকার ছায়া দিয়ে আপনি এটি এটি করেন।

//Inner view with content
[imageView.layer setBorderColor:[[UIColor lightGrayColor] CGColor]];
[imageView.layer setBorderWidth:1.0f];
[imageView.layer setCornerRadius:8.0f];
[imageView.layer setMasksToBounds:YES];

//Outer view with shadow
UIView* shadowContainer = [[UIView alloc] initWithFrame:imageView.frame];
[shadowContainer.layer setMasksToBounds:NO];
[shadowContainer.layer setShadowColor:[[UIColor blackColor] CGColor]];
[shadowContainer.layer setShadowOpacity:0.6f];
[shadowContainer.layer setShadowRadius:2.0f];
[shadowContainer.layer setShadowOffset: CGSizeMake(0.0f, 2.0f)];

[shadowContainer addSubview:imageView];

সামগ্রীর সাথে দর্শন, আমার ক্ষেত্রে একটি ইউআইআইমেজভিউর একটি কোণার ব্যাসার্ধ রয়েছে এবং তাই সীমানায় মাস্ক করতে হবে।

আমরা ছায়ার জন্য আরও একটি সমান আকারের ভিউ তৈরি করি, এটির মাস্কটোবোউন্ড সেট করে না এবং তারপরে কনটেইনার ভিউতে (যেমন শ্যাডো কনটেনার) কনটেন্ট ভিউ যুক্ত করি।


0

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

-(UIView *)shadowedWrapViewWithBounds:(CGRect)bounds {
UIView *baseView = [[UIView alloc] init];
baseView.bounds = bounds;
baseView.backgroundColor = [UIColor clearColor];
baseView.layer.shadowColor = [UIColor blackColor].CGColor;
baseView.layer.shadowOffset = CGSizeMake(0, 0);
baseView.layer.shadowOpacity = 0.7;
baseView.layer.shadowRadius = 4.0;

// improve performance
baseView.layer.shadowPath = [UIBezierPath bezierPathWithRoundedRect:baseView.bounds cornerRadius:4].CGPath;
baseView.layer.shouldRasterize = YES;
baseView.layer.rasterizationScale = [UIScreen mainScreen].scale;

[baseView addSubview:self];
//use Masonry autolayout, self can set corner radius
[self makeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(baseView);
}];

return baseView;
}

0

কোনও এক্সটেনশন এবং জটিলতা ছাড়াই ইউআইসিএলকশনভিউসেলকে বৃত্তাকার তৈরি এবং ছায়া যুক্ত করার জন্য সুইফট 4 সলিউশন :)

দ্রষ্টব্য: সাধারণ দর্শনগুলির জন্য যেমন বোতামগুলি। এই পোস্টে @ সুরগের উত্তর দেখুন। https://stackoverflow.com/a/34984063/7698092 । বোতামগুলির জন্য সফলভাবে পরীক্ষিত

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

এই কৌশলটি কোনও এক্সটেনশান এবং সমস্ত জটিল স্টাফ তৈরি না করে আমার পক্ষে কাজ করেছিল। আমি স্টোরি বোর্ডের সাথে কাজ করছি।

প্রযুক্তি

আপনাকে স্টোরিবোর্ডে আপনার ইউআইকিলেকশনভিউসিলের অভ্যন্তরে একটি ইউআইভিউ (এটি "ধারকদর্শন" বলতে দিন) যুক্ত করতে হবে এবং এই ধারকভিউয়ের ভিতরে সমস্ত প্রয়োজনীয় ভিউ (বোতাম, চিত্র ইত্যাদি) যুক্ত করতে হবে। স্ক্রিনশট দেখুন। কোষের গঠন

ধারক ভিউয়ের জন্য আউটলেটটি সংযুক্ত করুন। সেলফর্ম আইটেমটিডেক্সপথ প্রতিনিধি ফাংশনে নিম্নলিখিত লাইন কোড যুক্ত করুন।

//adds shadow to the layer of cell

cell.layer.cornerRadius = 3.0
    cell.layer.masksToBounds = false
    cell.layer.shadowColor = UIColor.black.cgColor
    cell.layer.shadowOffset = CGSize(width: 0, height: 0)
    cell.layer.shadowOpacity = 0.6

//makes the cell round 

let containerView = cell.containerView!
    containerView.layer.cornerRadius = 8
    containerView.clipsToBounds = true

আউটপুট

সিমুলেটর স্ক্রিনশট দেখুন ছায়াগুলির সাথে বৃত্তাকার কোণগুলি (ইউআইকোলিকেশনভিউসেল)


0
extension UIView {
    func dropRoundedShadowForAllSides() {
        let backgroundView = UIView(frame:self.frame)
        let radius = frame.height/2
        backgroundView.layer.masksToBounds = false
        self.layer.masksToBounds = true
        backgroundView.layer.shadowOffset = CGSize(width: 0.0, height: 0.0)
        backgroundView.layer.shadowRadius = 4
        backgroundView.layer.shadowOpacity = 0.4

        let path = UIBezierPath()

        // Start at the Top Left Corner + radius distance
        path.move(to: CGPoint(x: 2*radius, y: 0.0))

        // Move to the Top Right Corner - radius distance
        path.addLine(to: CGPoint(x: backgroundView.frame.size.width - radius, y: 0.0))

        // Move to top right corner + radius down as curve
        let centerPoint1 = CGPoint(x:backgroundView.frame.size.width - radius,y:radius)
        path.addArc(withCenter: centerPoint1, radius: radius, startAngle: 3*(.pi/2), endAngle: 0, clockwise: true)

        // Move to the Bottom Right Corner - radius
        path.addLine(to: CGPoint(x: backgroundView.frame.size.width, y: backgroundView.frame.size.height - radius))

        // Move to top right corner + radius left as curve
        let centerPoint2 = CGPoint(x:backgroundView.frame.size.width - radius,y:backgroundView.frame.size.height - radius)
        path.addArc(withCenter: centerPoint2, radius: radius, startAngle: 0, endAngle: .pi/2, clockwise: true)

        // Move to the Bottom Left Corner - radius
        path.addLine(to: CGPoint(x: radius, y: backgroundView.frame.size.height))

        // Move to left right corner - radius up as curve
        let centerPoint3 = CGPoint(x:radius,y:backgroundView.frame.size.height - radius)
        path.addArc(withCenter: centerPoint3, radius: radius, startAngle: .pi/2, endAngle: .pi, clockwise: true)

        // Move to the top Left Corner - radius
        path.addLine(to: CGPoint(x: 0, y: radius))

        // Move to top right corner + radius down as curve
        let centerPoint4 = CGPoint(x:radius,y:radius)
        path.addArc(withCenter: centerPoint4, radius: radius, startAngle: .pi, endAngle: 3 * (.pi/2), clockwise: true)

        path.close()

        backgroundView.layer.shadowPath = path.cgPath
        if let superView = self.superview {
            superView.addSubview(backgroundView)
            superView.sendSubview(toBack: backgroundView)
            superView.bringSubview(toFront: self)
        }

    }
}

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