Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implementation of Cardpart progress bar view #169

Merged
merged 4 commits into from
Sep 20, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
463 changes: 463 additions & 0 deletions CardParts/src/Classes/Card Parts/CardPartProgressBarView.swift

Large diffs are not rendered by default.

42 changes: 42 additions & 0 deletions CardParts/src/Classes/Card Parts/CardPartTriangleView.swift
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
//
// CardPartTriangleView.swift
// CardParts
//
// Created by Venkatnarayansetty, Badarinath on 9/19/19.
//

import Foundation

class CardPartTriangleView: UIView {
var fillColor: UIColor = UIColor.white

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

required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}

override func draw(_ rect: CGRect) {

let layerHeight = layer.frame.height

let layerWidth = layer.frame.width

let bezierPath = UIBezierPath()

bezierPath.move(to: CGPoint(x: 0, y: 0))
bezierPath.addLine(to: CGPoint(x: layerWidth, y: 0))
bezierPath.addLine(to: CGPoint(x: layerWidth / 2, y: layerHeight))
bezierPath.addLine(to: CGPoint(x: 0, y: 0))
bezierPath.close()

fillColor.setFill()
bezierPath.fill()

let shapeLayer = CAShapeLayer()
shapeLayer.path = bezierPath.cgPath
layer.mask = shapeLayer
}
}
2 changes: 2 additions & 0 deletions CardParts/src/Extensions/UIFont.swift
Original file line number Diff line number Diff line change
Expand Up @@ -43,4 +43,6 @@ extension UIFont {
class func turboGenericLightFontWithSize(_ size: CGFloat) -> UIFont {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

More places that I want to remove and make more generic. Should we make it not turboGenericLightFontWithSize but instead lightFontWithSize

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes we should make it to lightFontWithSize

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we do it as part of next PR's ?

return UIFont.systemFont(ofSize: size, weight: UIFont.Weight.light)
}

static var titleTextMedium : UIFont {get{return UIFont.systemFont(ofSize: CGFloat(FontSize.x_Large.rawValue), weight: UIFont.Weight.medium)}}
badrinathvm marked this conversation as resolved.
Show resolved Hide resolved
}
4 changes: 4 additions & 0 deletions Example/CardParts.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
1B1E204022F4ADE900734EDA /* CardPartRoundedStackViewCardController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1B1E203F22F4ADE900734EDA /* CardPartRoundedStackViewCardController.swift */; };
1B1F9541231F3F4900085906 /* CardPartConfettiViewCardController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1B1F9540231F3F4900085906 /* CardPartConfettiViewCardController.swift */; };
1B1F9543231FF58400085906 /* ConfettiViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1B1F9542231FF58300085906 /* ConfettiViewController.swift */; };
1B5F65412333DA3D001B473F /* CardPartProgressBarViewCardController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1B5F65402333DA3D001B473F /* CardPartProgressBarViewCardController.swift */; };
1B693BA1230DAE2900662382 /* CardPartIconLabelCardController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1B693BA0230DAE2900662382 /* CardPartIconLabelCardController.swift */; };
1BD1074022F22823000163D2 /* CardPartBorderViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1BD1073F22F22823000163D2 /* CardPartBorderViewController.swift */; };
5570914320D18B07004D8E5A /* CardPartOrientedViewCardController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5570914220D18B07004D8E5A /* CardPartOrientedViewCardController.swift */; };
Expand Down Expand Up @@ -65,6 +66,7 @@
1B1E203F22F4ADE900734EDA /* CardPartRoundedStackViewCardController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CardPartRoundedStackViewCardController.swift; sourceTree = "<group>"; };
1B1F9540231F3F4900085906 /* CardPartConfettiViewCardController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CardPartConfettiViewCardController.swift; sourceTree = "<group>"; };
1B1F9542231FF58300085906 /* ConfettiViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ConfettiViewController.swift; sourceTree = "<group>"; };
1B5F65402333DA3D001B473F /* CardPartProgressBarViewCardController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CardPartProgressBarViewCardController.swift; sourceTree = "<group>"; };
1B693BA0230DAE2900662382 /* CardPartIconLabelCardController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CardPartIconLabelCardController.swift; sourceTree = "<group>"; };
1BD1073F22F22823000163D2 /* CardPartBorderViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CardPartBorderViewController.swift; sourceTree = "<group>"; };
2BA2B86E3C2946F91C18390D /* README.md */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = net.daringfireball.markdown; name = README.md; path = ../README.md; sourceTree = "<group>"; };
Expand Down Expand Up @@ -246,6 +248,7 @@
1B1E203F22F4ADE900734EDA /* CardPartRoundedStackViewCardController.swift */,
1B693BA0230DAE2900662382 /* CardPartIconLabelCardController.swift */,
1B1F9540231F3F4900085906 /* CardPartConfettiViewCardController.swift */,
1B5F65402333DA3D001B473F /* CardPartProgressBarViewCardController.swift */,
);
name = "Type of CardParts";
sourceTree = "<group>";
Expand Down Expand Up @@ -512,6 +515,7 @@
70F595DA20B5C9F200B6E688 /* CardPartStackViewCardController.swift in Sources */,
5570914320D18B07004D8E5A /* CardPartOrientedViewCardController.swift in Sources */,
55809E2620DABBF3008BE0D2 /* CardPartCenteredViewCardController.swift in Sources */,
1B5F65412333DA3D001B473F /* CardPartProgressBarViewCardController.swift in Sources */,
1BD1074022F22823000163D2 /* CardPartBorderViewController.swift in Sources */,
);
runOnlyForDeploymentPostprocessing = 0;
Expand Down
65 changes: 65 additions & 0 deletions Example/CardParts/CardPartProgressBarViewCardController.swift
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
//
// CardPartProgressBarViewCardController.swift
// CardParts_Example
//
// Created by Venkatnarayansetty, Badarinath on 9/19/19.
// Copyright © 2019 CocoaPods. All rights reserved.
//

import Foundation
import CardParts
import RxCocoa
import RxSwift

class CardPartProgressBarViewCardController: CardPartsViewController {

var viewModel = ReactiveCardPartProgressBarViewModel()

let barColors: [UIColor] = [UIColor.red,
UIColor.green,
UIColor.yellow,
UIColor.purple,
UIColor.blue]

let barValues: [Double] = [300, 600, 650, 700, 750, 850]

override func viewDidLoad() {
let progressBarView = CardPartProgressBarView(barValues: barValues, barColors: barColors, marker: nil, markerLabelTitle: "", currentValue: Double(600), showShowBarValues: false)
progressBarView.barCornerRadius = 4.0

viewModel.currentValue.asObservable().bind(to: progressBarView.rx.currentValue).disposed(by: bag)

setupCardParts([progressBarView])

invalidateLayout(onChanges: [viewModel.currentValue])
}
}


class ReactiveCardPartProgressBarViewModel {

var currentValue = BehaviorRelay(value: Double(100))

init() {
randomise()
}

func randomise() {
Timer.scheduledTimer(timeInterval: 3.0, target: self, selector: #selector(self.random), userInfo: nil, repeats: true)
}

@objc func random() {
switch arc4random() % 3 {
case 0:
currentValue.accept(200)
case 1:
currentValue.accept(400)
case 2:
currentValue.accept(600)

default:
return
}
}

}
3 changes: 2 additions & 1 deletion Example/CardParts/MainViewController.swift
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@ class MainViewController: CardsViewController {
CardPartBorderViewController(), // Border Cards
CardPartPillLabelCardController(), // Pill label
CardPartRoundedStackViewCardController(), //Rounded Stackview
CardPartIconLabelCardController() // Icon label
CardPartIconLabelCardController(), // Icon label
CardPartProgressBarViewCardController() // ProgresBarView
]

loadCards(cards: cards)
Expand Down
14 changes: 14 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ CardParts - made with ❤️ by Intuit:
- [CardPartCenteredView](#cardpartcenteredview)
- [CardPartOrientedView](#cardpartorientedview)
- [CardPartConfettiView](#cardpartconfettiview)
- [CardPartProgressBarView](#cardpartprogressbarview)
- [Card States](#card-states)
- [Data Binding](#data-binding)
- [Themes](#themes)
Expand Down Expand Up @@ -932,6 +933,19 @@ Provides the capability to add confetti with various types ( diamonds, star, mix
<img src="https://raw.githubusercontent.com/Intuit/CardParts/master/images/confetti.gif" width="300" alt="Confetti"/>
</p>

### `CardPartProgressBarView`

Provides the capability to configure different colors and custom marker , it's position to indicate the progress based on the value provided.

```swift
let progressBarView = CardPartProgressBarView(barValues: barValues, barColors: barColors, marker: nil, markerLabelTitle: "", currentValue: Double(720), showShowBarValues: false)
progressBarView.barCornerRadius = 4.0
```

<p align="center">
<img src="https://raw.githubusercontent.com/Intuit/CardParts/master/images/progressBarView.png" width="300" alt="ProgressBarView"/>
</p>

## Card States

CardPartsViewController can optionally support the notion of card states, where a card can be in 3 different states: loading, empty, and hasData. For each state you can specify a unique set of card parts to display. Then when the CardPartsViewController state property is changed, the framework will automatically switch the card parts to display the card parts for that state. Typically you would bind the state property to a state property in your view model so that when the view model changes state the card parts are changed. A simple example:
Expand Down
Binary file added images/progressBarView.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.