Microsoft PowerPoint - 04기본위젯(Ver 1.0)

Transcription

1 04. 기본위젯익히기 IT CookBook, 안드로이드프로그래밍

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

3 차례 Page 4

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

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

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

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

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

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

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

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

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

13 1. 뷰의개요 View 클래스의 XML 속성 padding 속성 padding 은위젯의경계선으로부터위젯안의내용물이좀떨어지도록설정 예제 Page 14

14 1. 뷰의개요 View 클래스의 XML 속성 layout_margin 속성 위젯과위젯사이를여유있게하고싶다면 layout_margin 속성을사용 예제 Page 15

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

16 1. 뷰의개요 View 클래스의 XML 속성 enabled, clickable 속성 위젯의작동여부는 enabled 속성 클릭이나터치가가능하도록하는것은 clickable 속성 예제 Page 17

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

18 1. 뷰의개요 View 클래스의 XML 속성 [ 직접풀어보기 4-2] 다음그림과같은 XML 코드를코딩하자. 버튼, 텍스트뷰, 에디트텍스트, 버튼차례로지정한다. 또앞에서배운다양한속성을지정해본다. Page 19

19 2. 기본위젯다루기 텍스트뷰 계층도 관련속성 textcolor 속성 : 글자의색상을지정 textsizetsi 속성 : 글자의크기를지정 typeface 속성 : 글자의글꼴을지정 textstyletst 속성 : 글자의스타일을지정 singleline 속성 : 한줄에출력 Page 20

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

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

22 2. 기본위젯다루기 Java 코드로 XML 속성설정 XML 속성과관련메소드 Page 23

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

44 핵심정리 1. 이번장에서사용한위젯의 View 클래스계층도 2. 버튼의 Java 코드작성은주로다음 3 단계를거친다. 1 버튼변수선언 Button mybutton; 2 변수에버튼위젯대입 mybutton = (Button) findviewbyid(r.id.button1); 3 버튼클릭할때작동하는클래스정의 Page 45 mybutton.setonclicklistener( new View.OnClickListener() { }); } public void onclick(view v) { // 이부분에작동할내용을코딩

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

46 IT CookBook, 안드로이드프로그래밍