OCFloatingCounterView: UI Component

The OCFloatingCounterView is a customizable floating bubble like view with animations and effects on updating its properties. It does contain a badge, a title and a counter to display a calorie counter like view.

Features

• User can pass the Content to be loaded in the view along with the styling options.
• Badge and Count values could be updated dynamically on the go and animations will be played on updating those.
• There are two states for the view which are expanded and collapsed. This states can be adjusted through a Binding property 'isExpanded'.

Parameters:

• style : OCFloatingCounterStyle, The appearance of the card can be customized using this property.
• content : OCFloatingCounterContent, This defines the content to be loaded in the view
• isExpanded : Bool, This defines the expanded/ collapsed behaviour of the view

/// Template for the demonstration of FloatingCounterView
struct FloatingCounterViewTemplate: View {
    
    // MARK: - Properties
    @State private var isExpanded: Bool = true
    @State private var content: OCFloatingCounterContentProtocol = OCFloatingCounterContent(title: "Du hast bereits so viele Kalorien verbrannt:",
                                                                                            counterValue: 25,
                                                                                            counterUnit: "kcal")
    // MARK: - Body
    var body: some View {
        VStack {
            OCFloatingCounterView(content: $content, isExpanded: $isExpanded)
            toggleButton
            contentChangeButton
        }
    }
    
    /// Button to change the expanded/ collapsed state
    private var toggleButton: some View {
        OCButton(title: "Toggle Appearance",
                 type: .primary,
                 isEnabled: .constant(true),
                 maxWidth: 200) { _ in
            isExpanded.toggle()
        }
    }
    
    /// Button to update the content in the floating counter view
    private var contentChangeButton: some View {
        OCButton(title: "Update Content",
                 type: .primary,
                 isEnabled: .constant(true),
                 maxWidth: 200) { _ in
            
            content.badgeCount += 5
            content.counterValue = 100 * content.badgeCount
            content.counterChange = 500
        }
    }
}