04. 기본 위젯 익히기 제목.

Presentation on theme: "04. 기본 위젯 익히기 제목."— Presentation transcript:

1 04. 기본 위젯 익히기 제목

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

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

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

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

6 1. 뷰의 개요 ▶ 뷰와 뷰그룹 클래스 상속관계 찾는 법(

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

32 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

33 2. 기본 위젯 다루기 [실습4-1] 초간단 계산기 만들기 (2/9)
화면 디자인 - EditText 2개, Button 4개, TextView 1개 - 각 위젯에 layout_margin을 적절히 지정

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

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

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

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

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

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

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

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

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

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

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

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

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

47 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

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

49 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 로 함

50 3. 기본 위젯 활용하기 [실습4-2] 좋아하는 애완동물 선택 앱 만들기 (4/8)

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

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

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

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

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

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

57