Swifter {Swift Developer}

메뉴

Swift 3.0에서 컨텐츠 평가 기능 만들기

SNS나 특정 제품정보를 제공하는 앱을 만들때 기획자들은 대부분 평가기능을 넣어달라고 요청하는 경우가 있다. 그래서 최근 Swift 3.0기반 프로젝트를 진행하면서 만들었던 하트로 1~5점까지 평점을 설정하는 기능을 공개해본다.

heart1

하트 이미지는 디자이너가 없다면 FontAwesome CSS리소스를 PNG이미지로 만들어주는 사이트를 통해 자동으로 만들자. 관련 사이트는 fa2png.io란 곳으로 무료이고 FontAwesome에서 필요한 아이콘이름만 알면 되고 색상 및 크기를 지정하고 [Generate]버튼을 누르면 다운로드받을 수 있다.

이 예제에서는 색상이 채워진 하트와 비어진 하트가 필요하기 때문에 fa-heart, fa-heart-o를 사용했다.

fa2png-1

Xcode8을 실행하고 Single View Application기반으로 프로젝트를 생성한 다음, 앞서 만든 이미지를 Asset.xcassets에 등록하자.

rating1

그런 다음 UIButton을 5개 배치하자.

rating2

그리고 버튼 텍스트를 지우고 Image항목에서 하트 빈 이미지를 지정하자.

rating3

만든 버튼을 복사해서 5개를 나열한다.

rating4

마지막으로 레이블을 하단에 배치해서 선택한 하트가 몇개인지 표시하자.

rating5

그런 다음 앞서 만든 버튼과 레이블을 IBOutlet으로 연결하자. 그리고 각 버튼에  IBAction을 연결해놓자.

위와 같이 구현하는 방법도 있고 코드를 더 간결하게 만들고 싶다면 스토리보드에서 UIButton들의 State값을 Selected를 체크하고 Image값은 heart-fill로 설정한다. 그리고 viewDidLoad부분의 내용은 불필요하기 때문에 삭제한다. 다음으로 각 h1~h5 UIButton의 tag값을 각각 1부터 5까지 설정한다. 그리고 이 5개의 버튼을 하나의 IBAction으로 묶어서 처리한다.

 

Facebook Comments

카테고리:   Swift 3.0

댓글

죄송하지만 댓글은 닫혀 있습니다.