質問編集履歴

4 解決方法を追記

KazutakaShimizu

KazutakaShimizu score 160

2017/06/15 07:30  投稿
collectionViewで無限スクロールを実装する際、セル内のラベルにテキストがきちんと入らない
現在iosアプリを作っており、collectionViewを使った無限にスクロールできるメニューを実装しようとしています（メルカリのカテゴリメニューのようなものです）
collectionViewのセル一つ一つがメニューとなっていて
ここにメニューのタイトルを入れようとすると下記のようにうまく表示されません。
![イメージ説明](b3906eacd9abf9d5c59bb60ff48761c7.gif)
```swift
//メニュー部分全体のView
class MenuBarView: UIView {
   var pageTabItemsWidth: CGFloat = 0.0
   var collectionView:UICollectionView!
   var titles: [String] = Constant.menuTitle
   override init(frame: CGRect) {
       super.init(frame: frame)
       setUpCollectionView()
   }
   ![
文字列ではなくセルの背景色をセルごとに変えようとするとうまくいきます。
ソースコードは下記](358ec05119a0e16055670e7bdfef2f88.gif)
   required init?(coder aDecoder: NSCoder) {
       fatalError("init(coder:) has not been implemented")
   }
}
extension MenuBarView: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
   fileprivate func setUpCollectionView(){
       let layout = UICollectionViewFlowLayout()
       layout.itemSize = CGSize(width:100, height:30)
       layout.scrollDirection = .horizontal
       collectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: frame.size.width, height: frame.size.height), collectionViewLayout: layout)
       // Cellに使われるクラスを登録.
       collectionView.delegate = self
       collectionView.dataSource = self
       collectionView.showsHorizontalScrollIndicator = false
       collectionView.register(MenuBarViewCell.self, forCellWithReuseIdentifier: "MyCell")
       self.addSubview(collectionView)
       
   }
   
   func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
       print("items")
       return titles.count * 3
   }
   
   /*
    Cellに値を設定する
    */
   func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
       let cell : MenuBarViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCell",for: indexPath) as! MenuBarViewCell
       configureCell(cell: cell, indexPath: indexPath)
       return cell
   }
   
   private func configureCell(cell:MenuBarViewCell, indexPath: IndexPath){
       let fixedIndex = indexPath.item % titles.count
       cell.title = titles[fixedIndex]
   }
}
extension MenuBarView: UIScrollViewDelegate {
   func scrollViewDidScroll(_ scrollView: UIScrollView) {
       if pageTabItemsWidth == 0.0 {
           pageTabItemsWidth = floor(scrollView.contentSize.width / 3.0) // 表示したい要素群のwidthを計算
       }
       
       if (scrollView.contentOffset.x <= 0.0) || (scrollView.contentOffset.x > pageTabItemsWidth * 2.0) { // スクロールした位置がしきい値を超えたら中央に戻す
           scrollView.contentOffset.x = pageTabItemsWidth
       }
   }
}
```
```swift
//MenuBarViewで表示しているcollectionViewCell
class MenuBarViewCell: UICollectionViewCell {
   var title:String!{
       didSet{
           setUpUi()
       }
   }
   override func awakeFromNib() {
       super.awakeFromNib()
   }
   
   private func setUpUi(){
       self.backgroundColor = .white
       var label = UILabel(frame: self.bounds)
       label.text = title
       label.textColor = .black
       label.textAlignment = .center
       self.contentView.addSubview(label)
   }
}
```
足りてない情報等ございましたら、お手数ですがコメントをください。
どんたか教えていただけると大変助かります。よろしくお願い申し上げます。
【追記】
 
MenuBarViewCellのsetUpUi()内のUILabel(frame: self.frame)部分の記述を
UILabel(frame: self.bounds)に切り替えたところ表示はされるが
素早くスクロールすると一つのセルの中に複数のメニューのタイトルが重なって表示されてしまうようになりました。
![イメージ説明](75fa02175066ce7b69037cccfa546bb0.gif)
![イメージ説明](75fa02175066ce7b69037cccfa546bb0.gif)
【解決方法】
MenuBarViewCellの記述を下記のようにして、addSubViewが呼び出されるのを一度だけにしたところなおりました。
```swift
class MenuBarViewCell: UICollectionViewCell {
   var isCompletedSetUpUI: Bool = false
   var title:String!{
       didSet{
           if !isCompletedSetUpUI {
               setUpUi()
           }
       }
   }
   override func awakeFromNib() {
       super.awakeFromNib()
   }
   
   private func setUpUi(){
       self.backgroundColor = .white
       var label = UILabel(frame: self.bounds)
       print(title)
       label.text = title
       label.textAlignment = .center
       self.contentView.addSubview(label)
       isCompletedSetUpUI = true
   }
}
```
  • iOS

    7182 questions

    iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム（OS）です。その他にもiPod touch・Apple TVにも搭載されています。

  • Swift

    14231 questions

    Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています
3 MenuBarViewCellのソースコードの修正

KazutakaShimizu

KazutakaShimizu score 160

2017/06/13 15:52  投稿
collectionViewで無限スクロールを実装する際、セル内のラベルにテキストがきちんと入らない
現在iosアプリを作っており、collectionViewを使った無限にスクロールできるメニューを実装しようとしています（メルカリのカテゴリメニューのようなものです）
collectionViewのセル一つ一つがメニューとなっていて
ここにメニューのタイトルを入れようとすると下記のようにうまく表示されません。
![イメージ説明](b3906eacd9abf9d5c59bb60ff48761c7.gif)
```swift
//メニュー部分全体のView
class MenuBarView: UIView {
   var pageTabItemsWidth: CGFloat = 0.0
   var collectionView:UICollectionView!
   var titles: [String] = Constant.menuTitle
   override init(frame: CGRect) {
       super.init(frame: frame)
       setUpCollectionView()
   }
   ![
文字列ではなくセルの背景色をセルごとに変えようとするとうまくいきます。
ソースコードは下記](358ec05119a0e16055670e7bdfef2f88.gif)
   required init?(coder aDecoder: NSCoder) {
       fatalError("init(coder:) has not been implemented")
   }
}
extension MenuBarView: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
   fileprivate func setUpCollectionView(){
       let layout = UICollectionViewFlowLayout()
       layout.itemSize = CGSize(width:100, height:30)
       layout.scrollDirection = .horizontal
       collectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: frame.size.width, height: frame.size.height), collectionViewLayout: layout)
       // Cellに使われるクラスを登録.
       collectionView.delegate = self
       collectionView.dataSource = self
       collectionView.showsHorizontalScrollIndicator = false
       collectionView.register(MenuBarViewCell.self, forCellWithReuseIdentifier: "MyCell")
       self.addSubview(collectionView)
       
   }
   
   func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
       print("items")
       return titles.count * 3
   }
   
   /*
    Cellに値を設定する
    */
   func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
       let cell : MenuBarViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCell",for: indexPath) as! MenuBarViewCell
       configureCell(cell: cell, indexPath: indexPath)
       return cell
   }
   
   private func configureCell(cell:MenuBarViewCell, indexPath: IndexPath){
       let fixedIndex = indexPath.item % titles.count
       cell.title = titles[fixedIndex]
   }
}
extension MenuBarView: UIScrollViewDelegate {
   func scrollViewDidScroll(_ scrollView: UIScrollView) {
       if pageTabItemsWidth == 0.0 {
           pageTabItemsWidth = floor(scrollView.contentSize.width / 3.0) // 表示したい要素群のwidthを計算
       }
       
       if (scrollView.contentOffset.x <= 0.0) || (scrollView.contentOffset.x > pageTabItemsWidth * 2.0) { // スクロールした位置がしきい値を超えたら中央に戻す
           scrollView.contentOffset.x = pageTabItemsWidth
       }
   }
}
```
```swift
//MenuBarViewで表示しているcollectionViewCell
class MenuBarViewCell: UICollectionViewCell {
   @IBOutlet var label: UILabel!  
   var text: UILabel!  
   var title:String!{
       didSet{
           setUpUi()
       }
   }
   override func awakeFromNib() {
       super.awakeFromNib()
   }
   
   private func setUpUi(){
       self.backgroundColor = .white
       label = UILabel(frame: self.frame)
       var label = UILabel(frame: self.bounds)
       label.text = title
       label.textColor = .black
       label.textAlignment = .center
       self.contentView.addSubview(label)
   }
}
```
足りてない情報等ございましたら、お手数ですがコメントをください。
どんたか教えていただけると大変助かります。よろしくお願い申し上げます。
【追記】
MenuBarViewCellのsetUpUi()内のUILabel(frame: self.frame)部分の記述を
UILabel(frame: self.bounds)に切り替えたところ表示はされるが
素早くスクロールすると一つのセルの中に複数のメニューのタイトルが重なって表示されてしまうようになりました。
![イメージ説明](75fa02175066ce7b69037cccfa546bb0.gif)
  • iOS

    7182 questions

    iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム（OS）です。その他にもiPod touch・Apple TVにも搭載されています。

  • Swift

    14231 questions

    Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています
2 追加のバグを追記

KazutakaShimizu

KazutakaShimizu score 160

2017/06/13 15:45  投稿
collectionViewで無限スクロールを実装する際、セル内のラベルにテキストがきちんと入らない
現在iosアプリを作っており、collectionViewを使った無限にスクロールできるメニューを実装しようとしています（メルカリのカテゴリメニューのようなものです）
collectionViewのセル一つ一つがメニューとなっていて
ここにメニューのタイトルを入れようとすると下記のようにうまく表示されません。
![イメージ説明](b3906eacd9abf9d5c59bb60ff48761c7.gif)
```swift
//メニュー部分全体のView
class MenuBarView: UIView {
   var pageTabItemsWidth: CGFloat = 0.0
   var collectionView:UICollectionView!
   var titles: [String] = Constant.menuTitle
   override init(frame: CGRect) {
       super.init(frame: frame)
       setUpCollectionView()
   }
   ![
文字列ではなくセルの背景色をセルごとに変えようとするとうまくいきます。
ソースコードは下記](358ec05119a0e16055670e7bdfef2f88.gif)
   required init?(coder aDecoder: NSCoder) {
       fatalError("init(coder:) has not been implemented")
   }
}
extension MenuBarView: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
   fileprivate func setUpCollectionView(){
       let layout = UICollectionViewFlowLayout()
       layout.itemSize = CGSize(width:100, height:30)
       layout.scrollDirection = .horizontal
       collectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: frame.size.width, height: frame.size.height), collectionViewLayout: layout)
       // Cellに使われるクラスを登録.
       collectionView.delegate = self
       collectionView.dataSource = self
       collectionView.showsHorizontalScrollIndicator = false
       collectionView.register(MenuBarViewCell.self, forCellWithReuseIdentifier: "MyCell")
       self.addSubview(collectionView)
       
   }
   
   func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
       print("items")
       return titles.count * 3
   }
   
   /*
    Cellに値を設定する
    */
   func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
       let cell : MenuBarViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCell",for: indexPath) as! MenuBarViewCell
       configureCell(cell: cell, indexPath: indexPath)
       return cell
   }
   
   private func configureCell(cell:MenuBarViewCell, indexPath: IndexPath){
       let fixedIndex = indexPath.item % titles.count
       cell.title = titles[fixedIndex]
   }
}
extension MenuBarView: UIScrollViewDelegate {
   func scrollViewDidScroll(_ scrollView: UIScrollView) {
       if pageTabItemsWidth == 0.0 {
           pageTabItemsWidth = floor(scrollView.contentSize.width / 3.0) // 表示したい要素群のwidthを計算
       }
       
       if (scrollView.contentOffset.x <= 0.0) || (scrollView.contentOffset.x > pageTabItemsWidth * 2.0) { // スクロールした位置がしきい値を超えたら中央に戻す
           scrollView.contentOffset.x = pageTabItemsWidth
       }
   }
}
```
```swift
//MenuBarViewで表示しているcollectionViewCell
class MenuBarViewCell: UICollectionViewCell {
   @IBOutlet var label: UILabel!
   var text: UILabel!
   var title:String!{
       didSet{
           setUpUi()
       }
   }
   override func awakeFromNib() {
       super.awakeFromNib()
   }
   
   private func setUpUi(){
       self.backgroundColor = .white
       label = UILabel(frame: self.frame)
       label.text = title
       label.textColor = .black
       label.textAlignment = .center
       self.contentView.addSubview(label)
   }
}
```
足りてない情報等ございましたら、お手数ですがコメントをください。
どんたか教えていただけると大変助かります。よろしくお願い申し上げます。
どんたか教えていただけると大変助かります。よろしくお願い申し上げます。
【追記】
MenuBarViewCellのsetUpUi()内のUILabel(frame: self.frame)部分の記述を
UILabel(frame: self.bounds)に切り替えたところ表示はされるが
素早くスクロールすると一つのセルの中に複数のメニューのタイトルが重なって表示されてしまうようになりました。
![イメージ説明](75fa02175066ce7b69037cccfa546bb0.gif)
  • iOS

    7182 questions

    iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム（OS）です。その他にもiPod touch・Apple TVにも搭載されています。

  • Swift

    14231 questions

    Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています
1 画像を変更

KazutakaShimizu

KazutakaShimizu score 160

2017/06/13 14:14  投稿
collectionViewで無限スクロールを実装する際、セル内のラベルにテキストがきちんと入らない
現在iosアプリを作っており、collectionViewを使った無限にスクロールできるメニューを実装しようとしています（メルカリのカテゴリメニューのようなものです）
collectionViewのセル一つ一つがメニューとなっていて
ここにメニューのタイトルを入れようとすると下記のようにうまく表示されません。
![イメージ説明](33f752629ac7435735b7e9bac21b76c3.gif)
![イメージ説明](b3906eacd9abf9d5c59bb60ff48761c7.gif)
文字列ではなくセルの背景色をセルごとに変えようとするとうまくいきます。
ソースコードは下記になります。
```swift
//メニュー部分全体のView
class MenuBarView: UIView {
   var pageTabItemsWidth: CGFloat = 0.0
   var collectionView:UICollectionView!
   var titles: [String] = Constant.menuTitle
   override init(frame: CGRect) {
       super.init(frame: frame)
       setUpCollectionView()
   }
   
   ![
文字列ではなくセルの背景色をセルごとに変えようとするとうまくいきます。
ソースコードは下記](358ec05119a0e16055670e7bdfef2f88.gif)
   required init?(coder aDecoder: NSCoder) {
       fatalError("init(coder:) has not been implemented")
   }
}
extension MenuBarView: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
   fileprivate func setUpCollectionView(){
       let layout = UICollectionViewFlowLayout()
       layout.itemSize = CGSize(width:100, height:30)
       layout.scrollDirection = .horizontal
       collectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: frame.size.width, height: frame.size.height), collectionViewLayout: layout)
       // Cellに使われるクラスを登録.
       collectionView.delegate = self
       collectionView.dataSource = self
       collectionView.showsHorizontalScrollIndicator = false
       collectionView.register(MenuBarViewCell.self, forCellWithReuseIdentifier: "MyCell")
       self.addSubview(collectionView)
       
   }
   
   func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
       print("items")
       return titles.count * 3
   }
   
   /*
    Cellに値を設定する
    */
   func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
       let cell : MenuBarViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCell",for: indexPath) as! MenuBarViewCell
       configureCell(cell: cell, indexPath: indexPath)
       return cell
   }
   
   private func configureCell(cell:MenuBarViewCell, indexPath: IndexPath){
       let fixedIndex = indexPath.item % titles.count
       cell.title = titles[fixedIndex]
   }
}
extension MenuBarView: UIScrollViewDelegate {
   func scrollViewDidScroll(_ scrollView: UIScrollView) {
       if pageTabItemsWidth == 0.0 {
           pageTabItemsWidth = floor(scrollView.contentSize.width / 3.0) // 表示したい要素群のwidthを計算
       }
       
       if (scrollView.contentOffset.x <= 0.0) || (scrollView.contentOffset.x > pageTabItemsWidth * 2.0) { // スクロールした位置がしきい値を超えたら中央に戻す
           scrollView.contentOffset.x = pageTabItemsWidth
       }
   }
}
```
```swift
//MenuBarViewで表示しているcollectionViewCell
class MenuBarViewCell: UICollectionViewCell {
   @IBOutlet var label: UILabel!
   var text: UILabel!
   var title:String!{
       didSet{
           setUpUi()
       }
   }
   override func awakeFromNib() {
       super.awakeFromNib()
   }
   
   private func setUpUi(){
       self.backgroundColor = .white
       label = UILabel(frame: self.frame)
       label.text = title
       label.textColor = .black
       label.textAlignment = .center
       self.contentView.addSubview(label)
   }
}
```
足りてない情報等ございましたら、お手数ですがコメントをください。
どんたか教えていただけると大変助かります。よろしくお願い申し上げます。
  • iOS

    7182 questions

    iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム（OS）です。その他にもiPod touch・Apple TVにも搭載されています。

  • Swift

    14231 questions

    Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る