UITableViewCell ichida doira shakli qanday yaratiladi?

Stol xujayrasidagi doira tasvirini qanday yaratishingiz mumkin? Misol uchun:

enter image description here

Ushbu satrlarni ta'kidlashni xohlagan joyni ko'rsatadigan o'qni ko'rsatib turibdi:

enter image description here


Update:

Buni maxsus shrift yordamida bajarishga qaror qildik. Swift kutubxonasi . Leo ta'kidlaganidek, siz rasmni (yoki shriftni) ishlatishingiz mumkin bo'lganda, aylana hosil qilish uchun juda ko'p. Yangi yorliq qo'shish va shrift/belgini o'rnatish kabi oson edi:

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    ..
    if doHighlight {
        cell.statusLabel.setFAIcon(icon: .FACircle, iconSize: 6)
    }
    ..
2

10 javoblar

Doira bilan birga CAShapeLayer qo'shadigan ko'rinishi mumkin:

@IBDesignable class CircleView: UIView {

    @IBInspectable public var fillColor:   UIColor = #colorLiteral(red: 0, green: 0, blue: 1, alpha: 1)  { didSet { shapeLayer.fillColor = fillColor.cgColor } }
    @IBInspectable public var strokeColor: UIColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 0)  { didSet { shapeLayer.strokeColor = strokeColor.cgColor } }
    @IBInspectable public var lineWidth:   CGFloat = 0   { didSet { setNeedsLayout() } }

    lazy private var shapeLayer: CAShapeLayer = {
        let _shapeLayer = CAShapeLayer()
        _shapeLayer.fillColor = self.fillColor.cgColor
        _shapeLayer.strokeColor = self.strokeColor.cgColor
        self.layer.insertSublayer(_shapeLayer, at: 0)
        return _shapeLayer
    }()

    override func layoutSubviews() {
        super.layoutSubviews()

        let center = CGPoint(x: bounds.midX, y: bounds.midY)
        let radius = (min(bounds.size.width, bounds.size.height) - lineWidth)/2
        shapeLayer.path = UIBezierPath(arcCenter: center, radius: radius, startAngle: 0, endAngle: .pi * 2, clockwise: true).cgPath
        shapeLayer.lineWidth = lineWidth
    }
}

Eslatma: @IBDesignable , uni Interface Builder'da foydalanishingiz mumkin. Faqat alohida maqsadni yarating ("Fayl" - "Yangi" - "Nishon ...") va "Cocoa Touch Framework" ni tanlang va unga tegishli nom bering (masalan, ilovangiz "Foo" bo'lsa, "FooKit"). Keyin yuqoridagi UIView pastki klassini ushbu ramkaga qo'shing va bu klassni Ibr (faqatgina UIView ob'ektini qo'shing va uning asosiy klassini CircleView ):

circle in IB

1
qo'shib qo'ydi

Doira bilan birga CAShapeLayer qo'shadigan ko'rinishi mumkin:

@IBDesignable class CircleView: UIView {

    @IBInspectable public var fillColor:   UIColor = #colorLiteral(red: 0, green: 0, blue: 1, alpha: 1)  { didSet { shapeLayer.fillColor = fillColor.cgColor } }
    @IBInspectable public var strokeColor: UIColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 0)  { didSet { shapeLayer.strokeColor = strokeColor.cgColor } }
    @IBInspectable public var lineWidth:   CGFloat = 0   { didSet { setNeedsLayout() } }

    lazy private var shapeLayer: CAShapeLayer = {
        let _shapeLayer = CAShapeLayer()
        _shapeLayer.fillColor = self.fillColor.cgColor
        _shapeLayer.strokeColor = self.strokeColor.cgColor
        self.layer.insertSublayer(_shapeLayer, at: 0)
        return _shapeLayer
    }()

    override func layoutSubviews() {
        super.layoutSubviews()

        let center = CGPoint(x: bounds.midX, y: bounds.midY)
        let radius = (min(bounds.size.width, bounds.size.height) - lineWidth)/2
        shapeLayer.path = UIBezierPath(arcCenter: center, radius: radius, startAngle: 0, endAngle: .pi * 2, clockwise: true).cgPath
        shapeLayer.lineWidth = lineWidth
    }
}

Eslatma: @IBDesignable , uni Interface Builder'da foydalanishingiz mumkin. Faqat alohida maqsadni yarating ("Fayl" - "Yangi" - "Nishon ...") va "Cocoa Touch Framework" ni tanlang va unga tegishli nom bering (masalan, ilovangiz "Foo" bo'lsa, "FooKit"). Keyin yuqoridagi UIView pastki klassini ushbu ramkaga qo'shing va bu klassni Ibr (faqatgina UIView ob'ektini qo'shing va uning asosiy klassini CircleView ):

circle in IB

1
qo'shib qo'ydi

Eng yaxshi usul, yumaloq tasvirni qo'shishdir. cornerRadius funksiyasini o'rnatish ishlaydi, lekin bu ishlash cho'ntagidir va oddiy rangli aylana uchun haddan tashqari o'chirilgan bo'ladi.

1
qo'shib qo'ydi

Eng yaxshi usul, yumaloq tasvirni qo'shishdir. cornerRadius funksiyasini o'rnatish ishlaydi, lekin bu ishlash cho'ntagidir va oddiy rangli aylana uchun haddan tashqari o'chirilgan bo'ladi.

1
qo'shib qo'ydi

UIView namunasini qo'shing va layer.cornerRadius ni kenglik/balandlikning yarmiga qo'ying.

0
qo'shib qo'ydi

UIView namunasini qo'shing va layer.cornerRadius ni kenglik/balandlikning yarmiga qo'ying.

0
qo'shib qo'ydi

if height & width = 50

   View.clipsToBounds = true
   View.layer.cornerRadius= View.frame.size.width/2
0
qo'shib qo'ydi

if height & width = 50

   View.clipsToBounds = true
   View.layer.cornerRadius= View.frame.size.width/2
0
qo'shib qo'ydi
class CircularImageView: UIImageView {
override func layoutSubviews() {
    super.layoutSubviews()

    let radius: CGFloat = self.bounds.size.width/2.0
    self.layer.cornerRadius = radius
    self.clipsToBounds = true
} }

siz UIImageView-ning pastki klassi bo'lgan aylana tasvirini yaratishingiz mumkin, shunda uni to'g'ridan-to'g'ri UIImageView-ga o'rnatishingiz mumkin ...

0
qo'shib qo'ydi
class CircularImageView: UIImageView {
override func layoutSubviews() {
    super.layoutSubviews()

    let radius: CGFloat = self.bounds.size.width/2.0
    self.layer.cornerRadius = radius
    self.clipsToBounds = true
} }

siz UIImageView-ning pastki klassi bo'lgan aylana tasvirini yaratishingiz mumkin, shunda uni to'g'ridan-to'g'ri UIImageView-ga o'rnatishingiz mumkin ...

0
qo'shib qo'ydi