CollectionViewCellに一部角丸にしたラベルを表示させると重い
写真のようなギャラリービューを作成していますが、
セルの画像とラベル(カスタムラベル)を角丸にし、同じようなUIにするとスクロールがとてももっさりと重くなります。
(参考にしたアプリではスムーズにスクロールしているのですが・・・)
おそらくセルの数だけカスタムラベル内で図形描画が走っているからなのではと推測しています。
ちなみに、通常のUILabelに変更するとスムーズにスクロールしてくれます。
カスタムラベルは
http://qiita.com/k-yamada@github/items/eb09485664d7207eb22e
をほぼそのまま流用して実装しました。
この問題を解決するためにはどのようなロジックを組めばいいのか、
ぜひご教授いただけると助かります。
以下コードを載せておきます。
【カスタムセル】
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
])
}
}
【カスタムラベル】
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
}
}