質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.97%

CollectionViewにUILabelを表示するとスクロールが重い

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,147

label8

score 14

毎度お世話になります。

マッチングアプリによくある、ユーザーギャラリーにニックネームや地域、年齢などを表示させるビューを作成しています。
画像単体で表示させる分にはスクロールがスムーズなのですが、その上にUILabelを表示させると極端にスクロールが重くなります。
ラベルには文字を表示させてもさせなくてももっさり感は変わりません。

これを解消させる手段が思いつかず、Web上にある情報をいろいろ試しましたが思い通りの結果になりません。

おわかりになる方がいらっしゃいましたらご教授いただけると助かります。

よろしくお願いいたします。

ViewController.swift

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("UsersCell", forIndexPath: indexPath) as! UsersCollectionViewCell
    cell.setupCustomCellImage()
    cell.setupCustomCellLabel()
    cell.imageConstraint()
    cell.labelConstraint()
    cell.setupContents(indexPath.row, items: self.userItems[indexPath.row]) //self.userItemsはAPIからデータを取得

    return cell
}

UsersCollectionViewCell.swift

class UsersCollectionViewCell: UICollectionViewCell {

    let imageView   = UIImageView()
    let statusLabel = CustomLabelClass()

    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)!
    }

    override init(frame: CGRect) {
        super.init(frame: frame)

        self.addSubview(imageView)
        self.addSubview(statusLabel)
    }

    func setupCustomCellImage() {
        self.backgroundColor = UIColor.whiteColor()
        self.imageView.contentMode = UIViewContentMode.ScaleToFill
        self.imageView.layer.cornerRadius = 6
        self.imageView.layer.masksToBounds = true
    }

    func imageConstraint() {
        // 画像の制約
    }

    func setupCustomCellLabel() {
        self.statusLabel.textAlignment = NSTextAlignment.Center
        self.statusLabel.backgroundColor = UIColor.rgb(0x000000, 0.8)
        self.statusLabel.backgroundColor = UIColor.blackColor()
        self.statusLabel.setCornersAndRadius([.BottomLeft, .BottomRight], radius: 6.0)
        self.statusLabel.font = UIFont.systemFontOfSize(CGFloat(10))
        self.statusLabel.textColor = UIColor.orangeColor()
    }

    func labelConstraint() {
        // ラベルの制約
    }

    // コンテンツの表示
    func setupContents(num: Int, items: Dictionary<String, AnyObject>) {
        statusLabel.text = "ニックネーム"
        if items["image_url"] as! String != "" {
            imageView.sd_setImageWithURL(NSURL(string: "http://hogehoge.com" + (items["image_url"] as! String)))
        } else {
            imageView.image = UIImage(named: "dummy.jpg")
        }
    }

}

追記:
ご指摘のあったCustomLabelClass.swiftの内容を載せてみました。
内容は、個々でラベルのコーナーをラウンドさせるための処理になります。

class CustomLabelClass: UILabel {

    var corners: UIRectCorner = [.TopLeft, .TopRight, .BottomLeft, .BottomRight]
    var radius: CGFloat = 0

    var padding: UIEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)

    func setPadding(pt:CGFloat, pr:CGFloat, pb:CGFloat, pl:CGFloat) {
        self.padding = UIEdgeInsets(top: pt, left: pl, bottom: pb, right: pr)
    }

    override func drawTextInRect(rect: CGRect) {
        let newRect = UIEdgeInsetsInsetRect(rect, padding)
        super.drawTextInRect(newRect)
    }

    override func intrinsicContentSize() -> CGSize {
        var intrinsicContentSize = super.intrinsicContentSize()
        intrinsicContentSize.height += padding.top + padding.bottom
        intrinsicContentSize.width  += padding.left + padding.right
        return intrinsicContentSize
    }

    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
    }
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

UILabelでなくCustomLabelClassというのを使っているようですが、そのCustomLabelClassが重いという話はないですか?

CustomLabelClassをUILabelに戻したらどうなるか試して、CustomLabelClassの問題か否か切り分けしてみるとよいと思います。

もしCustomLabelClassの問題なのでしたら、そのCustomLabelClassの内容を開示してもらわないとこれ以上わかりません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/24 10:19

    ご回答ありがとうございます!

    おっしゃる通り、ラベルのカスタマイズを行うためにサブクラスを用意しています。
    現在、手元で作業できる環境がないので、帰宅後に通常のラベルに戻して検証してみたいと思います!

    キャンセル

  • 2016/05/24 23:19

    通常のUILabelで実装し直したところ、スクロールがスムーズになりました。
    ご指摘の通り、CustomLabelClassに問題があったようです。
    再度ロジックを見直したいと思います。

    お忙しいところアドバイスをいただきありがとうございました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.97%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる