아는만큼 보여요

http://gamequeryjs.com/

지난번에는 버튼에 여러가지 icon을 넣는 방법을 알아봤었습니다.

이번에는 버튼이미지를 가지고 버튼을 만들어 보겠습니다.

일단 버튼모양의 이미지가 필요합니다. 

이미지는 평상시 버튼이미지와 버튼을 눌렀을때의 이미지 두장이 필요합니다.

이미지는 http://www.iconfinder.com/에서 button으로만 검색해도 쉽게 찾을 수 있습니다.

이미지를 센차프로젝트안에 복사합니다.

어디에 넣든 경로만 알고 참조해 오면 상관 없지만 

필자는 resources -> images 폴더안에 복사해 넣었습니다.

그리고 위 사진에서 sass폴더안에 scss파일에 해당 버튼이미지를 등록시켜 사용하면 됩니다.

전에 icon이미지를 사용할때도 설명했지만 프로젝트를 생성한후 기본적으로 적용되는 scss는 app.scss입니다.

여러분들은 이 scss에 버튼 이미지를 등록하면 됩니다.

위와 같이 버튼 이미지에 이름을 붙여 버튼을 등록 합니다.

그리고 scss파일을 컴파일 해야 등록한 이미지버튼을 사용할 수 있습니다.

scss파일을 컴파일 하면 css가 생성되는데 이 css를 참조하여 우리는 사용하게 되는 것입니다.

컴파일 방법은 

터미널 창에서 sass폴더로 경로를 이동힙니다.

이동방법을 모르면 cd를 입력후 해당 폴더를 터미널 창에 끌어다 놓습니다.

그리고 compass compile <scss파일이름>을 입력해 컴파일 합니다.

컴파일이 끝나면 이미지를 사용할 수 있습니다.

이제 view class에서 다음과 같이 사용하면 됩니다.

cls에 추가한 버튼 이름을 넣고 pressedCls는 버튼을 눌렀을때 사용할 등록한 이미지 이름을 넣어줍니다.

버튼을 눌러보면 잘 적용된걸 확인할 수 있을겁니다.

평상시

눌렀을때

끝

NumberPicker.js

직접 제작한 NumberPicker입니다.

그냥 키패드로 입력받아도 되지만 이렇게만 받아야 하는 상황이 있어 만들어봤습니다.

백의 자리까지 소수점은 첫째짜리까지 입력받습니다.

사용법은 다음과 같습니다.

일단 다운받은 파일을 아래 경로에 복사합니다.

touch -> src -> ux -> field

그리고 view class에 다음과 같이 추가하여 사용하면 됩니다.

끝