Basic Widgets Jo, Heeseung
Contents 뷰의개요 기본위젯다루기 기본위젯활용하기 2
뷰의개요 안드로이드화면에서실제로사용되는것은모두 View 클래스에서상속 이러한클래스를모두 ' 위젯 ' ( 또는뷰 ) 이라고도부름 위젯중에서다른위젯을담을수있는것들은주로 ViewGroup 클래스의하위에존재 이렇게다른위젯을담을수있는클래스를레이아웃이라고함 위젯 레이아웃 3
뷰의개요 View 클래스계층도 4
뷰의개요 클래스상속관계찾는법 (http://developer.android.com/reference) 5
View 클래스의 XML 속성 위젯과레이아웃등은모두 View 클래스의속성과메소드를상속받음 버튼의예 7
View 클래스의 XML 속성 id 속성 id 속성은모든위젯의아이디를나타냄 - Java 코드에서버튼등의위젯에접근할때 id 속성에지정한아이디를사용 android:id="@+id/btn1" 의의미는버튼위젯의아이디를 btn1 으로부여한것 위젯에접근하기위해서 Java 코드와버튼의예 8
View 클래스의 XML 속성 id 속성예제 9
View 클래스의 XML 속성 layout_width, layout_height 속성 예제 match_parent(=fill_parent): 자신의부모에폭이나높이를맞춤 wrap_content: 자신의폭이나높이를자신안의글자가꼭들어갈정도로맞춤 10
View 클래스의 XML 속성 background 속성 예제 위젯의색상을 #RRGGBB 값으로지정 11
View 클래스의 XML 속성 padding 속성 예제 위젯의경계선으로부터위젯안의내용물이좀떨어지도록설정 * dp(dip): density independent pixel 12
View 클래스의 XML 속성 layout_margin 속성 예제 위젯과위젯사이의간격을조정 13
View 클래스의 XML 속성 visibility 속성 예제 위젯을보일것인지여부를결정하는속성 visible은보이는상태, invisible과 gone은안보임 14
View 클래스의 XML 속성 enabled, clickable 속성 예제 위젯의작동여부는 enabled 속성 클릭이나터치가가능하도록하는것은 clickable 속성 15
View 클래스의 XML 속성 rotation 속성 예제 위젯을회전시켜서출력 Android 3.0 부터지원됨 16
View 클래스의 XML 속성 다음그림과같은 XML 코드를코딩 버튼, 텍스트뷰, 에디트텍스트, 버튼차례로지정 배운다양한속성을지정해보자 17
텍스트뷰 계층도 관련속성 textcolor 속성 : 글자의색상을지정 textsize 속성 : 글자의크기를지정 typeface 속성 : 글자의글꼴을지정 textstyle 속성 : 글자의스타일을지정 singleline 속성 : 한줄에출력 18
텍스트뷰 텍스트뷰예제 19
Java 코드로 XML 속성설정 예제 20
Java 코드로 XML 속성설정 XML 속성과관련메소드 21
버튼과에디트텍스트 텍스트뷰와버튼의호환 22
버튼과에디트텍스트 버튼계층도 버튼 XML 과 Java 코드작성 3 단계 23
버튼과에디트텍스트 에디트텍스트계층도 에디트텍스트 XML 과 Java 코드작성 3 단계 Android SDK Tools r20 에서는젤리빈환경에서 EditText 에약간의버그가있어서속성중 inputtype 을꼭지정해야했으나, r20.0.1 버전부터그버그가해결되어서 inputtype 속성을넣지않아도된다. 24
기본위젯다루기 두정수를입력한후에각버튼을누르면제일아래에계산결과가나오는아주간단한계산기 프로젝트정보 프로젝트이름 : Project4_1 패키지이름 : com.cookandroid.project4_1 빌드 SDK : Goolge API 15 또는 16 Minimum Required SDK : API 15 또는 16 액티비티이름 : Project4_1Activity 레이아웃이름 : main 타이틀 : Project4_1 25
기본위젯다루기 화면디자인 : EditText 2 개, Button 4 개, TextView 1 개 26
기본위젯다루기 Java 코딩 1 main.xml의 7개위젯에대응할위젯변수 7개 입력될 2개문자열을저장할문자열변수 2개 계산결과를저장할정수변수 1개 27
기본위젯다루기 Java 코딩 2 에디트텍스트 2개를변수에대입 버튼 ( 더하기 ) 1개를변수에대입 텍스트뷰 1개를변수에대입1개 28
기본위젯다루기 Java 코딩 3 버튼에터치이벤트리스너를정의 터치시에작동하는내용을 ontouch() 메소드안에코딩 29
기본위젯다루기 완성된 Java 코드 빼기, 곱하기, 나누기코드를완성 30
기본위젯다루기 다음과같이기능을추가또는변경해보자 터치 (Touch) 가아닌클릭 (Click) 으로변경 나머지값구하기버튼추가 값을입력하지않고, 버튼을클릭할때오류메시지를 Toast 로나타내기 실수값계산하기 0 으로나누면, Toast 메시지를나타내고계산하지않기 31
컴파운드버튼 컴파운드버튼계층도 체크박스 XML 과 Java 코드작성 3 단계 32
컴파운드버튼 스위치, 토글버튼, 라디오버튼, 라디오그룹 33
이미지뷰와이미지버튼 계층도 XML 코드 이미지를사용하려면먼저그림파일을 [res]-[drawable] 폴더에복사해놓아야하는데, 파일포맷은 png, jpg, gif 를지원하며주로 png 나 jpg 를사용할것을권장 34
기본위젯활용하기 < 시작함 > 를체크하면, 좋아하는애완동물세가지중에서하나를선택하는내용이나옴 선택후에 < 선택완료 > 버튼을클릭하면해당애완동물의이미지가나타난다 프로젝트정보 프로젝트이름 : Project4_2 패키지이름 : com.cookandroid.project4_2 빌드 SDK : Goolge API 15 또는 16 Minimum Required SDK : API 15 또는 16 액티비티이름 : Project4_2Activity 레이아웃이름 : main 타이틀 : Project4_2 35
기본위젯활용하기 프로젝트의 [res]-[drawble-hdpi] 폴더에강아지, 고양이, 토끼그림파일을미리복사 36
기본위젯활용하기 화면디자인 TextView, CheckBox, TextView, RadioGroup, RadioButton 세개, Button, ImageView 의차례로만듬 레이아웃에 padding 을적절히지정 제일위의 TextView 와 CheckBox 를제외하고, 나머지위젯은 visibility 속성을 invisible 로지정 각위젯의 id 는위에서부터 Text1, ChkAgree, Text2, Rgroup1, RdoDog, RdoCat, RdoRabbit, BtnOK, ImgPet 으로함 37
기본위젯활용하기 Java 코딩 1 main.xml 의 9 개위젯에대응할위젯변수 9 개 38
기본위젯활용하기 Java 코딩 2 각위젯을변수에대입 39
기본위젯활용하기 Java 코딩 3 < 시작함 > 체크박스를체크 / 언체크할때마다작동하는리스너를 oncreate() 안에정의 40
기본위젯활용하기 Java 코딩 4 < 선택확인 > 버튼을클릭하면작동하는리스너를 oncreate() 안에정의 41
기본위젯활용하기 < 실습 4-2> 를다음과같이수정 질문을 " 좋아하는안드로이드버전은?" 으로변경 < 시작함 > 을 Switch 로변경 - Switch 는 API14 이상에서지원 < 선택완료 > 버튼을없애고, 라디오버튼을선택할때마다즉시해당이미지가나오도록변경 제일마지막에 < 종료 > 와 < 처음부터 > 버튼을새로추가하고, < 종료 > 클릭시에는애플리케이션이완전히종료되도록하고, < 처음부터 > 클릭시에는다시초기화가되고처음화면이나오도록변경 42
핵심정리 이번장에서사용한위젯의 View 클래스계층도 버튼의 Java 코드작성은주로다음 3 단계 1 버튼변수선언 -> Button mybutton; 2 변수에버튼위젯대입 -> mybutton = (Button) findviewbyid(r.id.button1); 3 버튼클릭할때작동하는클래스정의 mybutton.setonclicklistener( new View.OnClickListener() { public void onclick(view v) { // 이부분에작동할내용을코딩 } }); 43
핵심정리 버튼은 Object -> View -> TextView -> Button 의상속관계 주로 View 와 TextView 의 XML 속성및메소드를동일하게사용 컴파운드버튼 (CompoundButton) 은 체크박스 (CheckBox), 라디오버튼 (RadioButton), 스위치 (Switch), 토글버튼 (ToggleButton) 등네가지하위클래스로구성 이미지를사용하려면그림파일을 [res]-[drawable] 폴더에미리복사 Java 코드로 XML 속성을설정가능 예를들어 background 속성은 setbackgroundcolor() 메소드를사용 44