Giter Club home page Giter Club logo

litestarview's Introduction

Platforms Language License

⭐️ LiteStarView

About

Leave a ⭐ if you like this project or want to see updates in future.

The view was designed for a recipe app. I needed a simple ratings view that was also setable by the user and would work in a collection view.

📑 Description

A light weight star rating UI component for iOS written in Swift.

alt text alt text alt text

📐 Design

StarView is a minimalist design, with a few customizations.

Note: This view is not currently IBDesignable

Features

  • Can be used to show ratings followed by number of ratings.
  • If isUserInteractionEnabled user can provied a rating by panning or tapping on stars, rating will be shown.
  • Gives haptic Feedback when user selects/deselect one full star
  • Round stars to the nears whole

Modifiers / Customization

Variables you can modifiy in the view inspectinable with type and default value.

  • starCount:Int = 5 : Number of stars in view
  • ratingCount:Int = 0 : Amount of ratings for item
  • rating:CGFloat = 0.0 : Rating for item
  • roundRating:Bool = false : Will use whole numbers in rating
  • fillColor:UIColor = UIColor.systemYellow : Star fill color
  • stokeColor :UIColor = UIColor.black : Star outline (strokeColor) color

🎲 Behavior

Updating the view

Stars are automaticity update when when the rating or ratingCount changes. Also calling starView.updateStar() will force a update. So make your changes before calling!

🏗 Installation

Manually

Git clone the repo and add LiteStarView framework to your exsiting xcode project.

Note: You might need build the framework.

How to add LiteStarView framework to a existing project.

CocoaPods

Add the following in your Podfile.

'LiteStarView', '~> 1.0'

📋 Setup

1. Create StarView

Create and drop a UIView then set the class to StarView.

class

2. Set your constraints

There are many way to layout this view but a height constraint is needed for the stars to be drawn correctly. Take a look at the examples below

This is the formula to help calculate the width.

(height * amountOfStars) + (height * 2)

Examples

constraints

constraints


constraints

constraints

Note: Also need to set Center Horizontal in Safe Area to the parent.

Formula Example: (40 * 5) + (40 * 2) = 280

3. The view can be set up in one of two ways.

- Show rating (Non-interactive)

class

alt text

- User provided rating (interactive)

class

alt text alt text

4. Using StarView

Once linked to your viewController. You can programmatically set/get rating and rating counter.

import UIKit
import LiteStarView
class ViewController: UIViewController {

    @IBOutlet weak var starView: StarView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // set rating and ratingCount programmable
        starView.rating = 3.5
        starView.ratingCount = 50
        // get current rating
        let currentRating = starView.rating
    }
}

litestarview's People

Contributors

mitchtodo avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.