2017-02-18 16 views
-2

テーブルセルに円画像を作成するにはどうすればよいですか?たとえば:UITableViewCell内で円の形を作成する方法は?

enter image description here

は、これは我々が行を強調表示したいときに円を描くようにしようとしている場所を指す矢印を持つ私たちのストーリーボードです:

enter image description here


アップデート

カスタムフォントを使用してこれを行うことにしました。 d関連Swift library。レオが指摘しているように、イメージ(またはフォント)を使用できるときには円を生成するのは大変です。新しいラベルを追加し、フォント/アイコンを設定するのと同じくらい簡単だった:

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

答えて

1

最もパフォーマンスの方法を追加することです丸いイメージ。 cornerRadiusを設定すると動作しますが、パフォーマンスが向上し、シンプルな色付きのサークルでは過度な動作になります。

0

はUIViewのインスタンスを追加し、そのlayer.cornerRadius半分にその幅/高さを設定します。

0

あなたはUIImageViewに直接設定することができるように= 50

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

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

高さ&幅はまた、あなたがすることができます...

1

をUIImageViewのサブクラスである円形画像表示を行うことができる場合に円を追加したビューを作成します。

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

Nそれは@IBDesignableなので、Interface Builderでそれを使うことができます。別のターゲット( "File" - "New" - "Target ...")を作成し、 "Cocoa Touch Framework"を選択して適切な名前を付けてください(例:あなたのアプリが "Foo"の場合、 "FooKit")。そして、そのフレームワークに上記UIViewサブクラスを追加し、あなたがIBでこのクラスを参照することができます(ただUIViewオブジェクトを追加し、CircleViewにその基底クラスを変更):

circle in IB

関連する問題