refactored badge indicator to final specs
Signed-off-by: Matt Bruce <matt.bruce@verizon.com>
This commit is contained in:
Matt Bruce
parent
c1b91cc651
commit
b6e7dcbada
@ -89,6 +89,21 @@ open class BadgeIndicator: View {
|
||||
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 height: CGFloat? { didSet { setNeedsUpdate() }}
|
||||
|
||||
|
||||
//--------------------------------------------------
|
||||
// MARK: - Private Properties
|
||||
//--------------------------------------------------
|
||||
private let borderWidth: CGFloat = 1.0
|
||||
|
||||
//--------------------------------------------------
|
||||
// MARK: - Constraints
|
||||
//--------------------------------------------------
|
||||
private let layoutGuide = UILayoutGuide()
|
||||
private var defaultBadgeSize: CGFloat { max(16.0, size.textStyle.font.lineHeight) }
|
||||
private let badgeView = View()
|
||||
private var badgeSize: CGFloat { max(16.0, size.textStyle.font.lineHeight) }
|
||||
private var widthConstraint: NSLayoutConstraint?
|
||||
private var heightConstraint: NSLayoutConstraint?
|
||||
private var labelContraints = NSLayoutConstraint.Container()
|
||||
@ -166,28 +186,29 @@ open class BadgeIndicator: View {
|
||||
open override func setup() {
|
||||
super.setup()
|
||||
|
||||
addLayoutGuide(layoutGuide)
|
||||
addSubview(label)
|
||||
addSubview(badgeView)
|
||||
badgeView.addSubview(label)
|
||||
accessibilityElements = [label]
|
||||
|
||||
heightConstraint = layoutGuide.heightAnchor.constraint(greaterThanOrEqualToConstant: defaultBadgeSize)
|
||||
heightConstraint = badgeView.heightAnchor.constraint(greaterThanOrEqualToConstant: badgeSize)
|
||||
heightConstraint?.isActive = true
|
||||
|
||||
widthConstraint = layoutGuide.widthAnchor.constraint(greaterThanOrEqualToConstant: defaultBadgeSize)
|
||||
widthConstraint = badgeView.widthAnchor.constraint(greaterThanOrEqualToConstant: badgeSize)
|
||||
widthConstraint?.isActive = true
|
||||
|
||||
//we are insetting the padding to compensate for the border
|
||||
NSLayoutConstraint.activate([
|
||||
layoutGuide.topAnchor.constraint(equalTo: topAnchor, constant: 1),
|
||||
layoutGuide.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -1),
|
||||
layoutGuide.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 1),
|
||||
layoutGuide.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -1)])
|
||||
badgeView.topAnchor.constraint(equalTo: topAnchor, constant: borderWidth),
|
||||
badgeView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -borderWidth),
|
||||
badgeView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: borderWidth),
|
||||
badgeView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -borderWidth)])
|
||||
|
||||
labelContraints.topConstraint = label.pinTopGreaterThanOrEqualTo(anchor: layoutGuide.topAnchor)
|
||||
labelContraints.bottomConstraint = label.pinBottomGreaterThanOrEqualTo(anchor: layoutGuide.bottomAnchor)
|
||||
labelContraints.leadingConstraint = label.pinLeadingGreaterThanOrEqualTo(anchor: layoutGuide.leadingAnchor)
|
||||
labelContraints.trailingConstraint = label.pinTrailingGreaterThanOrEqualTo(anchor: layoutGuide.trailingAnchor)
|
||||
label.centerXAnchor.constraint(equalTo: layoutGuide.centerXAnchor).isActive = true
|
||||
label.centerYAnchor.constraint(equalTo: layoutGuide.centerYAnchor).isActive = true
|
||||
labelContraints.topConstraint = label.pinTopGreaterThanOrEqualTo(anchor: badgeView.topAnchor)
|
||||
labelContraints.bottomConstraint = label.pinBottomGreaterThanOrEqualTo(anchor: badgeView.bottomAnchor)
|
||||
labelContraints.leadingConstraint = label.pinLeadingGreaterThanOrEqualTo(anchor: badgeView.leadingAnchor)
|
||||
labelContraints.trailingConstraint = label.pinTrailingGreaterThanOrEqualTo(anchor: badgeView.trailingAnchor)
|
||||
label.centerXAnchor.constraint(equalTo: badgeView.centerXAnchor).isActive = true
|
||||
label.centerYAnchor.constraint(equalTo: badgeView.centerYAnchor).isActive = true
|
||||
labelContraints.isActive = true
|
||||
|
||||
}
|
||||
@ -203,20 +224,18 @@ open class BadgeIndicator: View {
|
||||
shouldUpdateView = true
|
||||
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 {
|
||||
return .init(top: verticalPadding, left: horitonalPadding, bottom: verticalPadding, right: horitonalPadding)
|
||||
newInset = .init(top: verticalPadding, left: horitonalPadding, bottom: verticalPadding, right: horitonalPadding)
|
||||
} 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 {
|
||||
return .init(top: defaultInset, left: horitonalPadding, bottom: defaultInset, right: horitonalPadding)
|
||||
} else {
|
||||
return .init(top: 0, left: defaultInset, bottom: 0, right: defaultInset)
|
||||
newInset = .init(top: newInset.top, left: horitonalPadding, bottom: newInset.bottom, right: horitonalPadding)
|
||||
}
|
||||
|
||||
return newInset
|
||||
}
|
||||
|
||||
//--------------------------------------------------
|
||||
@ -265,17 +284,17 @@ open class BadgeIndicator: View {
|
||||
open override func updateView() {
|
||||
updateTextColorConfig()
|
||||
|
||||
backgroundColor = backgroundColorConfiguration.getColor(self)
|
||||
badgeView.backgroundColor = backgroundColorConfiguration.getColor(self)
|
||||
|
||||
//height width
|
||||
heightConstraint?.isActive = false
|
||||
widthConstraint?.isActive = false
|
||||
if let width, let height {
|
||||
heightConstraint = layoutGuide.heightAnchor.constraint(equalToConstant: height)
|
||||
widthConstraint = layoutGuide.widthAnchor.constraint(equalToConstant: width)
|
||||
if let width, let height, height > badgeSize, width > badgeSize, height <= width {
|
||||
heightConstraint = badgeView.heightAnchor.constraint(equalToConstant: height)
|
||||
widthConstraint = badgeView.widthAnchor.constraint(equalToConstant: width)
|
||||
} else {
|
||||
heightConstraint = layoutGuide.heightAnchor.constraint(greaterThanOrEqualToConstant: defaultBadgeSize)
|
||||
widthConstraint = layoutGuide.widthAnchor.constraint(greaterThanOrEqualToConstant: defaultBadgeSize)
|
||||
heightConstraint = badgeView.heightAnchor.constraint(greaterThanOrEqualToConstant: badgeSize)
|
||||
widthConstraint = badgeView.widthAnchor.constraint(greaterThanOrEqualToConstant: badgeSize)
|
||||
}
|
||||
heightConstraint?.isActive = true
|
||||
widthConstraint?.isActive = true
|
||||
@ -329,32 +348,42 @@ open class BadgeIndicator: View {
|
||||
|
||||
open override func 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 {
|
||||
layer.borderWidth = 0
|
||||
} else {
|
||||
layer.borderWidth = borderWidth
|
||||
layer.borderColor = borderColorConfiguration.getColor(surface).cgColor
|
||||
layer.borderWidth = 1
|
||||
}
|
||||
|
||||
layer.remove(layerName: "dot")
|
||||
//dot
|
||||
badgeView.layer.remove(layerName: "dot")
|
||||
if kind == .simple && !hideDot {
|
||||
var dot: CGFloat = bounds.width * 0.1875
|
||||
if let dotSize {
|
||||
//frame for the dot to sit inside
|
||||
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
|
||||
}
|
||||
|
||||
//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()
|
||||
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.path = UIBezierPath(ovalIn: .init(origin: .zero, size: .init(width: dot, height: dot))).cgPath
|
||||
dotLayer.fillColor = textColorConfiguration.getColor(self).cgColor
|
||||
layer.addSublayer(dotLayer)
|
||||
badgeView.layer.addSublayer(dotLayer)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
- Refactored the TextStyle system to support Badge Indicator
|
||||
|
||||
Loading…
Reference in New Issue
Block a user