Xlpagertabstrip: Cannot use Image on Tab

Created on 29 Sep 2016 · 12Comments · Source: xmartlabs/XLPagerTabStrip

When i overide this method
func indicatorInfoForPagerTabStrip(pagerTabStripController: PagerTabStripViewController) -> IndicatorInfo { return IndicatorInfo(title: "", image: UIImage(named: "tick_green"), highlightedImage: UIImage(named: "tick_green")) }
In this tick_green is an image i add to Assets.xcassets of my Project
i got an error "fatal error: unexpectedly found nil while unwrapping an Optional value"
I don't know how to fix. Can you help me?

Source

tannt275

Most helpful comment

I found two quick and simple workarounds:

1) Overriding the collectionView method and instantiating and injecting cell.imageView (best)
2) Modifying the cell within configureCell override method:

    // 1)
    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        ...

        if let image = indicatorInfo.image {
            cell.imageView = UIImageView()
            cell.imageView.frame = CGRect(x: 0, y: 10, width: cell.bounds.width, height: 25)
            cell.imageView.image = image
            cell.imageView.image = cell.imageView.image!.withRenderingMode(.alwaysTemplate)
            cell.imageView.tintColor = .white
            cell.imageView.contentMode = .scaleAspectFit
            cell.imageView.addSubview(cell.imageView)
            cell.label.removeFromSuperview()
        }
    }

    // 2)
    func setTabImageView(frame: CGRect, image: UIImage) -> UIImageView {
        let imageView = UIImageView()

        imageView.frame = frame
        imageView.image = image
        imageView.image = imageView.image!.withRenderingMode(.alwaysTemplate)
        imageView.tintColor = .white
        imageView.contentMode = .scaleAspectFit

        return imageView
    }

    override func configureCell(_ cell: ButtonBarViewCell, indicatorInfo: IndicatorInfo) {
        super.configureCell(cell, indicatorInfo: indicatorInfo)

        let frame = CGRect(x: 0, y: 10, width: cell.bounds.width, height: 25)

        switch indicatorInfo.title {
        case "TAB_TITLE_1":
            cell.addSubview(setTabImageView(frame: frame, image: UIImage(named: "tab_icon_1")!))
            break
        case "TAB_TITLE_2":
            cell.addSubview(setTabImageView(frame: frame, image: UIImage(named: "tab_icon_2")!))
            break
        default:
            cell.addSubview(setTabImageView(frame: frame, image: UIImage(named: "alert")!))
        }

        cell.label.removeFromSuperview()
        cell.backgroundColor = .clear
    }

matthewbschneider on 31 Dec 2016

👍4

All 12 comments

robforsythe on 16 Oct 2016

PhilizSwiss on 17 Oct 2016

elementsrtyte on 26 Oct 2016

its because ButtonCell.xib doesn't even contain imageView, but class have empty outlet for that. And when you trying to set image to not existed image view - it's crashed.
So, it's definetely not a bug, it is just not implemented for some reason :D

StanK23 on 28 Oct 2016

Any workaround for this ? How can I manage to have an icon instead of a text in the tab bar ? Thanks !!

PhilizSwiss on 23 Nov 2016

I found two quick and simple workarounds:

1) Overriding the collectionView method and instantiating and injecting cell.imageView (best)
2) Modifying the cell within configureCell override method:

    // 1)
    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        ...

        if let image = indicatorInfo.image {
            cell.imageView = UIImageView()
            cell.imageView.frame = CGRect(x: 0, y: 10, width: cell.bounds.width, height: 25)
            cell.imageView.image = image
            cell.imageView.image = cell.imageView.image!.withRenderingMode(.alwaysTemplate)
            cell.imageView.tintColor = .white
            cell.imageView.contentMode = .scaleAspectFit
            cell.imageView.addSubview(cell.imageView)
            cell.label.removeFromSuperview()
        }
    }

    // 2)
    func setTabImageView(frame: CGRect, image: UIImage) -> UIImageView {
        let imageView = UIImageView()

        imageView.frame = frame
        imageView.image = image
        imageView.image = imageView.image!.withRenderingMode(.alwaysTemplate)
        imageView.tintColor = .white
        imageView.contentMode = .scaleAspectFit

        return imageView
    }

    override func configureCell(_ cell: ButtonBarViewCell, indicatorInfo: IndicatorInfo) {
        super.configureCell(cell, indicatorInfo: indicatorInfo)

        let frame = CGRect(x: 0, y: 10, width: cell.bounds.width, height: 25)

        switch indicatorInfo.title {
        case "TAB_TITLE_1":
            cell.addSubview(setTabImageView(frame: frame, image: UIImage(named: "tab_icon_1")!))
            break
        case "TAB_TITLE_2":
            cell.addSubview(setTabImageView(frame: frame, image: UIImage(named: "tab_icon_2")!))
            break
        default:
            cell.addSubview(setTabImageView(frame: frame, image: UIImage(named: "alert")!))
        }

        cell.label.removeFromSuperview()
        cell.backgroundColor = .clear
    }

matthewbschneider on 31 Dec 2016

👍4