UIStackView прекрасно работает в iOS 12, но не в iOS 11 - PullRequest
Новая
       42

UIStackView прекрасно работает в iOS 12, но не в iOS 11

0 голосов
/ 15 мая 2019

В iOS 12 мой горизонтальный вид стека (с тремя элементами) выглядит просто отлично:

enter image description here

Но в iOS 11 три элемента накладываются друг на друга:

enter image description here

Вот контроллер представления, который содержит представление коллекции, с одной строкой, содержащей стек: 

struct TestStackConstants {
    static let rowHeight:CGFloat = 200.0
    static let heightPerHoursLine:CGFloat = 16.0
}

public struct OpenHours: Equatable {
    public let instrument: String
    public let openStrings: [String] // ex: ["00:00 - 17:00", "17:15 - 24:00"]
    public let dayOfWeek: String // ex: Wednesday
    public let timeZone: String // ex: GMT-04:00
}

class TSViewController: UIViewController {

    fileprivate var extendedCollection: UICollectionView!
    fileprivate var myTimeZone = "GMT-0:400"
    fileprivate var dailyHours = [OpenHours]()

    override func viewDidLoad() {
        super.viewDidLoad()

        setupView()

        let day1 = OpenHours(instrument: "USD/CAD", openStrings: ["00:00 - 12:00", "12:05 - 24:00"], dayOfWeek: "Monday", timeZone: "GMT-04:00")
        let day2 = OpenHours(instrument: "USD/CAD", openStrings: ["00:00 - 24:00"], dayOfWeek: "Tuesday", timeZone: "GMT-04:00")
        let day3 = OpenHours(instrument: "USD/CAD", openStrings: ["00:00 - 24:00"], dayOfWeek: "Wednesday", timeZone: "GMT-04:00")
        dailyHours = [day1, day2, day3]
    }

    private func setupView() {
        let myLayout = UICollectionViewFlowLayout()
        extendedCollection = UICollectionView(frame: .zero, collectionViewLayout: myLayout)
        extendedCollection.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(extendedCollection)
        NSLayoutConstraint.activate([
            extendedCollection.topAnchor.constraint(equalTo: self.view.topAnchor),
            extendedCollection.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
            extendedCollection.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
            extendedCollection.trailingAnchor.constraint(equalTo: self.view.trailingAnchor)
            ])
        extendedCollection.backgroundColor = .gray
        extendedCollection.dataSource = self
        extendedCollection.delegate = self
        extendedCollection.register(TSHoursInfoCell.self, forCellWithReuseIdentifier: "infoCell")
    }
}

// MARK: - Extensions

extension TSViewController: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 1
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "infoCell", for: indexPath) as! TSHoursInfoCell
        cell.marketTitle.text = "MARKET HOURS (" + myTimeZone + ")"

        if self.dailyHours.count > 0 {
            for (item, hours) in zip(cell.threeDays, dailyHours) {
                item.dayOfWeek.text = hours.dayOfWeek.uppercased()
                item.hoursHeightConstraint.constant = CGFloat(hours.openStrings.count) * TestStackConstants.heightPerHoursLine
                item.dailyTime.text = hours.openStrings.joined(separator: "\n")
            }
        }

        return cell
    }
}

extension TSViewController: UICollectionViewDelegate { /*...*/ }

extension TSViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        sizeForItemAt indexPath: IndexPath) -> CGSize {
        let returnSize = CGSize(width: collectionView.bounds.size.width, height: TestStackConstants.rowHeight)
        return returnSize
    }
}

Вот определение ячейки коллекции, которая содержит заголовок и стек: 

struct HoursConstants {
    static let insetting:CGFloat = 24.0
    static let titleSmallFont = UIFont.systemFont(ofSize: 12.0)
    static let titleSmallBoldFont = UIFont.boldSystemFont(ofSize: 12.0)
    static let hoursWidth:CGFloat = 96.0
}

class TSHoursInfoCell: UICollectionViewCell {
    public var marketTitle: UILabel!
    public var threeDays: [TSHoursDailyView]!

    fileprivate let horizStack: UIStackView = {
        let stackView = UIStackView()
        stackView.axis = .horizontal
        stackView.distribution = .fillEqually
        stackView.alignment = .center
        stackView.spacing = 0.0
        stackView.translatesAutoresizingMaskIntoConstraints = false
        return stackView
    }()

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

        self.backgroundColor = .gray

        marketTitle = UILabel(frame: .zero)
        marketTitle.translatesAutoresizingMaskIntoConstraints = false
        contentView.addSubview(marketTitle)
        NSLayoutConstraint.activate([
            marketTitle.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10.0),
            marketTitle.heightAnchor.constraint(equalToConstant: 20.0),
            marketTitle.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: HoursConstants.insetting),
            marketTitle.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -HoursConstants.insetting)
            ])
        marketTitle.font = HoursConstants.titleSmallBoldFont
        marketTitle.textColor = .orange
        marketTitle.textAlignment = .left

        contentView.addSubview(horizStack)
        NSLayoutConstraint.activate([
            horizStack.topAnchor.constraint(equalTo: marketTitle.bottomAnchor, constant: 7.0),
            horizStack.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: HoursConstants.insetting),
            horizStack.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -HoursConstants.insetting)
            ])

        threeDays = [TSHoursDailyView(), TSHoursDailyView(), TSHoursDailyView()]
        horizStack.addArrangedSubview(threeDays[0])
        horizStack.addArrangedSubview(threeDays[1])
        horizStack.addArrangedSubview(threeDays[2])
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

class TSHoursDailyView: UIView {
    public var dayOfWeek: UILabel!
    public var dailyTime: UILabel!
    public var hoursHeightConstraint: NSLayoutConstraint!

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

        dayOfWeek = UILabel(frame: .zero)
        dayOfWeek.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(dayOfWeek)
        NSLayoutConstraint.activate([
            dayOfWeek.topAnchor.constraint(equalTo: self.topAnchor, constant: 5.0),
            dayOfWeek.heightAnchor.constraint(equalToConstant: 16.0),
            dayOfWeek.widthAnchor.constraint(equalToConstant: HoursConstants.hoursWidth)
            ])
        dayOfWeek.font = HoursConstants.titleSmallBoldFont
        dayOfWeek.textColor = .white
        dayOfWeek.textAlignment = .left

        dailyTime = UILabel(frame: .zero)
        dailyTime.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(dailyTime)
        NSLayoutConstraint.activate([
            dailyTime.topAnchor.constraint(equalTo: dayOfWeek.bottomAnchor, constant: 5.0),
            dailyTime.widthAnchor.constraint(equalToConstant: HoursConstants.hoursWidth)
            ])
        hoursHeightConstraint = dailyTime.heightAnchor.constraint(equalToConstant: 24.0)
        hoursHeightConstraint.isActive = true

        dailyTime.font = HoursConstants.titleSmallFont
        dailyTime.numberOfLines = 0
        dailyTime.textColor = .white
        dailyTime.textAlignment = .left
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

Я не вижу ничего специфичного для iOS 12; почему они выкладывают по разному?

1 Ответ

3 голосов
/ 15 мая 2019

Я удивлен, что ваш код дал такой результат на iOS 12+ ... но он это сделал.

Основной проблемой было отсутствие ограничений по X-позициям для ваших dayOfWeek и dailyTime меток.

Я сделал пару других изменений, которые могут помочь ... Вместо использования жестко запрограммированных / вычисленных значений hoursHeightConstraint.constant добавил нижнее ограничение, чтобы он использовал внутреннюю высоту этой метки.

Вот результаты 12 +

enter image description here

и 11

enter image description here

и модифицированный код (просто посмотрите на // DonMag: ... комментарии - их всего несколько, но более надежно, чтобы опубликовать все это обратно на''ха :): 

struct TestStackConstants {
    static let rowHeight:CGFloat = 200.0
    static let heightPerHoursLine:CGFloat = 16.0
}

public struct OpenHours: Equatable {
    public let instrument: String
    public let openStrings: [String] // ex: ["00:00 - 17:00", "17:15 - 24:00"]
    public let dayOfWeek: String // ex: Wednesday
    public let timeZone: String // ex: GMT-04:00
}

class TSViewController: UIViewController {

    fileprivate var extendedCollection: UICollectionView!
    fileprivate var myTimeZone = "GMT-0:400"
    fileprivate var dailyHours = [OpenHours]()

    override func viewDidLoad() {
        super.viewDidLoad()

        setupView()

        let day1 = OpenHours(instrument: "USD/CAD", openStrings: ["00:00 - 12:00", "12:05 - 24:00"], dayOfWeek: "Monday", timeZone: "GMT-04:00")
        let day2 = OpenHours(instrument: "USD/CAD", openStrings: ["00:00 - 24:00"], dayOfWeek: "Tuesday", timeZone: "GMT-04:00")
        let day3 = OpenHours(instrument: "USD/CAD", openStrings: ["00:00 - 24:00"], dayOfWeek: "Wednesday", timeZone: "GMT-04:00")
        dailyHours = [day1, day2, day3]
    }

    private func setupView() {
        let myLayout = UICollectionViewFlowLayout()
        extendedCollection = UICollectionView(frame: .zero, collectionViewLayout: myLayout)
        extendedCollection.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(extendedCollection)
        NSLayoutConstraint.activate([
            extendedCollection.topAnchor.constraint(equalTo: self.view.topAnchor),
            extendedCollection.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
            extendedCollection.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
            extendedCollection.trailingAnchor.constraint(equalTo: self.view.trailingAnchor)
            ])
        extendedCollection.backgroundColor = .gray
        extendedCollection.dataSource = self
        extendedCollection.delegate = self
        extendedCollection.register(TSHoursInfoCell.self, forCellWithReuseIdentifier: "infoCell")
    }
}

// MARK: - Extensions

extension TSViewController: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 1
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "infoCell", for: indexPath) as! TSHoursInfoCell
        cell.marketTitle.text = "MARKET HOURS (" + myTimeZone + ")"

        if self.dailyHours.count > 0 {
            for (item, hours) in zip(cell.threeDays, dailyHours) {
                item.dayOfWeek.text = hours.dayOfWeek.uppercased()

                // DonMag: remove -- using label intrinsic height
//              item.hoursHeightConstraint.constant = CGFloat(hours.openStrings.count) * TestStackConstants.heightPerHoursLine

                item.dailyTime.text = hours.openStrings.joined(separator: "\n")
            }
        }

        return cell
    }
}

extension TSViewController: UICollectionViewDelegate { /*...*/ }

extension TSViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        sizeForItemAt indexPath: IndexPath) -> CGSize {
        let returnSize = CGSize(width: collectionView.bounds.size.width, height: TestStackConstants.rowHeight)
        return returnSize
    }
}

struct HoursConstants {
    static let insetting:CGFloat = 24.0
    static let titleSmallFont = UIFont.systemFont(ofSize: 12.0)
    static let titleSmallBoldFont = UIFont.boldSystemFont(ofSize: 12.0)
    static let hoursWidth:CGFloat = 96.0
}

class TSHoursInfoCell: UICollectionViewCell {
    public var marketTitle: UILabel!
    public var threeDays: [TSHoursDailyView]!

    fileprivate let horizStack: UIStackView = {
        let stackView = UIStackView()
        stackView.axis = .horizontal
        stackView.distribution = .fillEqually

        // DonMag: changed alignment
        stackView.alignment = .top  // .center

        stackView.spacing = 0.0
        stackView.translatesAutoresizingMaskIntoConstraints = false
        return stackView
    }()

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

        self.backgroundColor = .gray

        marketTitle = UILabel(frame: .zero)
        marketTitle.translatesAutoresizingMaskIntoConstraints = false
        contentView.addSubview(marketTitle)
        NSLayoutConstraint.activate([
            marketTitle.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10.0),
            marketTitle.heightAnchor.constraint(equalToConstant: 20.0),
            marketTitle.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: HoursConstants.insetting),
            marketTitle.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -HoursConstants.insetting)
            ])
        marketTitle.font = HoursConstants.titleSmallBoldFont
        marketTitle.textColor = .orange
        marketTitle.textAlignment = .left

        contentView.addSubview(horizStack)
        NSLayoutConstraint.activate([
            horizStack.topAnchor.constraint(equalTo: marketTitle.bottomAnchor, constant: 7.0),
            horizStack.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: HoursConstants.insetting),
            horizStack.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -HoursConstants.insetting)
            ])

        threeDays = [TSHoursDailyView(), TSHoursDailyView(), TSHoursDailyView()]
        horizStack.addArrangedSubview(threeDays[0])
        horizStack.addArrangedSubview(threeDays[1])
        horizStack.addArrangedSubview(threeDays[2])

        // DonMag: un-comment to clearly see the view frames
//      threeDays[0].backgroundColor = .red
//      threeDays[1].backgroundColor = .blue
//      threeDays[2].backgroundColor = .brown

    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

class TSHoursDailyView: UIView {
    public var dayOfWeek: UILabel!
    public var dailyTime: UILabel!

    // DonMag: remove -- use label bottomAnchor to determine height
//  public var hoursHeightConstraint: NSLayoutConstraint!

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

        dayOfWeek = UILabel(frame: .zero)
        dayOfWeek.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(dayOfWeek)
        NSLayoutConstraint.activate([
            dayOfWeek.topAnchor.constraint(equalTo: self.topAnchor, constant: 5.0),
            dayOfWeek.heightAnchor.constraint(equalToConstant: 16.0),
            dayOfWeek.widthAnchor.constraint(equalToConstant: HoursConstants.hoursWidth),

            // DonMag: added -- needed x-position
            dayOfWeek.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 0.0),

            ])
        dayOfWeek.font = HoursConstants.titleSmallBoldFont
        dayOfWeek.textColor = .white
        dayOfWeek.textAlignment = .left

        dailyTime = UILabel(frame: .zero)
        dailyTime.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(dailyTime)
        NSLayoutConstraint.activate([
            dailyTime.topAnchor.constraint(equalTo: dayOfWeek.bottomAnchor, constant: 5.0),
            dailyTime.widthAnchor.constraint(equalToConstant: HoursConstants.hoursWidth),

            // DonMag: added -- needed x-position
            dailyTime.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 0.0),

            // DonMag: added -- use label height to determine height of view
            dailyTime.bottomAnchor.constraint(lessThanOrEqualTo: self.bottomAnchor, constant: -5.0),

            ])

        // DonMag: remove -- use label bottomAnchor to determine height
//      hoursHeightConstraint = dailyTime.heightAnchor.constraint(equalToConstant: 24.0)
//      hoursHeightConstraint.isActive = true

        dailyTime.font = HoursConstants.titleSmallFont
        dailyTime.numberOfLines = 0
        dailyTime.textColor = .white
        dailyTime.textAlignment = .left
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...