안드로이드 버튼 생성 및 변경하기


이제는 안드로이드 버튼을 만들고 수정해보도록 하겠습니다. 실습을 통해서 실제로 만들어보는 것이 안드로이드 시스템의 구동 구조를 익히는 가장 빠른 길입니다.

이어지는 내용이므로 아래 이전 포스팅을 순서대로 학습바랍니다.



이클립스를 열고 왼쪽의 Package Explorer에서 HellowAndroid > res > layout에 activity_main.xml 화일을 클릭합니다.
activity_main.xml을 클릭하면 오른편 화면에 Graphical layout 탭이 보일 것입니다. Graphical layout 탭을 클릭합니다.



마우스로 왼편의 Button을 클릭해서 오른쪽 화면으로 드래그합니다. 오른쪽으로 드래그 하면 화면상에 버튼이 생성됩니다.
이렇게 편리하게 드래그로 화면을 구성할 수 있습니다.

Graphical Layout에서 만든 버튼의 소스를 살펴보도록 하겠습니다. 하단의 activity_mail.xml 탭을 클릭합니다.



activity_mail.xml 탭을 클릭하면 activity_mail.xml 소스가 나타납니다.
아래 화면과 같이 <Button> 태크로 시작하는 소스가 자동으로 생성된 것을 알 수 있습니다.


이번에는 activity_main.xml 화일의 소스코드를 수정해서 버튼을 만들어 보도록 하겠습니다.
새로운 버튼을 만들기 위해서 먼저 TextView 부분을 복사해서 아래에 붙여넣기를 합니다.

Button 부분을 복사해서 사용하지 않고 TextView를 복사한 것은 TextView에서 디스플레이 되고 있는 Hello Android! 라는 value 값을 그대로 사용하려고 하기 때문입니다.



아래 화면에 동그라미를 친 것과 같이 TextView를 Button으로 변경하고, @+id/textView1 부분을 @+id/button2로 변경하고 저장합니다.
안드로이드 앱시스템은 ID를 사용을 위해서 '@+id'란 표기방식을 사용합니다. 이런 표기방식으로 안드로이드 시스템에서 유일한 ID 값을 표현합니다. 



activity_main.xml 탭을 저장을 한 뒤에 Graphical Layout 탭을 클릭하면 다음과 같이 HELLO ANDROID! 라는 버튼이 생성되었음을 확인 할 수 있습니다. 



Java 소스에서 직접 ID로 객체를 호출하는 방법


현재까지는 아래 화면과 같이 텍스트뷰 한 개와 버튼 두 개가 만들어져 있습니다. 이번에는 아래 동그라미한 버튼을 클릭하면 OK 버튼 클릭 이라는 문구를 화면에 출력시키는 것을 학습하겠습니다. 여기에서 자바 소스코드에서 ID로 객체를 호출하는 방법도 함께 알아보겠습니다.



자바(Java) 소스에서 ID 값을 찾을때 사용하는 함수는 findViewById() 함수입니다.
findViewById() 함수의 사용 방법은 아래와 같습니다.


MainActivity.java 소스에 아래 화면과 같이 버튼 객체 소스를 추가합니다.



버튼 객체를 추가하면 버튼 밑에 빨간 줄이 나타난 것을 볼 수 있습니다. 이 빨간줄을 없애기 위해서 Ctrl+Shift+O(알파벳)를 눌러주면 이클립스는 자동으로 Button 클래스를 import합니다.

Java에서는 해당 클래스를 사용하려면 import를 해주어야합니다. 그렇지 않으면 컴파일 오류가 발생합니다.
이클립스는 import를 하지 않은 클래스를 자동으로 import 해주는 기능이 바로 단축키로 Ctrl+Shift+0(알파벳)입니다. 

클래스를 자동으로 import할 때, 특정 함수 이름이 동일할 때는 사용자에게 알맞은 클래스를 선택하라는 다이얼로그 팝업이 뜨게됩니다. 우리는 View 클래스안의 OnClickListener를 사용하기 때문에 첫번째 것을 import로 선택하면 됩니다.




그럼 이제 MainActivity.java 를 다음과 같이 변경해보도록 하겠습니다.

onCreate() 함수안에 Button 클릭에 관한 소스를 추가합니다.



안드로이드 어플리케이션을 실행한 뒤에 Button을 클릭하면 OK 버튼 클릭이라는 문구가 표시되는 것을 확인할 수 있습니다.


'IT & Programming > 안드로이드 프로그래밍' 카테고리의 다른 글

실무에서 안드로이드 프로그래밍 앱개발은 이렇게  (0) 2016.02.20
앱개발 어플리케이션 제작 전화걸기 및 인터넷 접속하기  (0) 2016.02.20
안드로이드 HelloAndroid 소스 수정해보며 이해하기  (0) 2016.02.19
안드로이드 프로그래밍-첫번째 프로젝트 HelloAndroid 만들기  (0) 2016.02.18
이클립스 소스코드 자동 정렬 및 프린트 안내선 설정하기  (0) 2016.02.18

안드로이드 프로그래밍 - 버튼 이벤트 실습 선수과정


이번 시간에는 스마트폰 화면에 버튼을 만들고 버튼을 클릭할 때 이벤트를 발생하는 것을 실습하겠습니다.
이전 강좌와 이어지는 내용이므로 실습을 제대로 진행하기 위해서 이전 포스팅 내용을 확인하고 진행바랍니다.


스마트폰에 출력하는 텍스트 문구 변경해보기


지난시간에 아래 화면과 같이 가상의 안드로이드 스마트폰에 Hello World 라는 문구를 출력하는 것을 학습하였습니다.
버튼을 생성하기에 앞서서 이전에 실습했던 어플리케이션(Application)에서 입력하지도 않은 Hello world!라는 문구가 어디에서 설정되어 있는지 소스를 찾아서 확인해보겠습니다.



이클립스에서 MainActivity.java 소스를 열어보겠습니다. 
아래 소스를 살펴보면 Java의 표준 문법에서 보이는 Java의 시작을 알리는 main() 함수가 존재하지 않습니다.
그렇다면 어디서 Hello world!라는 문구를 표시하게 하는 것일까요?

아래 setContentView(R.layout.activity_main); 함수 부분을 보겠습니다. setContentView() 함수에 인자로 쓰인 R.layout.activity_main 부분에 열쇠가 있습니다.



왼쪽 네비게인션 화면의 HelloJava 프로젝트의 res폴더를 펼쳐 보도록합니다. res > layout 폴더를 열면 activity_main.xml 이라는 화일이 있습니다. activity_main.xml 화일을 클릭해 보도록 하겠습니다.  클릭하면 오른쪽 화면에 디자인 설계를 하는 Graphical Layout 화면이 나타납니다. Graphical Layout 탭옆의 activity_mail.xml 탭을 클릭합니다.


activity_main.xml 탭을 클릭하면 아래 화면과 같이 activity_main.xml에 대한 소스 화면이 보입니다. xml소스안에도 Hello world라는 문구는 보이지 않습니다.

그렇다면 실제 텍스트 문구를 나태내는 String 문자에 대한 정의를 해두는 곳이 있을 것입니다.
<TextView /> 태그안을 살펴보면 @string/hello_world 부분이 있습니다. 이곳이 String 문자를 별도 정의한 부분입니다.



res/values 폴더를 클릭합니다. 이곳에 strings.xml과 styles.xml 화일이 존재합니다.



strings.xml 화일을 클릭하면 오른쪽에 다음과 같은 화면이 나타납니다.



오른쪽 화면에서 hello_world (String) 항목을 클릭하면 Value값에 Hellow world! 라는 문구를 찾을 수 있습니다
하단의 Resources 탭옆에 strings.xml 탭을 클릭합니다.



조금전 Resource 탭에서는 UI 형태로 값을 입력할 수 있지만 strings.xml 탭을 클릭하면 xml 소스코드를 그대로 볼 수 있습니다.
소스안의 hello_world라는 string 태그안에 Hello world!라는 String 문자를 발견할 수 있습니다.

문자가 출력되는 소스의 연결고리를 정리해보면 /res/values/strings.xml 소스의 hello_world는 /res/layout/activity_main.xml 안의 @string/hello_world와 연결되어 참조되고 activity_main.xml 는 /src/MainActivity.java 안의 setContentView(); 함수에 R.layout.activity_main 라는 파라미터로 전달되어짐을 알수 있습니다.




그러면 string 문자를 다음과 화면과 같이 안녕 Java라고 변경하고 어플리케이션을 재실행시킵니다. 재실행 단축키는 Ctrl + F11 입니다.



안드로이드 어플리케이션을 재실행 시키면 에뮬레이터인 가상의 스마트폰에서 실행결과가 나타납니다. 아래 화면과 같이 출력 문구가 변경되는 것을 확인할 수 있습니다.




스마트폰에 버튼만들기


버튼을 만들기 위해서 이번에는 activity_main.xml 화일안의 <TextView> 태크를 <Button>이라는 이름의 태그로 변경합니다.
변경된 소스를 저장한 뒤 어플리케이션을 재실행(Ctrl + F11) 합니다


어플리케이션이 재실행되고 나니 텍스트였던 부분이 버튼으로 변경된 것을 확인할 수 있습니다.



버튼 클릭 이벤트 발생시키기


이번에는 버튼을 클릭했을때 버튼 클릭 이벤트를 발생시키도록 하겠습니다.
버튼 클릭 이벤트를 발생시키기 위해서는 두 가지 작업을 진행하면 됩니다.

첫번째는 xml 화일인 activity_main.xml에 정의된 버튼의 ID를 추가합니다.
이벤트 발생을 시키려면 <Button> 태그안의 속성에 ID 속성을 추가해야합니다.
ID속성은 @+id 을 표기하여 지정합니다. 
 
형식 : @+id/정의하려는 이름
사용예) @+id/startBtn



두번째는 Java 화일인 MainActivity.java에 정의된 버튼의 이벤트 처리 코드를 추가합니다.

onCreate() 메소드 안에 Button 클래스를 생성하고findViewById() 함수로 xml에 정의되 startBtn ID 값을 매핑시킵니다.


Button 클래스의 setOnClickListener() 메소드를 활용해서 클릭이벤트를 Listening 합니다.



클릭시에 필요한 onClick() 메소드를 활용합니다.


메시지를 보여주기 위해서 Toast 클래스를 사용합니다.

            
완성된 소스 코드는 다음과 같습니다.



어플이케이션을 실행해서 버튼을 클릭하면 버튼 클릭이벤트가 아래 화면과 같이 제대로 동작하는 것을 확인할 수 있습니다.



유용한 이클립스 단축키 Tip)
Ctrl + Shift + O : 이클립스가 필요한 자바 Class를 자동으로 import 해줍니다.


'IT & Programming > 안드로이드 프로그래밍' 카테고리의 다른 글

이클립스 소스코드 자동 정렬 및 프린트 안내선 설정하기  (0) 2016.02.18
안드로이드 프로그래밍-전화걸기 및 인터넷 접속기능 구현  (0) 2016.02.17
안드로이드 프로그래밍으로 앱개발 시작하기  (0) 2016.02.16
가독성 좋은 폰트로 개발을 편리하게  (0) 2016.02.16
안드로이드 에뮬레이터 사용하기  (2) 2016.02.15

+ Recent posts

티스토리툴바