04. 기본 위젯 익히기 제목

뷰와 뷰 상속을 이해한다. 기본 위젯을 다루는 방법을 익힌다. 안드로이드 앱의 기본적인 프로그래밍을 숙달한다.

1. 뷰의 개요 ▶ 뷰와 뷰그룹 안드로이드 화면에서 실제로 사용되는 것은 모두 View 클래스에서 상속을 받으며, 이러한 클래스를 모두 '위젯' (또는 뷰)이라고도 부름. 위젯 중에서 다른 위젯을 담을 수 있는 것들은 주로 ViewGroup 클래스의 하위에 존재한다. 이렇게 다른 위젯을 담을 수 있는 클래스를 레이아웃이라고 함.

1. 뷰의 개요 ▶ 뷰와 뷰그룹 View 클래스 계층도

1. 뷰의 개요 ▶ 뷰와 뷰그룹 클래스 상속관계 찾는 법(http://developer.android.com/reference)

1. 뷰의 개요 ▶ 뷰와 뷰그룹 [직접 풀어보기 4-1] http://developer.android.com/reference 에서 ScrollView, DigitalClock, CalendarView의 각 클래스 상속관계를 찾아 보자.

1. 뷰의 개요 ▶ View 클래스의 XML 속성 위젯과 레이아웃 등은 모두 View 클래스의 속성과 메소드를 상속받는다. 버튼의 예

1. 뷰의 개요 ▶ View 클래스의 XML 속성 id 속성 id속성은 모든 위젯의 아이디를 나타내는데, 주로 Java 코드에서 버튼 등의 위젯에 접근할 때 id속성에 지정한 아이디를 사용 android:id="@+id/btn1"의 의미는 버튼 위젯의 아이디를 btn1으로 부여한 것 위젯에 접근하기 위해서 Java 코드와 버튼의 예

1. 뷰의 개요 ▶ View 클래스의 XML 속성 id 속성 예제

1. 뷰의 개요 ▶ View 클래스의 XML 속성 layout_width, layout_height 속성 예제 속성값 match_parent(=fill_parent)는 이름 그대로 자신의 부모에 폭이나 높이를 맞춘다는 의미 속성값 wrap_content는 자신의 폭이나 높이를 자신 안의 글자가 꼭 들어갈 정도로 한다는 의미 예제

1. 뷰의 개요 ▶ View 클래스의 XML 속성 background 속성 위젯의 색상을 주로 #RRGGBB 값으로 지정 예제

1. 뷰의 개요 ▶ View 클래스의 XML 속성 padding 속성 예제

1. 뷰의 개요 ▶ View 클래스의 XML 속성 layout_margin 속성 예제

1. 뷰의 개요 ▶ View 클래스의 XML 속성 visibility 속성 예제 위젯을 보일 것인지 여부를 결정하는 속성 visible은 보이는 상태, invisible과 gone은 안 보임. 예제

1. 뷰의 개요 ▶ View 클래스의 XML 속성 enabled, clickable 속성 예제

1. 뷰의 개요 ▶ View 클래스의 XML 속성 rotation 속성 예제 위젯을 회전시켜서 출력 Android 3.0 부터 지원됨. 예제

1. 뷰의 개요 ▶ View 클래스의 XML 속성 [직접 풀어보기 4-2]

2. 기본 위젯 다루기▶ 텍스트뷰 계층도 관련 속성 textColor 속성 : 글자의 색상을 지정 textSize 속성 : 글자의 크기를 지정 typeface 속성 : 글자의 글꼴을 지정 textStyle 속성 : 글자의 스타일을 지정 singleLine속성 : 한 줄에 출력

2. 기본 위젯 다루기▶ 텍스트뷰 텍스트뷰 예제

2. 기본 위젯 다루기▶ Java코드로 XML 속성 설정 예제

2. 기본 위젯 다루기▶ Java코드로 XML 속성 설정

2. 기본 위젯 다루기▶ 버튼과 에디트텍스트 텍스트뷰와 버튼의 호환

2. 기본 위젯 다루기▶ 버튼과 에디트텍스트 버튼 계층도 버튼 XML과 Java 코드 작성 3단계

2. 기본 위젯 다루기▶ 버튼과 에디트텍스트 에디트텍스트 계층도 에디트텍스트 XML과 Java 코드 작성 3단계 Android SDK Tools r20에서는 젤리빈 환경에서 EditText에 약간의 버그가 있어서 속성 중 inputType을 꼭 지정해야 했으나, r20.0.1 버전부터 그 버그가 해결되어서 inputType 속성을 넣지 않아도 된다.

2. 기본 위젯 다루기 [실습4-1] 초간단 계산기 만들기 (1/6) 두 정수를 입력한 후에 각 버튼을 누르면 제일 아래에 계산결과가 나오는 아주 간단한 계산기 프로젝트 정보 프로젝트 이름 : Project4_1 패키지 이름 : com.cookandroid.project4_1 빌드 SDK : Goolge API 15 또는 16 Minimum Required SDK : API 15 또는 16 액티비티이름 : Project4_1Activity 레이아웃 이름 : main 타이틀 : Project4_1

2. 기본 위젯 다루기 [실습4-1] 초간단 계산기 만들기 (2/6) 화면 디자인 : EditText 2개, Button 4개, TextView 1개

2. 기본 위젯 다루기 [실습4-1] 초간단 계산기 만들기 (3/6) Java 코딩 1 main.xml의 7개 위젯에 대응할 위젯 변수 7개 입력될 2개 문자열을 저장할 문자열 변수 2개 계산 결과를 저장할 정수 변수 1개

2. 기본 위젯 다루기 [실습4-1] 초간단 계산기 만들기 (4/6) Java 코딩 2 에디트텍스트 2개를 변수에 대입 버튼(더하기) 1개를 변수에 대입 텍스트뷰 1개를 변수에 대입1개

2. 기본 위젯 다루기 [실습4-1] 초간단 계산기 만들기 (5/6) Java 코딩 3 버튼에 터치 이벤트 리스너를 정의 터치 시에 작동하는 내용을 onTouch() 메소드 안에 코딩

2. 기본 위젯 다루기 [실습4-1] 초간단 계산기 만들기 (6/6) 완성된 Java 코드 빼기, 곱하기, 나누기 코드를 완성

2. 기본 위젯 다루기 [직접 풀어보기 4-3] <실습 4-1>을 다음과 같이 기능을 추가 또는 변경해 보자. 터치(Touch)가 아닌 클릭(Click)으로 변경 나머지 값 구하기 버튼 추가 값을 입력하지 않고, 버튼을 클릭할 때 오류메시지를 Toast로 나타내기 실수 값 계산하기 0으로 나누면, Toast 메시지를 나타내고 계산하지 않기.

3. 기본 위젯 활용하기▶ 컴파운드버튼 컴파운드버튼 계층도 체크박스 XML과 Java 코드 작성 3단계

3. 기본 위젯 활용하기▶ 컴파운드버튼 스위치, 토글버튼, 라디오버튼, 라디오그룹

3. 기본 위젯 활용하기▶ 이미지뷰와 이미지버튼 계층도 XML 코드 이미지를 사용하려면 먼저 그림파일을 [res]-[drawable] 폴더에 복사해 놓아야 하는데, 파일 포맷은 png, jpg, gif를 지원하며 주로 png나 jpg를 사용할 것을 권장한다.

3. 기본 위젯 활용하기 [실습4-2] 좋아하는 애완동물 선택 앱 만들기 (1/7) <시작함>를 체크하면, 좋아하는 애완동물 세 가지 중에서 하나를 선택하는 내용이 나온다. 선택 후에 <선택 완료> 버튼을 클릭하면 해당 애완동물의 이미지가 나타난다 프로젝트 정보 프로젝트 이름 : Project4_2 패키지 이름 : com.cookandroid.project4_2 빌드 SDK : Goolge API 15 또는 16 Minimum Required SDK : API 15 또는 16 액티비티이름 : Project4_2Activity 레이아웃 이름 : main 타이틀 : Project4_2

3. 기본 위젯 활용하기 [실습4-2] 좋아하는 애완동물 선택 앱 만들기 (2/7) 프로젝트의 [res]-[drawble-hdpi] 폴더에 강아지, 고양이, 토끼 그림파일을 미리 복사한다.

3. 기본 위젯 활용하기 [실습4-2] 좋아하는 애완동물 선택 앱 만들기 (3/7) 화면 디자인 TextView, CheckBox, TextView, RadioGroup, RadioButton 세 개, Button, ImageView의 차례로 만듬 레이아웃에 padding을 적절히 지정 제일 위의 TextView와 CheckBox를 제외하고, 나머지 위젯은 visibility 속성을 invisible로 지정 각 위젯의 id는 위에서부터 Text1, ChkAgree, Text2, Rgroup1, RdoDog, RdoCat, RdoRabbit, BtnOK, ImgPet 로 함

3. 기본 위젯 활용하기 [실습4-2] 좋아하는 애완동물 선택 앱 만들기 (4/7) Java 코딩 1 main.xml의 9개 위젯에 대응할 위젯 변수 9개

3. 기본 위젯 활용하기 [실습4-2] 좋아하는 애완동물 선택 앱 만들기 (5/7) Java 코딩 2 각 위젯을 변수에 대입

3. 기본 위젯 활용하기 [실습4-2] 좋아하는 애완동물 선택 앱 만들기 (6/7) Java 코딩 3 <시작함> 체크박스를 체크/언체크할 때마다 작동하는 리스너를 onCreate()안에 정의

3. 기본 위젯 활용하기 [실습4-2] 좋아하는 애완동물 선택 앱 만들기 (7/7) Java 코딩 4 <선택 확인> 버튼을 클릭하면 작동하는 리스너를 onCreate()안에 정의

3. 기본 위젯 활용하기 [직접 풀어보기 4-4] <실습 4-2>를 다음과 같이 수정하자. 질문을 "좋아하는 안드로이드 버전은?"으로 변경 <시작함>을 Switch로 변경 <선택 완료> 버튼을 없애고, 라디오버튼을 선택할 때마다 즉시 해당 이미지가 나오도록 변경 제일 마지막에 <종료>와 <처음부터> 버튼을 새로 추가하고, <종료> 클릭시에는 애플리케이션이 완전히 종료되도록 하고, <처음부터> 클릭시에는 다시 초기화가 되고 처음 화면이 나오도록 한다.

이번 장에서 사용한 위젯의 View 클래스 계층도 버튼의 Java코드 작성은 주로 다음 3단계를 거친다. ① 버튼 변수 선언  Button mybutton; ② 변수에 버튼위젯 대입  mybutton = (Button) findViewById(R.id.button1); ③ 버튼 클릭할 때 작동하는 클래스 정의 mybutton.setOnClickListener( new View.OnClickListener() { public void onClick(View v) { // 이 부분에 작동할 내용을 코딩 } });

버튼은 Object  View  TextView  Button의 상속관계를 갖는다 버튼은 Object  View  TextView  Button의 상속관계를 갖는다. 그러므로 주로 View와 TextView의 XML 속성 및 메소드를 동일하게 사용할 수 있다. 컴파운드버튼(CompoundButton)은 체크박스(CheckBox), 라디오버튼(RadioButton), 스위치(Switch), 토글버튼(ToggleButton) 등 네 가지 하위 클래스를 갖는다. 이미지를 사용하려면 그림파일을 [res]-[drawable] 폴더에 미리 복사해 놓아야 한다. Java코드로 XML속성을 설정할 수 있다. 예를 들어 background 속성은 setBackgroundColor() 메소드를 사용할 수 있다.