반응형

노코드 앱 개발 3

인벤터2 왕초보 강좌 11 : 슬라이더(Slider)로 남은 시간을 표시하자.

이번 시간에는 슬라이더란 것이 무엇인지, 어디에 사용되는지, 어떻게 사용하는지에 대해 알아보겠다. 슬라이더는 게임창의 상단에서 시간이 줄어드는 것을 보여주든지, 또는 에너지가 얼마나 남아있는지 등의 시각적인 용도로 사용하는 컴포넌트이다. 이번 시간에는 버튼을 클릭하면 상단에 배치한 슬라이더가 슬라이딩 하는 상황을 연출해 보겠다. 화면 상단에 슬라이더를 배치하고 그 아래 버튼을 두어서 버튼을 클릭하면 슬라이더가 움직이는 앱을 만들 것이다. 슬라이더의 속성창에 너비, 최대값, 최소값등을 입력하자. 섬네일 위치란 처음 슬라이더가 화면에 나타날때 슬라이더의 중간 막대기가 어디에 위치하는가를 말한다. 시계를 하나 배치한다. 시계는 보이지 않는 컴포넌트이기 때문에 스마트폰 화면 아래에 나타날 것이다. 시계의 속성창..

앱인벤터2 왕초보 강좌 8 : 목록뷰(ListView) 사용법

앱인벤터2에서 목록 선택 버튼과 목록뷰는 비슷한 기능을 하는 컴포넌트들이다. 둘의 차이점을 들자면 목록 선택 버튼은 이것도 하나의 버튼이기 때문에 이 버튼을 눌러야 이벤트가 발생하는 이벤트성 컴포넌트란 것이고 목록뷰는 화면에 처음부터 목록이 표시되고 이 목록중 하나를 선택하면 다음 이벤트가 일어나는 구조이다. 즉 초기 화면이 복잡해서 리스트를 띄우면 화면이 지저분해 지거나 복잡해 질때는 목록 선택 버튼을 사용하면 좋고 처음부터 화면에 리스트가 나타나는 것이 좋을 때는 목록뷰를 사용하면 좋다는 것이다. 다음과 같이 화면에 목록뷰를 배치하고 레이블을 위아래로 두어서 목록뷰의 위치를 조정한다. 목록뷰는 화면에 바로 리스트가 표시된다. 리스트의 성분은 우측 리스트뷰의 속성에 이름을 적어 넣으면 된다. 각 이름들..

앱인벤터2 왕초보 강좌 7 : 목록 선택 버튼(ListPicker) 사용법

앱인벤터2의 사용자 인터페이스 창을 보면 선택 버튼이 3가지가 있다. 날짜 선택 버튼, 목록 선택 버튼, 그리고 시간 선택 버튼이 그것이다. 말 그대로 날짜를 선택할 수 있게 하고 목록중 하나를 선택하게 하고 시간을 선택하게 해 주는 버튼들이다. 왕초보 강좌 3에서 날짜 선택버튼에 대해서 설명을 했는데 이번 시간에는 목록 선택 버튼에 대해서 설명해 보도록 하겠다. 목록 선택버튼으로 해볼 내용은 5가지 과일의 이름을 리스트로 만들고 이 과일의 리스트 중에서 하나를 선택하면 그 선택한 과일의 이름을 버튼아래에 글자로 표시해 보는 것이다. 디자이너 에디터에 목록 선택 버튼 하나를 배치하고 버튼 위의 글자를 '과일 이름 목록 선택'으로 바꾼다. 그리고 레이블을 위아래에 배치해서 목록 선택 버튼의 위치를 조정한다..

반응형