[iOS] iOS 앱 별점(평점) 구현하기 - Cosmos View

iOS 앱 별점(평점) 구현하기 - Cosmos View

iOS 앱에서 무언가를 별점으로 평가하는 기능이 필요할 때가 있습니다. 이때  'Cosmos' 라이브러리를 사용하면 기능을 쉽고, 편하게 구현할 수 있습니다.

 

Cosmos 라이브러리는 오픈소스로 아래 링크의 저장소에서 확인 가능합니다.

github.com/evgenyneu/Cosmos

 

이 글에서는 Cosmos의 오픈소스 저장소의 Read.me를 기반으로 라이브러리 소개하고, 예제를 통해 사용 방법을 설명합니다.

 

학습 목표

ㆍCosmos 라이브러리 소개

ㆍCosmos 라이브러리 설치하기

ㆍCosmos 라이브러리 사용하기

ㆍCosmos 라이브러리 커스텀하기

---

 

Cosmos 라이브러리 소개

 

Cosmos는 Swift 언어로 작성된 iOS와 tvOS를 위한 UI control다. smos는 UIView의 하위 클래스로 구현된다. 이를 통해 사용자는 별점 평가를 입력하고, 결과를 볼 수 있다. 

 

별점은 optinal text label과 함께 보여지며, Cosmos view는 코드 작성없이 스토리보드로 커스터마이징할 수 있다. 별점 입력 방식으로 별을 가득 채우거나, 반만 채울 수도 있다. 

 

Cosmos 라이브러리 설치

여러 방식으로 Cosmos 라이브러리를 추가할 수 있지만, 이 글은 CocoaPods를 통한 방식만을 다룬다. 추가 적인 방법은 글 맨 아래 링크에서 확인할 수 있다.

 

Podfile을 열고, 아래와 같이 입력한다. 

 

use_frameworks!
target 'Your target name'
pod 'Cosmos', '~> 23.0'

 pod install을 실행하면 설치가 완료된다.

 

Cosmos 라이브러리 사용하기

 

Cosmos 라이브러리를 설치했다면, Xcode에서 스토리보드에 View를 하나 생성한다.

 

 

Class 명에 CosmosView, Module에 Cosmos를 입력하고,

생성한 뷰를 다음과 같이 ViewControll에 아웃렛변수로 등록한다.

 

마지막으로 ViewController에 코드를 작성한다.

 

코드설명

1. Cosmos 라이브러리를 import 합니다.

2. CosmosView를 아웃렛변수로 등록합니다.

3. 아웃렛변수로 등록한 CosmosView의 속성을 정한다. 여기서는 기본 값을 별 4개, 설명 텍스트로 '(123)'을 입력한다.

 

import UIKit

import Cosmos  //1


class ViewController: UIViewController {


    @IBOutlet weak var cosmosView: CosmosView! //2


    override func viewDidLoad() {
        super.viewDidLoad()

        //3
        // Change the cosmos view rating
        cosmosView.rating = 4

        // Change the text
        cosmosView.text = "(123)"
    }
}

 

프로젝트를 실행해보자!

 

Cosmos 라이브러리 커스텀

Cosmos 라이브러리는 커스텀이 굉장히 쉽고, 직관적이다. 또한 Swift 코드, 스토리보드 모두로 커스텀이 가능하다. 

 

먼저 ViewController의 코드를 다음과 같이 수정해보자. 아래 코드는 사용자가 별을 터치했을 때 별점 수정 여부, 보여지는 별의 모양, 별의 크기, 별의 색상을 조절하는 코드다. 

 

import UIKit
import Cosmos

class ViewController: UIViewController {

    @IBOutlet weak var cosmosView: CosmosView!

    override func viewDidLoad() {
        super.viewDidLoad()
      
        // Do not change rating when touched
        // Use if you need just to show the stars without getting user's input
        cosmosView.settings.updateOnTouch = true

        // Show only fully filled stars
        cosmosView.settings.fillMode = .full

        // Other fill modes: .half, .precise
        // Change the size of the stars
        cosmosView.settings.starSize = 40

        // Set the distance between stars
        cosmosView.settings.starMargin = 5

        // Set the color of a filled star
        cosmosView.settings.filledColor = UIColor.green

        // Set the border color of an empty star
        cosmosView.settings.emptyBorderColor = UIColor.green

        // Set the border color of a filled star
        cosmosView.settings.filledBorderColor = UIColor.green
}

}

 

프로젝트를 실행하자!

별 이미지 변경

 

코드를 통해 커스텀을 해봤으니 이번에는 스토리보드를 통해 커스텀을 진행하자. 수정할 사항은 보여지는 별의 이미지다. 내부에 색상이 있는 별, 내부가 비어있는 별 이미지를 하나씩  프로젝트에 추가하자. 아래 이미지들은 구글 크리에이티브 커먼즈 라이선스 이미지들이니 이걸 사용해도 된다!

 

스토리보드에서 생성한 CosmosView를 클릭하고, Xcode 우측의 아이덴티티 인스펙터탭에서 show the attributes inspector를 선택한다. 그리고, 아래와 같이 Filled Image, Empty Image를 우리가 추가한 이미지로 변경한다.

 

프로젝트를 실행하자!