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

Presentation on theme: "04. 기본 위젯 익히기 제목. 04. 기본 위젯 익히기 제목 뷰와 뷰 상속을 이해한다. 기본 위젯을 다루는 방법을 익힌다. 안드로이드 앱의 기본적인 프로그래밍을 숙달한다."— Presentation transcript:

1

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

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

4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

27 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

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

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

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

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

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

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

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

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

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

37 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

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

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

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

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

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

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

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

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

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

47