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

2016-10-22
15 Views

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

You may be interested

모바일 앱 아키텍처
Swift
shares2 views
Swift
shares2 views

모바일 앱 아키텍처

MJ Kim - 4월 22, 2017

이 내용은 나름대로 개발해본 내용을 토대로 정리해본 모바일 앱 아키텍처에 대한 내용이다. 이를 정리한 이유는 오래된 아키텍처부터 최근 아키텍처까지 정리해보고…

시간차를 얻는 Date Extension
Swift 3.0
shares5 views
Swift 3.0
shares5 views

시간차를 얻는 Date Extension

MJ Kim - 4월 12, 2017

사용자가 남길 내용에 대한 시간표시를 할 때 일정한 시간차를 표현해주는 경우가 있어 이에 대한 Date Extention을 정리해 보았다. [crayon-58fae9e6eb41f711139788/]  

Swift 3.1에서 없어진 문법 정리
Swift 3.0
shares32 views
Swift 3.0
shares32 views

Swift 3.1에서 없어진 문법 정리

MJ Kim - 3월 31, 2017

Swift언어는 무엇인가 나올때마다 없어지는 것들이 있어, Swift 3.1에서 컴파일할 수 없게 된 문법내용을 정리했다. switch문을 사용하여 enum에서 protocol을 여러가지 패턴으로…