গোল কর্নার যুক্ত করা এবং ইউআইকোলিকেশনভিউসেলকে ছায়া ছাড়ুন


107

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

[self.contentView setBackgroundColor:[UIColor whiteColor]];

self.layer.masksToBounds = NO;
self.layer.shadowOffset = CGSizeMake(0, 1);
self.layer.shadowRadius = 1.0;
self.layer.shadowColor = [UIColor blackColor].CGColor;
self.layer.shadowOpacity = 0.5;
[self.layer setShadowPath:[[UIBezierPath bezierPathWithRect:self.bounds] CGPath]];

আমি কিভাবে গোলাকার কোণ এবং ছায়া যুক্ত করতে হবে তা জানতে চাই UICollectionViewCell


আমি মনে করি অন্যের দ্বারা বুঝতে আপনার প্রশ্নটি উন্নত করা দরকার। আপনি যা চেয়েছিলেন তা সত্যিই অগোছালো
দিনেশ রাজা

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

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

উত্তর:


195

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

cell.contentView.layer.cornerRadius = 2.0f;
cell.contentView.layer.borderWidth = 1.0f;
cell.contentView.layer.borderColor = [UIColor clearColor].CGColor;
cell.contentView.layer.masksToBounds = YES;

cell.layer.shadowColor = [UIColor blackColor].CGColor;
cell.layer.shadowOffset = CGSizeMake(0, 2.0f);
cell.layer.shadowRadius = 2.0f;
cell.layer.shadowOpacity = 0.5f;
cell.layer.masksToBounds = NO;
cell.layer.shadowPath = [UIBezierPath bezierPathWithRoundedRect:cell.bounds cornerRadius:cell.contentView.layer.cornerRadius].CGPath;

সুইফট 3.0

self.contentView.layer.cornerRadius = 2.0
self.contentView.layer.borderWidth = 1.0
self.contentView.layer.borderColor = UIColor.clear.cgColor
self.contentView.layer.masksToBounds = true

self.layer.shadowColor = UIColor.black.cgColor
self.layer.shadowOffset = CGSize(width: 0, height: 2.0)
self.layer.shadowRadius = 2.0
self.layer.shadowOpacity = 0.5
self.layer.masksToBounds = false
self.layer.shadowPath = UIBezierPath(roundedRect: self.bounds, cornerRadius: self.contentView.layer.cornerRadius).cgPath

9
আমি যুক্ত করার পরে এটি আমার পক্ষে ভাল কাজ করেছেcell.layer.backgroundColor = [UIColor clearColor].CGColor;
ন্যাক্রস

4
কোনও ধারণা কেন এটি কেবল আমার শীর্ষ কোণগুলিকেই গোল করে?
ব্যবহারকারী3344977 77

@ user3344977 হয়তো নীচের অংশটি ক্লিপ হচ্ছে? কোণে যেমন বৃত্তাকার হয় তবে এটি কোষের দৃশ্যমান অংশের নীচে থাকে
কোডারনিজা

4
আমি দেখতে পাচ্ছি যে এটি আমার শীর্ষ কোণগুলি এবং আমার নীচের কোণগুলিকেও গোল করে না।
ফতুহোকু

4
আপনি / নির্বাচিত / কোষগুলি সরানোর সময় কোণগুলি কীভাবে বৃত্তাকারে রাখবেন? প্রাথমিকভাবে সঠিকভাবে আঁকার পরে আমি কোষে শ্বাস ফেলার পরে আমার কোণগুলি বর্গাকার হয়ে যায়।
অ্যাড্রিয়ান

33

সুইফট 3 সংস্করণ:

cell.contentView.layer.cornerRadius = 10
cell.contentView.layer.borderWidth = 1.0

cell.contentView.layer.borderColor = UIColor.clear.cgColor
cell.contentView.layer.masksToBounds = true

cell.layer.shadowColor = UIColor.gray.cgColor
cell.layer.shadowOffset = CGSize(width: 0, height: 2.0)
cell.layer.shadowRadius = 2.0
cell.layer.shadowOpacity = 1.0
cell.layer.masksToBounds = false
cell.layer.shadowPath = UIBezierPath(roundedRect:cell.bounds, cornerRadius:cell.contentView.layer.cornerRadius).cgPath

আমাকে প্রতিটি ঘরের ডান কোণে এবং নীচে একটি ছায়া প্রভাব যুক্ত করা দরকার, এবং উপরের কোডটি যেভাবে কাজ করে, এটি ঘরকে ছায়াময় রঙ দিয়ে পূর্ণ করে
তোলে

25

যদি এটি সহায়তা করে: এখানে কোণার বৃত্তাকার জন্য দ্রুততমটি রয়েছে:

cell.layer.cornerRadius = 10
cell.layer.masksToBounds = true

কোষটি কক্ষকে নিয়ন্ত্রণ করে একটি ভেরিয়েবল সহ: প্রায়শই, আপনি এটি ব্যবহার করতে পারবেন override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell

উপভোগ করুন!


19

এখানে সুইফট 4 সমাধানটি প্রতিটি কোণে এবং কেবল শীর্ষ কোণগুলিকে নয় তবে আপডেট করা হয়েছে :

contentView.layer.cornerRadius = 6.0
contentView.layer.borderWidth = 1.0
contentView.layer.borderColor = UIColor.clear.cgColor
contentView.layer.masksToBounds = true

layer.shadowColor = UIColor.lightGray.cgColor
layer.shadowOffset = CGSize(width: 0, height: 2.0)
layer.shadowRadius = 6.0
layer.shadowOpacity = 1.0
layer.masksToBounds = false
layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: contentView.layer.cornerRadius).cgPath
layer.backgroundColor = UIColor.clear.cgColor

4
দ্রুতগতিতে 4,2-এও থ্যাঙ্কস চালায়
শেডটিড

4
আমি একটি সমাধান খুঁজছিলাম ... ধন্যবাদ ছোট ম্যাসিমো: 'ডি
ম্যাসিমো পলিমেনি

16

layerঘরের জন্য বৈশিষ্ট্যগুলি সেট করুন , না contentView

CALayer * layer = [cell layer];
[layer setShadowOffset:CGSizeMake(0, 2)];
[layer setShadowRadius:1.0];
[layer setShadowColor:[UIColor redColor].CGColor] ;
[layer setShadowOpacity:0.5]; 
[layer setShadowPath:[[UIBezierPath bezierPathWithRect:cell.bounds] CGPath]];

4
এটি আমার পক্ষে কাজ করে না বলে মনে হচ্ছে। আমি একটি ইউটিবেলভিউসেলের জন্য একই কোড ব্যবহার করি তবে এটি কোনও কালেকশনভিউসে কাজ করে বলে মনে হয় না। এটি অদ্ভুত যে একই কোডটি সিভি কোষে কাজ করবে না।
জেসন

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

15

সুইফট 4.2

এটির জন্য আপনার কাস্টম সেল বা সেলফর্ম আইটেমটি যুক্ত করা উচিত: আপনি যদি সেলফর্ম আইটেমটি ব্যবহার করছেন: বিকল্পের স্ব -> সেল এ যোগাযোগ করুন

        self.layer.cornerRadius = 10
        self.layer.borderWidth = 1.0
        self.layer.borderColor = UIColor.lightGray.cgColor

        self.layer.backgroundColor = UIColor.white.cgColor
        self.layer.shadowColor = UIColor.gray.cgColor
        self.layer.shadowOffset = CGSize(width: 2.0, height: 4.0)
        self.layer.shadowRadius = 2.0
        self.layer.shadowOpacity = 1.0
        self.layer.masksToBounds = false

এটি আপনাকে একটি বৃত্তাকার সীমানা এবং একটি ড্রপ ছায়া সহ একটি ঘর দেবে।


15

এখানে আমার উত্তর, অন্যদের কাছে, তবে আমি স্তরটিতে একটি কোণার ব্যাসার্ধ যুক্ত করব অন্যথায় কোণগুলি সঠিকভাবে পূরণ করবে না। এছাড়াও, এটি একটি দুর্দান্ত সামান্য এক্সটেনশন তৈরি করে UICollectionViewCell

extension UICollectionViewCell {
    func shadowDecorate() {
        let radius: CGFloat = 10
        contentView.layer.cornerRadius = radius
        contentView.layer.borderWidth = 1
        contentView.layer.borderColor = UIColor.clear.cgColor
        contentView.layer.masksToBounds = true
    
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOffset = CGSize(width: 0, height: 1.0)
        layer.shadowRadius = 2.0
        layer.shadowOpacity = 0.5
        layer.masksToBounds = false
        layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: radius).cgPath
        layer.cornerRadius = radius
    }
}

collectionView(_:cellForItemAt:)একবার আপনি নিজের ঘরটি শনাক্ত করার পরে আপনি এটি ডেটাসোর্সে কল করতে পারেন ।


8

আপনাকে কেবল (ক) সেট cornerRadiusএবং (খ) shadowPathএকই ব্যাসার্ধের সাথে একটি বৃত্তাকার আয়তাকার সেট করতে হবে cornerRadius:

self.layer.cornerRadius = 10;
self.layer.shadowPath = [[UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:self.layer.cornerRadius] CGPath];

4
কোন ধারণা কেন এটি কেবল আমার নীচের কোণগুলিকে বৃত্তাকার করে?
ব্যবহারকারী3344977

আপনি যে স্তরটিকে গোল করে যাচ্ছেন তার মতো শব্দগুলি কিছু দ্বারা আংশিকভাবে অস্পষ্ট। বিশদ বিবরণ ব্যতীত আর কিছু যেতে পারে না।
টিমোথি মুজ

আরে টিম, আমি কেবল এই প্রশ্নটি জিজ্ঞাসা করেছি। আমার একটি অনুভূতি আছে যে আপনি এটি দ্রুত পেতে সক্ষম হবেন। এটা কি কারণ আমার কেবল নীচে / "নীচে" ঘরের ছায়া রয়েছে? stackoverflow.com/q/27929735/3344977
user3344977

6

আমাকে সুইফ্টের জন্য কিছুটা পরিবর্তন করতে হয়েছিল :

cell.contentView.layer.cornerRadius = 2.0;
cell.contentView.layer.borderWidth = 1.0;
cell.contentView.layer.borderColor = UIColor.clearColor().CGColor;
cell.contentView.layer.masksToBounds = true;

cell.layer.shadowColor = UIColor.grayColor().CGColor;
cell.layer.shadowOffset = CGSizeMake(0, 2.0);
cell.layer.shadowRadius = 2.0;
cell.layer.shadowOpacity = 1.0;
cell.layer.masksToBounds = false;
cell.layer.shadowPath = UIBezierPath(roundedRect:cell.bounds, cornerRadius:cell.contentView.layer.cornerRadius).CGPath;

4

মাইক সাবাতিনির উত্তরটি ঠিকঠাক কাজ করে, যদি আপনি সরাসরি সেলভিশন কনফিগারেশনটি ভিউ সেলফোরআইটেমটিতে কনফিগার করেন তবে আপনি যদি তাদের পছন্দসই ইউআইকোলিকেশনভিউসেল সাবক্লাসের জাগ্রত ফ্রেমনিব () এ সেট করার চেষ্টা করেন, আপনি ডিভাইসগুলিতে একটি ভুল বেজিয়ারপথ সেট দিয়ে শেষ করবেন will আপনার স্টোরিবোর্ডে (আইবি) পূর্বে সেট করা প্রস্থ এবং উচ্চতার সাথে আর মিলবে না।

আমার জন্য সলিউশনটি ইউআইকোলিকেশনভিউসিলের সাবক্লাসের ভিতরে একটি ফানক তৈরি করে সেল সেল থেকে আইটেমটি কল করা হয়েছে এটি এর মত:

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    if let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellID", for: indexPath) as? CustomCollectionViewCell{
        cell.configure())
        return cell
    }
    else {
        return UICollectionViewCell()
    }
}

এবং কাস্টমক্লেকশনভিউসেল.স্ফিটে:

class CustomCollectionViewCell: UICollectionViewCell{
    func configure() {
    contentView.layer.cornerRadius = 20
    contentView.layer.borderWidth = 1.0
    contentView.layer.borderColor = UIColor.clear.cgColor
    contentView.layer.masksToBounds = true
    layer.shadowColor = UIColor.black.cgColor
    layer.shadowOffset = CGSize(width: 0, height: 2.0)
    layer.shadowRadius = 2.0
    layer.shadowOpacity = 0.5
    layer.masksToBounds = false
    layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: contentView.layer.cornerRadius).cgPath}
 }

4

এই ধরণের প্রভাবটি সম্পাদন করতে আমি নিম্নলিখিত পদ্ধতিটি ব্যবহার করি:

extension UICollectionViewCell {
    /// Call this method from `prepareForReuse`, because the cell needs to be already rendered (and have a size) in order for this to work
    func shadowDecorate(radius: CGFloat = 8,
                        shadowColor: UIColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.3),
                        shadowOffset: CGSize = CGSize(width: 0, height: 1.0),
                        shadowRadius: CGFloat = 3,
                        shadowOpacity: Float = 1) {
        contentView.layer.cornerRadius = radius
        contentView.layer.borderWidth = 1
        contentView.layer.borderColor = UIColor.clear.cgColor
        contentView.layer.masksToBounds = true

        layer.shadowColor = shadowColor.cgColor
        layer.shadowOffset = shadowOffset
        layer.shadowRadius = shadowRadius
        layer.shadowOpacity = shadowOpacity
        layer.masksToBounds = false
        layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: radius).cgPath
        layer.cornerRadius = radius
    }
}

3

এই আমার জন্য কাজ করে

cell.contentView.layer.cornerRadius = 5.0
cell.contentView.layer.borderColor = UIColor.gray.withAlphaComponent(0.5).cgColor
cell.contentView.layer.borderWidth = 0.5

let border = CALayer()
let width = CGFloat(2.0)
border.borderColor = UIColor.darkGray.cgColor
border.frame = CGRect(x: 0, y: cell.contentView.frame.size.height - width, width:  cell.contentView.frame.size.width, height: cell.contentView.frame.size.height)

border.borderWidth = width
cell.contentView.layer.addSublayer(border)
cell.contentView.layer.masksToBounds = true
cell.contentView.clipsToBounds = true

2

আপনি ছায়া রঙ, ব্যাসার্ধ সেট এবং অফসেট পারেন UICollectionViewDataSource পদ্ধতি তৈরি করার সময় UICollectionViewCell

cell.layer.shadowColor = UIColor.gray.cgColor
cell.layer.shadowOffset = CGSize(width: 0, height: 2.0)
cell.layer.shadowRadius = 1.0
cell.layer.shadowOpacity = 0.5
cell.layer.masksToBounds = false

2

সমাধানটি নিয়ে আমার এখানে। এটি একটি মূল পার্থক্য সহ অন্যান্য উত্তরের মতো। এটি এমন কোনও পথ তৈরি করে না যা দেখার সীমানায় নির্ভর করে। যে কোনও সময় আপনি সীমানার উপর ভিত্তি করে কোনও পাথ তৈরি করেন এবং স্তরটিকে এটিকে সরবরাহ করার পরে পুনরায় আকার দেওয়ার সময় আপনি সমস্যাগুলির মধ্যে চলে যেতে পারেন এবং পাথ আপডেট করার জন্য পদ্ধতিগুলি সেটআপ করার প্রয়োজন।

একটি সহজ সমাধান হ'ল নির্ভর সীমাবদ্ধ এমন কোনও ব্যবহার না করা।

let radius: CGFloat = 10

self.contentView.layer.cornerRadius = radius
// Always mask the inside view
self.contentView.layer.masksToBounds = true

self.layer.shadowColor = UIColor.black.cgColor
self.layer.shadowOffset = CGSize(width: 0, height: 1.0)
self.layer.shadowRadius = 3.0
self.layer.shadowOpacity = 0.5
// Never mask the shadow as it falls outside the view
self.layer.masksToBounds = false

// Matching the contentView radius here will keep the shadow
// in sync with the contentView's rounded shape
self.layer.cornerRadius = radius

এখন যখনই ঘরগুলির আকার পরিবর্তন হবে তখন ভিআই এপিআই অভ্যন্তরীণভাবে সমস্ত কাজ করবে।


আমার মতে সবচেয়ে পরিষ্কার উত্তর। রেডিওগুলি সিঙ্কে রাখার ধারণাটিকে ভালোবাসুন।
কিরিল কুদায়েভ

2

আমি একটি গুরুত্বপূর্ণ জিনিসটি পেয়েছি: ইউআইকিকলিকেশনভিউসেলটির clearউপরের এই কাজটি করার জন্য ব্যাকগ্রাউন্ড কালার অবশ্যই রঙ হিসাবে থাকতে হবে।


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