04. 기본 위젯 익히기 제목

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

01 뷰의 개요 02 기본 위젯 다루기 03 기본 위젯 활용하기

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 클래스의 속성과 메소드를 상속받음 Button의 예

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

1. 뷰의 개요 ▶ View 클래스의 XML 속성 id 속성 예제 불필요함. 삭제 가능

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

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

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

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

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

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

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

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

1. 뷰의 개요 ▶ View 클래스의 XML 속성 layout_margin 속성 위젯과 위젯 사이를 여유롭게 함 예제

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

1. 뷰의 개요 ▶ View 클래스의 XML 속성 enabled, clickable 속성 예제 값은 true와 false로 지정, 디폴트 값은 true 예제

1. 뷰의 개요 ▶ View 클래스의 XML 속성 rotation 속성 예제 위젯을 회전시켜서 출력, 값은 각도(degree)로 지정함 안드로이드 3.0(API 11)부터 지원됨. 예제

2. 기본 위젯 다루기▶ 텍스트뷰 계층도 관련 속성 textColor 속성 : 글자의 색상을 지정 textSize 속성 : 글자의 크기를 dp, px, in, mm, sp 단위로 지정 typeface 속성 : 글자의 글꼴을 지정, 디폴트는 normal textStyle 속성 : 글자의 스타일을 지정, 디폴트는 normal singleLine속성 : 글이 길어 줄이 넘어갈 경우 강제로 한 줄까지만 출력하고 문자열의 맨 뒤에 “…”를 표시, 디폴트는 false

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

2. 기본 위젯 다루기▶ Java코드로 XML 속성 설정 예제 - id 속성과 text만 설정한 XML 파일

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

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

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

2. 기본 위젯 다루기▶ 버튼과 에디트텍스트 버튼 계층도 에디트텍스트 계층도

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

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

2. 기본 위젯 다루기 [실습4-1] 초간단 계산기 만들기 (1/9) 두 정수를 입력한 후에 각 버튼을 누르면 제일 아래에 계산결과가 나오는 아주 간단한 계산기 프로젝트 정보 프로젝트 이름 : 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/9) 화면 디자인 - EditText 2개, Button 4개, TextView 1개 - 각 위젯에 layout_margin을 적절히 지정

2. 기본 위젯 다루기 [실습4-1] 초간단 계산기 만들기 (3/9)

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

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

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

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

2. 기본 위젯 다루기 [실습4-1] 초간단 계산기 만들기 (8/9) 완성된 Java 코드 2

2. 기본 위젯 다루기 [실습4-1] 초간단 계산기 만들기 (9/9) 완성된 Java 코드 3

3. 기본 위젯 활용하기▶ 컴파운드버튼 컴파운드버튼 계층도 체크박스(CheckBox) 클릭할 때마다 상태가 체크와 언체크로 바뀜 서로 독립적으로 동작한다는 특징이 있어 여러 개를 동시에 체크 가능

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

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

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

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

3. 기본 위젯 활용하기▶ 이미지뷰와 이미지버튼 XML 코드

3. 기본 위젯 활용하기 [실습4-2] 좋아하는 애완동물 선택 앱 만들기 (1/8) <시작함>를 체크하면, 좋아하는 애완동물 세 가지 중에서 하나를 선택하는 내용이 나온다. 선택 후에 <선택 완료> 버튼을 클릭하면 해당 애완동물의 이미지가 나타난다 프로젝트 정보 프로젝트 이름 : 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/8) 프로젝트의 [res]-[drawble-hdpi] 폴더에 강아지, 고양이, 토끼 그림파일을 미리 복사

3. 기본 위젯 활용하기 [실습4-2] 좋아하는 애완동물 선택 앱 만들기 (3/8) 화면 디자인 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/8)

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

3. 기본 위젯 활용하기 [실습4-2] 좋아하는 애완동물 선택 앱 만들기 (6/8) Java 코딩 2 - 각 위젯을 변수에 대입, onCreate( ) 메소드 안에서 처리

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

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

이번 장에서 사용한 위젯의 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() 메소드를 사용할 수 있다.