From 62abf1866240f3f33a8df757aeb3c388f3b32a97 Mon Sep 17 00:00:00 2001 From: "Pfeil, Scott Robert" Date: Tue, 18 Aug 2020 10:38:01 -0400 Subject: [PATCH] tabs update --- .../HorizontalCombinationViews/Tabs.swift | 81 +++++++++---------- 1 file changed, 39 insertions(+), 42 deletions(-) diff --git a/MVMCoreUI/Atomic/Molecules/HorizontalCombinationViews/Tabs.swift b/MVMCoreUI/Atomic/Molecules/HorizontalCombinationViews/Tabs.swift index 54a33a1b..7ff032fd 100644 --- a/MVMCoreUI/Atomic/Molecules/HorizontalCombinationViews/Tabs.swift +++ b/MVMCoreUI/Atomic/Molecules/HorizontalCombinationViews/Tabs.swift @@ -27,9 +27,10 @@ import UIKit let bottomScrollView = UIScrollView(frame: .zero) let bottomContentView = View() - let bottomLine = View() - var bottomLineLeftConstraint: NSLayoutConstraint? - var bottomLineWidthConstraint: NSLayoutConstraint? + let bottomLine = Line() + let selectionLine = View() + var selectionLineLeftConstraint: NSLayoutConstraint? + var selectionLineWidthConstraint: NSLayoutConstraint? private var widthLabel = Label() @@ -45,11 +46,10 @@ import UIKit let TabCellId = "TabCell" public let sectionPadding: CGFloat = 20.0 public let cellSpacing: CGFloat = 34.0 - public let cellHeight: CGFloat = 34.0 - public let bottomLineHeight: CGFloat = 4.0 - public let bottomLineWidth: CGFloat = 32.0 - public let tabsHeight: CGFloat = 38.0 - public let bottomLineMovingTime: TimeInterval = 0.2 + public let cellHeight: CGFloat = 27.0 + public let selectionLineHeight: CGFloat = 4.0 + public let selectionLineWidth: CGFloat = 32.0 + public let selectionLineMovingTime: TimeInterval = 0.2 //------------------------------------------------- // MARK:- Layout Views @@ -57,9 +57,9 @@ import UIKit open override func reset() { super.reset() - heightConstraint?.constant = tabsHeight selectedIndex = 0 paddingBeforeFirstTab = true + bottomLine.setStyle(.none) } open override func updateView(_ size: CGFloat) { @@ -69,8 +69,10 @@ import UIKit open override func setupView() { super.setupView() backgroundColor = .white + bottomLine.setStyle(.none) + addSubview(bottomLine) setupCollectionView() - setupBottomLine() + setupSelectionLine() setupConstraints() } @@ -90,46 +92,42 @@ import UIKit self.collectionView = collectionView } - func setupBottomLine() { + func setupSelectionLine() { bottomScrollView.translatesAutoresizingMaskIntoConstraints = false bottomScrollView.delegate = self addSubview(bottomScrollView) bottomScrollView.addSubview(bottomContentView) - bottomLine.backgroundColor = .mvmRed - bottomContentView.addSubview(bottomLine) + selectionLine.backgroundColor = .mvmRed + bottomContentView.addSubview(selectionLine) bringSubviewToFront(bottomScrollView) } func setupConstraints() { //collection view - NSLayoutConstraint.constraintPinSubview(toSuperview: collectionView) + NSLayoutConstraint.constraintPinSubview(collectionView, pinTop: true, pinBottom: false, pinLeft: true, pinRight: true) + collectionView?.heightAnchor.constraint(equalToConstant: cellHeight).isActive = true - //bottom lines - NSLayoutConstraint.constraintPinSubview(bottomScrollView, pinTop: false, pinBottom: true, pinLeft: true, pinRight: true) - bottomScrollView.heightAnchor.constraint(equalToConstant: bottomLineHeight).isActive = true - NSLayoutConstraint.constraintPinSubview(bottomLine, pinTop: true, pinBottom: true, pinLeft: false, pinRight: false) - bottomLine.heightAnchor.constraint(equalToConstant: bottomLineHeight).isActive = true - bottomLineLeftConstraint = bottomLine.leftAnchor.constraint(equalTo: bottomContentView.leftAnchor) - bottomLineLeftConstraint?.isActive = true - bottomLineWidthConstraint = bottomLine.widthAnchor.constraint(equalToConstant: bottomLineWidth) - bottomLineWidthConstraint?.isActive = true + //selection line + bottomScrollView.topAnchor.constraint(equalTo: collectionView!.bottomAnchor).isActive = true; + NSLayoutConstraint.constraintPinSubview(bottomScrollView, pinTop: false, pinBottom: false, pinLeft: true, pinRight: true) + bottomScrollView.heightAnchor.constraint(equalToConstant: selectionLineHeight).isActive = true + NSLayoutConstraint.constraintPinSubview(selectionLine, pinTop: true, pinBottom: true, pinLeft: false, pinRight: false) + selectionLine.heightAnchor.constraint(equalToConstant: selectionLineHeight).isActive = true + selectionLineLeftConstraint = selectionLine.leftAnchor.constraint(equalTo: bottomContentView.leftAnchor) + selectionLineLeftConstraint?.isActive = true + selectionLineWidthConstraint = selectionLine.widthAnchor.constraint(equalToConstant: selectionLineWidth) + selectionLineWidthConstraint?.isActive = true NSLayoutConstraint.constraintPinSubview(toSuperview: bottomContentView) - //height - heightConstraint = heightAnchor.constraint(equalToConstant: tabsHeight) - heightConstraint?.isActive = true + //bottom line + bottomLine.topAnchor.constraint(equalTo: bottomScrollView.bottomAnchor).isActive = true; + NSLayoutConstraint.constraintPinSubview(bottomLine, pinTop: false, pinBottom: true, pinLeft: true, pinRight: true) } //------------------------------------------------- // MARK:- Control Methods //------------------------------------------------- - public func pinHeight(_ height: CGFloat) { - heightConstraint?.constant = height - setNeedsLayout() - layoutIfNeeded() - } - public func selectIndex(_ index: Int, animated: Bool) { guard let _ = collectionView, tabsModel?.tabs.count ?? 0 > 0 else { selectedIndex = index @@ -159,7 +157,7 @@ import UIKit self.additionalData = additionalData selectedIndex = tabsModel?.selectedIndex ?? 0 // TODO: Commented out until we have model support for bar color. Should also do unselected color. - //bottomLine.backgroundColor = tabsModel?.selectedColor.uiColor + //selectionLine.backgroundColor = tabsModel?.selectedColor.uiColor reloadData() } } @@ -224,7 +222,7 @@ extension Tabs: UICollectionViewDelegateFlowLayout { public func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) { guard let tabCell = cell as? TabItemCell else { return } if indexPath.row == selectedIndex { - moveBottomLine(toIndex: indexPath, animated: false, cell: tabCell) + moveSelectionLine(toIndex: indexPath, animated: false, cell: tabCell) } } @@ -239,7 +237,7 @@ extension Tabs: UICollectionViewDelegateFlowLayout { collect.selectItem(at: indexPath, animated: animated, scrollPosition: .centeredHorizontally) guard let tabCell = collect.cellForItem(at: indexPath) as? TabItemCell, let tabsModel = self.tabsModel else { return } - moveBottomLine(toIndex: indexPath, animated: animated, cell: tabCell) + moveSelectionLine(toIndex: indexPath, animated: animated, cell: tabCell) tabCell.label.textColor = tabsModel.selectedColor.uiColor tabCell.updateAccessibility(indexPath: indexPath, selected: true, tabsModel: tabsModel) tabCell.setNeedsDisplay() @@ -266,20 +264,20 @@ extension Tabs: UIScrollViewDelegate { // MARK:- Bottom Line Methods //------------------------------------------------- extension Tabs { - func moveBottomLine(toIndex indexPath: IndexPath, animated: Bool, cell: TabItemCell) { + func moveSelectionLine(toIndex indexPath: IndexPath, animated: Bool, cell: TabItemCell) { guard let collect = self.collectionView else {return} let size = collectionView(collect, layout: layout, sizeForItemAt: indexPath) - let barWidth = max(size.width, bottomLineWidth) + let barWidth = max(size.width, selectionLineWidth) let animationBlock = { [weak self] in let x = cell.frame.origin.x - self?.bottomLineWidthConstraint?.constant = barWidth - self?.bottomLineLeftConstraint?.constant = x + (size.width - barWidth) / 2.0 + self?.selectionLineWidthConstraint?.constant = barWidth + self?.selectionLineLeftConstraint?.constant = x + (size.width - barWidth) / 2.0 self?.bottomContentView.layoutIfNeeded() } if animated { - UIView.animate(withDuration: bottomLineMovingTime, animations: animationBlock) + UIView.animate(withDuration: selectionLineMovingTime, animations: animationBlock) } else { animationBlock() } @@ -293,8 +291,7 @@ extension Tabs { public override func setupView() { super.setupView() contentView.addSubview(label) - NSLayoutConstraint.constraintPinSubview(label, pinTop: false, pinBottom: false, pinLeft: true, pinRight: true) - label.centerYAnchor.constraint(equalTo: contentView.centerYAnchor).isActive = true + NSLayoutConstraint.constraintPinSubview(label, pinTop: false, topConstant: 0, pinBottom: true, bottomConstant: 6, pinLeft: true, leftConstant: 0, pinRight: true, rightConstant: 0) label.baselineAdjustment = .alignCenters }