mbrucedogs/vds_ios
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactored badge indicator to final specs

Browse Source 
Signed-off-by: Matt Bruce <matt.bruce@verizon.com>
This commit is contained in:
Matt Bruce 2023-06-20 14:21:11 -05:00
parent c1b91cc651
commit b6e7dcbada
2 changed files with 77 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
VDS/Components/BadgeIndicator/BadgeIndicator.swift
View File

@ -89,6 +89,21 @@ open class BadgeIndicator: View {
letterSpacing: letterSpacing) letterSpacing: letterSpacing)
} }
public var edgeInset: UIEdgeInsets {
var horizontalPadding: CGFloat = VDSLayout.Spacing.space1X.value
let verticalPadding: CGFloat = 0
switch self {
case .xxlarge:
horizontalPadding = VDSLayout.Spacing.space2X.value
case .xlarge, .large,.medium:
horizontalPadding = 6.0
case .small:
break
}
return .init(top: verticalPadding, left: horizontalPadding, bottom: verticalPadding, right: horizontalPadding)
}
} }
//-------------------------------------------------- //--------------------------------------------------
@ -149,12 +164,17 @@ open class BadgeIndicator: View {
open var width: CGFloat? { didSet { setNeedsUpdate() }} open var width: CGFloat? { didSet { setNeedsUpdate() }}
open var height: CGFloat? { didSet { setNeedsUpdate() }} open var height: CGFloat? { didSet { setNeedsUpdate() }}
//--------------------------------------------------
// MARK: - Private Properties
//--------------------------------------------------
private let borderWidth: CGFloat = 1.0
//-------------------------------------------------- //--------------------------------------------------
// MARK: - Constraints // MARK: - Constraints
//-------------------------------------------------- //--------------------------------------------------
private let layoutGuide = UILayoutGuide() private let badgeView = View()
private var defaultBadgeSize: CGFloat { max(16.0, size.textStyle.font.lineHeight) } private var badgeSize: CGFloat { max(16.0, size.textStyle.font.lineHeight) }
private var widthConstraint: NSLayoutConstraint? private var widthConstraint: NSLayoutConstraint?
private var heightConstraint: NSLayoutConstraint? private var heightConstraint: NSLayoutConstraint?
private var labelContraints = NSLayoutConstraint.Container() private var labelContraints = NSLayoutConstraint.Container()
@ -166,28 +186,29 @@ open class BadgeIndicator: View {
open override func setup() { open override func setup() {
super.setup() super.setup()
addLayoutGuide(layoutGuide) addSubview(badgeView)
addSubview(label) badgeView.addSubview(label)
accessibilityElements = [label] accessibilityElements = [label]
heightConstraint = layoutGuide.heightAnchor.constraint(greaterThanOrEqualToConstant: defaultBadgeSize) heightConstraint = badgeView.heightAnchor.constraint(greaterThanOrEqualToConstant: badgeSize)
heightConstraint?.isActive = true heightConstraint?.isActive = true
widthConstraint = layoutGuide.widthAnchor.constraint(greaterThanOrEqualToConstant: defaultBadgeSize) widthConstraint = badgeView.widthAnchor.constraint(greaterThanOrEqualToConstant: badgeSize)
widthConstraint?.isActive = true widthConstraint?.isActive = true
//we are insetting the padding to compensate for the border
NSLayoutConstraint.activate([ NSLayoutConstraint.activate([
layoutGuide.topAnchor.constraint(equalTo: topAnchor, constant: 1), badgeView.topAnchor.constraint(equalTo: topAnchor, constant: borderWidth),
layoutGuide.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -1), badgeView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -borderWidth),
layoutGuide.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 1), badgeView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: borderWidth),
layoutGuide.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -1)]) badgeView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -borderWidth)])
labelContraints.topConstraint = label.pinTopGreaterThanOrEqualTo(anchor: layoutGuide.topAnchor) labelContraints.topConstraint = label.pinTopGreaterThanOrEqualTo(anchor: badgeView.topAnchor)
labelContraints.bottomConstraint = label.pinBottomGreaterThanOrEqualTo(anchor: layoutGuide.bottomAnchor) labelContraints.bottomConstraint = label.pinBottomGreaterThanOrEqualTo(anchor: badgeView.bottomAnchor)
labelContraints.leadingConstraint = label.pinLeadingGreaterThanOrEqualTo(anchor: layoutGuide.leadingAnchor) labelContraints.leadingConstraint = label.pinLeadingGreaterThanOrEqualTo(anchor: badgeView.leadingAnchor)
labelContraints.trailingConstraint = label.pinTrailingGreaterThanOrEqualTo(anchor: layoutGuide.trailingAnchor) labelContraints.trailingConstraint = label.pinTrailingGreaterThanOrEqualTo(anchor: badgeView.trailingAnchor)
label.centerXAnchor.constraint(equalTo: layoutGuide.centerXAnchor).isActive = true label.centerXAnchor.constraint(equalTo: badgeView.centerXAnchor).isActive = true
label.centerYAnchor.constraint(equalTo: layoutGuide.centerYAnchor).isActive = true label.centerYAnchor.constraint(equalTo: badgeView.centerYAnchor).isActive = true
labelContraints.isActive = true labelContraints.isActive = true
} }
@ -203,20 +224,18 @@ open class BadgeIndicator: View {
shouldUpdateView = true shouldUpdateView = true
setNeedsUpdate() setNeedsUpdate()
} }
private let defaultInset = VDSLayout.Spacing.space1X.value
private var labelEdgeInset: UIEdgeInsets {
private var labelEdgeInset: UIEdgeInsets {
var newInset = size.edgeInset
if let verticalPadding, let horitonalPadding { if let verticalPadding, let horitonalPadding {
return .init(top: verticalPadding, left: horitonalPadding, bottom: verticalPadding, right: horitonalPadding) newInset = .init(top: verticalPadding, left: horitonalPadding, bottom: verticalPadding, right: horitonalPadding)
} else if let verticalPadding { } else if let verticalPadding {
return .init(top: verticalPadding, left: defaultInset, bottom: verticalPadding, right: defaultInset) newInset = .init(top: verticalPadding, left: newInset.left, bottom: verticalPadding, right: newInset.right)
} else if let horitonalPadding { } else if let horitonalPadding {
return .init(top: defaultInset, left: horitonalPadding, bottom: defaultInset, right: horitonalPadding) newInset = .init(top: newInset.top, left: horitonalPadding, bottom: newInset.bottom, right: horitonalPadding)
} else {
return .init(top: 0, left: defaultInset, bottom: 0, right: defaultInset)
} }
return newInset
} }
//-------------------------------------------------- //--------------------------------------------------
@ -265,17 +284,17 @@ open class BadgeIndicator: View {
open override func updateView() { open override func updateView() {
updateTextColorConfig() updateTextColorConfig()
backgroundColor = backgroundColorConfiguration.getColor(self) badgeView.backgroundColor = backgroundColorConfiguration.getColor(self)
//height width //height width
heightConstraint?.isActive = false heightConstraint?.isActive = false
widthConstraint?.isActive = false widthConstraint?.isActive = false
if let width, let height { if let width, let height, height > badgeSize, width > badgeSize, height <= width {
heightConstraint = layoutGuide.heightAnchor.constraint(equalToConstant: height) heightConstraint = badgeView.heightAnchor.constraint(equalToConstant: height)
widthConstraint = layoutGuide.widthAnchor.constraint(equalToConstant: width) widthConstraint = badgeView.widthAnchor.constraint(equalToConstant: width)
} else { } else {
heightConstraint = layoutGuide.heightAnchor.constraint(greaterThanOrEqualToConstant: defaultBadgeSize) heightConstraint = badgeView.heightAnchor.constraint(greaterThanOrEqualToConstant: badgeSize)
widthConstraint = layoutGuide.widthAnchor.constraint(greaterThanOrEqualToConstant: defaultBadgeSize) widthConstraint = badgeView.widthAnchor.constraint(greaterThanOrEqualToConstant: badgeSize)
} }
heightConstraint?.isActive = true heightConstraint?.isActive = true
widthConstraint?.isActive = true widthConstraint?.isActive = true
@ -329,32 +348,42 @@ open class BadgeIndicator: View {
open override func layoutSubviews() { open override func layoutSubviews() {
super.layoutSubviews() super.layoutSubviews()
layer.cornerRadius = frame.size.height / 2
//update the cornerRadius
badgeView.layer.cornerRadius = badgeView.frame.size.height / 2
layer.cornerRadius = frame.size.height / 2
//border
if hideBorder { if hideBorder {
layer.borderWidth = 0 layer.borderWidth = 0
} else { } else {
layer.borderWidth = borderWidth
layer.borderColor = borderColorConfiguration.getColor(surface).cgColor layer.borderColor = borderColorConfiguration.getColor(surface).cgColor
layer.borderWidth = 1
} }
layer.remove(layerName: "dot") //dot
badgeView.layer.remove(layerName: "dot")
if kind == .simple && !hideDot { if kind == .simple && !hideDot {
var dot: CGFloat = bounds.width * 0.1875 //frame for the dot to sit inside
if let dotSize { let frame = badgeView.frame
//default calculation if a dotSize isn't given
var dot: CGFloat = frame.width * 0.1875
if let dotSize, dotSize < frame.width, dotSize < frame.height {
dot = dotSize dot = dotSize
} }
//get the center of the frame
let centerX = (frame.width - dot) / 2.0
let centerY = (frame.height - dot) / 2.0
//create the layer to draw the dot
let dotLayer = CAShapeLayer() let dotLayer = CAShapeLayer()
dotLayer.name = "dot" dotLayer.name = "dot"
let centerX = (bounds.width - dot) / 2.0
let centerY = (bounds.height - dot) / 2.0
dotLayer.frame = .init(x: centerX, y: centerY, width: dot, height: dot) dotLayer.frame = .init(x: centerX, y: centerY, width: dot, height: dot)
dotLayer.path = UIBezierPath(ovalIn: .init(origin: .zero, size: .init(width: dot, height: dot))).cgPath dotLayer.path = UIBezierPath(ovalIn: .init(origin: .zero, size: .init(width: dot, height: dot))).cgPath
dotLayer.fillColor = textColorConfiguration.getColor(self).cgColor dotLayer.fillColor = textColorConfiguration.getColor(self).cgColor
layer.addSublayer(dotLayer) badgeView.layer.addSublayer(dotLayer)
} }
} }
} }

6
VDS/SupportingFiles/ReleaseNotes.txt
View File

@ -1,4 +1,8 @@
1.0.23 1.0.25
=======
- Added Size, Width, Height, Horizontal/Vertical Padding + more to Badge Indicator
1.0.24
======= =======
- Added Badge Indicator - Added Badge Indicator
- Refactored the TextStyle system to support Badge Indicator - Refactored the TextStyle system to support Badge Indicator