25225


[![角丸のラベル](https://i.stack.imgur.com/KWqTU.jpg)](https://i.stack.imgur.com/KWqTU.jpg)

写真のようなギャラリービューを作成していますが、  
セルの画像とラベル（カスタムラベル）を角丸にし、同じようなUIにするとスクロールがとてももっさりと重くなります。  
（参考にしたアプリではスムーズにスクロールしているのですが・・・）

おそらくセルの数だけカスタムラベル内で図形描画が走っているからなのではと推測しています。

ちなみに、通常のUILabelに変更するとスムーズにスクロールしてくれます。

カスタムラベルは  
<http://qiita.com/k-yamada@github/items/eb09485664d7207eb22e>  
をほぼそのまま流用して実装しました。

この問題を解決するためにはどのようなロジックを組めばいいのか、  
ぜひご教授いただけると助かります。

以下コードを載せておきます。

【カスタムセル】

[code]

    class UsersCollectionViewCell: UICollectionViewCell {
    
        let imageView   = UIImageView()
        let statusLabel = CustomLabelClass()
        //let statusLabel = UILabel()
    
        required init(coder aDecoder: NSCoder) {
            super.init(coder: aDecoder)!
        }
    
        override init(frame: CGRect) {
            super.init(frame: frame)
    
            self.addSubview(imageView)
            self.addSubview(statusLabel)
    
            self.setupCustomCellImage()
            self.setupCustomCellLabel()
        }
    
        // 画像の設定
        func setupCustomCellImage() {
            self.backgroundColor = UIColor.whiteColor()
            self.imageView.contentMode = UIViewContentMode.ScaleToFill
            self.imageView.layer.cornerRadius = 6
            self.imageView.layer.masksToBounds = true
    
            self.imageConstraint()
        }
        func imageConstraint() {
            self.imageView.translatesAutoresizingMaskIntoConstraints = false
            self.addSubview(imageView)
    
            let viewTop : NSLayoutConstraint = NSLayoutConstraint(item: imageView, attribute: .Top, relatedBy: .Equal, toItem: self, attribute: .Top, multiplier: 1.0, constant: 0.0)
            let viewLeading  : NSLayoutConstraint = NSLayoutConstraint(item: imageView, attribute: .Leading, relatedBy: .Equal, toItem: self, attribute: .Leading, multiplier: 1.0, constant: 0.0)
            let viewBottom    : NSLayoutConstraint = NSLayoutConstraint(item: imageView, attribute: .Bottom, relatedBy: .Equal, toItem: self, attribute: .Bottom, multiplier: 1.0, constant: 0.0)
            let viewTrailing: NSLayoutConstraint = NSLayoutConstraint(item: imageView, attribute: .Trailing, relatedBy: .Equal, toItem: self, attribute: .Trailing, multiplier: 1.0, constant: 0.0)
    
            self.addConstraints([
                viewTop,
                viewLeading,
                viewBottom,
                viewTrailing
            ])
        }
    
        // カスタムラベルの設定
        func setupCustomCellLabel() {
            self.statusLabel.textAlignment = NSTextAlignment.Center
            self.statusLabel.backgroundColor = UIColor.rgb(0x000000, 0.7)
            self.statusLabel.setCornersAndRadius([.BottomLeft, .BottomRight], radius: 6.0)
    
            self.statusLabel.font = UIFont.systemFontOfSize(CGFloat(10))
            self.statusLabel.textColor = UIColor.orangeColor()
    
            self.labelConstraint()
        }
        func labelConstraint() {
            self.statusLabel.translatesAutoresizingMaskIntoConstraints = false
            self.addSubview(statusLabel)
    
            let viewHeight  : NSLayoutConstraint = NSLayoutConstraint(item: statusLabel, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant: 16.0)
            let viewLeading : NSLayoutConstraint = NSLayoutConstraint(item: statusLabel, attribute: .Leading, relatedBy: .Equal, toItem: self, attribute: .Leading, multiplier: 1.0, constant: 0.0)
            let viewBottom  : NSLayoutConstraint = NSLayoutConstraint(item: statusLabel, attribute: .Bottom, relatedBy: .Equal, toItem: self, attribute: .Bottom, multiplier: 1.0, constant: 0.0)
            let viewTrailing: NSLayoutConstraint = NSLayoutConstraint(item: statusLabel, attribute: .Trailing, relatedBy: .Equal, toItem: self, attribute: .Trailing, multiplier: 1.0, constant: 0.0)
    
            self.addConstraints([
                viewHeight,
                viewLeading,
                viewBottom,
                viewTrailing
            ])
        }
    }
    
[/code]

【カスタムラベル】

[code]

    class CustomLabelClass: UILabel {
    
        var corners: UIRectCorner = [.TopLeft, .TopRight, .BottomLeft, .BottomRight]
        var radius: CGFloat = 0
    
        func setCornersAndRadius(corners:UIRectCorner, radius: CGFloat) {
            self.corners = corners
            self.radius = radius
        }
    
        override func layoutSubviews() {
            super.layoutSubviews()
            let maskPath = UIBezierPath(roundedRect: self.bounds,
                                        byRoundingCorners: self.corners,
                                        cornerRadii: CGSize(width: self.radius, height: self.radius))
    
            let maskLayer = CAShapeLayer()
            maskLayer.frame = self.bounds
            maskLayer.path = maskPath.CGPath
    
            self.layer.mask = maskLayer
        }
    }
    
[/code]


CC BY-SA 3.0
2016-05-26T15:17:10.827
25202
2016-05-27T10:41:52.710
15654
question
swift2 uicollectionview uilabel
CollectionViewCellに一部角丸にしたラベルを表示させると重い


UIBezierPathでマスクを作ってるのが原因のように思われます。

UILabelは通常のUILabelに戻した上で、UIImageViewとUILabelを入れるViewを別に作り、そのViewの四隅を普通に丸めるようにしてみてはどうでしょうか？


CC BY-SA 3.0
2016-05-27T10:41:52.710
25225
2016-05-27T10:41:52.710
7459
25202
answer