레이아웃 (Layout)

Transcription

1 레이아웃 (3 장 ) 김성영교수 금오공과대학교 컴퓨터공학부

2 Contents 학습목표 뷰와레이아웃에대해이해하고, 레이아웃을활용, 관리하는여러가 지기법들에대하여알아본다. 내용 뷰 (View) 리니어레이아웃 (Linear Layout) 다른레이아웃 레이아웃관리 2

3 액티비티 vs. 뷰 액티비티 (Activity) 안드로이드응용프로그램의화면을구성하는주요단위 여러개의액티비티가모여하나의응용프로그램을구성 화면에직접적으로보이지않음 뷰 (View) 사용자를대면하는실체 여러개의뷰가모여하나의액티비티를구성 레이아웃 : 액티비티안에뷰를배치하는기법 3

4 뷰의종류 위젯 (widget) 직접적으로보이며사용자인터페이스를구성 ( 컨트롤 ) View 클래스로부터직접파생되며스스로를그릴수있는능력을가지고있음 뷰그룹 (view group) 직접보이지는않으며뷰를담는컨테이너역할을수행 ( 레이아웃 ) View 클래스로부터파생된 ViewGroup 클래스의서브클래스임 다른뷰들을자식으로포함하며이들을정렬하는기능을가짐 뷰그룹이면서위젯처럼사용되는경우도있음 ( 예 : 리스트뷰 ) 4

5 위젯계층구조 Object AnalogClock EditText AutoCompleteTextView View TextView Button CompoundButton Chronometer CheckBox DigitalClock RadioButton ImageView ImageButton ToggleButton SurfaceView GLSurfaceView VideoView SeekBar ProgressBar AbsSeekBar RatingBar 5

6 뷰그룹계층구조 Object FrameLayout ScrollView, HorizontalScrollView View TabHost, TimePicker, DatePicker ViewGroup AbsoluteLayout ViewAnimator WebView ViewFlipper ViewSwitcher TextSwitcher ImageSwitcher RelativeLayout LinearLayout RadioGroup, ZoomControls TableLayout, TableRow TabWidget AdapterView AbsListView AbsSpinner ListView GridView Spinner Gallery 6

7 View 클래스속성 (1) id 뷰를구분하는식별자 : id를리소스 (R.java) 에정의하거나참조한다는의미 ( 반드시사용 ) + : id를새로정의한다는의미 ( 참조시는생략가능 ) id : 예약어 / : 이름을지정 ( 명칭규칙에맞아야하며중복불가 ) ex) android:id="@+id/name" : name이라는새로운 id 부여 id를지정하면 R.java에정수형상수로저장됨 코드에서참조할필요없는경우에는일반적으로 id를생략함 7

8 View 클래스속성 (2) layout_width, layout_height 폭과높이지정 가능한속성값 fill_parent : 부모의주어진크기를다채움 wrap_content : 내용물의크기만큼만채움 정수크기 : 지정한크기에맞춤 단위 : px, in, mm, pt, dp ( 또는 dip), sp ( 또는 sip) ex) "Start" 라는캡션을가지는버튼배치 8

9 View 클래스속성 (3) Background 배경을지정 ( 색상및이미지등 ) 색상지정형식 #RGB, #ARGB, #RRGGBB, #AARRGGBB ex) #ff0000 (#f00): 빨간색, #0000ff : 파란색 padding 뷰와내용물간의간격지정 ( 안쪽여백 ) 가능한속성값 paddingleft, paddingtop, paddingright, paddingbottom 9

10 View 클래스속성 (3) visibility 뷰의표시유무지정 가능한속성값 visible : 화면에표시 invisible : 숨겨진상태이며자리차지 gone : 숨겨진상태이며자리차지하지않음 clickable, longclickable 마우스의클릭혹은롱클릭이벤트여부에대한설정 (true 혹은 false) click : 손가락으로뷰를누름 longclick: 손가락으로뷰를누른채잠시기다림 10

11 View 클래스속성 (4) focusable 키보드포커스를받을수있는지여부를지정 디폴트값은 false임 Edit 혹은 Button과같이사용자의입력이필요한파생클래스는디폴트로 true가지정됨 11

12 TextView 클래스속성 (1) 문자열출력및입력을위한위젯 Text 출력할문자열지정 (literal 혹은 resource) 형식 설명 " 문자열 " \: 이스케이프문자예 ) \n: 줄바꿈, \uxxxxx 패키지 :]type:name 리소스에대한레퍼런스지정보통 string.xml 식으로지정?[ 패키지 :][type:]name 테마속성으로지정 textcolor 문자열색상 ( 디폴트 : 불투명한밝은회색 ) 형식 : #RRGGBB 혹은 #AARRGGBB 12

13 TextView 클래스속성 (2) textsize 텍스트의폰트크기지정 ( 단위 : sp, dp, px, in, mm 등 ) textstyle 글꼴속성지정 (normal, bold, italic) 로두가지이상속성지정가능 ex: "bold italic", "normal italic" typeface 글꼴모양지정 (normal, sans, serif, monospace) 13

14 TextView 클래스속성 (3) width, height 텍스트뷰의폭과높이지정 텍스트뷰는단독으로존재하는경우는거의없고대부분레이아웃안에서차일드로존재하기때문에이두속성은거의사용되지않음 singleline 텍스트가위젯의폭보다길때강제로한줄에출력 디폴트는 false 임 14

15 TextView 클래스예제 string.xml <?xml version="1.0"encoding="utf-8"> <resources> <string name="hello">hello World, TextViewTest!</string> <string name="app_name">textviewtest</string> <string name="insa">hello</string> <string name="anyoung"> 안녕하세요 </string> </resources> main.xml <?xml version="1.0" encoding="utf-8"> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_height="fill_parent"> <TextView android:textcolor="#ff0000" android:textsize="20pt" android:textstyle="italic"/> <TextView android:textsize="20sp" android:background="#0000ff"/> <TextView android:text="good Morning" android:textcolor="#8000ff00" android:textsize="5mm" android:typeface="serif"/> </LinearLayout> pp. 112 ~

16 ImageView 클래스 아이콘이나비트맵을출력하는위젯 jpg, png, gif 등의이미지포맷지원 SDK 1.6 이후해상도별로세개의폴더가존재하며운영체제가사용할이미지결정 고해상도이미지 저해상도이미지 중해상도이미지 16

17 ImageView 클래스속성 (1) src 출력할이미지지정 형식으로사용 maxheight, maxwidth 이미지가출력될최대크기지정 adjustviewbounds 이미지의종횡비에따른이미지뷰의크기변경여부설정 (true 혹은 false) 17

18 ImageView 클래스속성 (2) croptopadding true: 위젯의주어진여백에맞추기위해이미지의일부를잘라냄 tint 색조변경 형식 : #AARRGGBB scaletype 이미지의크기를변경하여출력할때사용할알고리즘지정 matrix, fitxy, center, centercrop, centerinside 등 18

19 ImageView 클래스예제 pp. 117 ~ 118 Layout/imageviewtest.xml <?xml version="1.0" encoding="utf-8"> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_height="fill_parent"> <ImageView 200x150 android:src="@drawable/pride"/> <ImageView android:src="@drawable/pride" android:maxheight="70px" android:maxwidth="120px" android:adjustviewbounds="true"/> <ImageView android:src="@drawable/dog" android:tint="#4000ff00"/> </LinearLayout> 19

20 ImageView 클래스 사용상의주의사항 사용할이미지파일을 res/drawable 폴더에복사 자동으로 R.java 에이미지 id 생성 파일명사용에주의 영문자와언더바 (_) 로만구성 공백문자사용불가 소문자만을사용 20

21 Button 및 Edit 클래스 (1) TextView 의서브클래스이며고유속성은없음 Button : 사용자로부터명령을입력받음 EditText : 문자열을입력받음 Layout/buttonedit.xml <?xml version="1.0" encoding="utf-8"> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_height="fill_parent"> <EditText android:layout_width="wrap_content" android:id="@+id/edit" android:text=" 여기다입력 "/> <Button android:layout_width="wrap_content" android:id="@+id/btn" android:text=" 입력완료 "/> </LinearLayout> p

22 Button 및 Edit 클래스 (2) src/buttonedit.java package exam.buttonedit; import android.app.activity; import android.os.bundle; import android.view.*; import android.widget.*; public class ButtonEdit extends Activity public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.buttonedit); } } Button btn = (Button)findViewById(R.id.btn); btn.setonclicklistener(new Button.OnClickListener() public void onclick(view v) { EditText edit = (EditText)findViewById(R.id.edit); String str = edit.gettext().tostring(); Toast.makeText(ButtonEdit.this, str, Toast.LENGTH_SHORT).show(); } }); pp. 121 ~

23 LinearLayout 개요 java.lang.object android.view.view android.view.viewgroup android.widget.linearlayout 차일드뷰 ( 위젯및뷰그룹 ) 를수평이나수직으로일렬배치하는레이아웃 주요속성 orientation, gravity, layout_gravity, baselinealigned 23

24 LinearLayout 주요속성 : orientation (1) orientation 뷰의배치방향을결정 ( 디폴트 : horizontal) vertical : 차일드를위에서아래로수직으로배열 horizontal : 차일드를왼쪽에서오른쪽으로수평배열 버튼 1 버튼 1 버튼 2 버튼 3 버튼 2 버튼 3 [ vertical ] [ horizontal ] 24

25 LinearLayout 주요속성 : orientation (2) Layout/Horizontal (ButtonEdit 변경 ) <LinearLayout xmlns:android=" android:orientation="horizontal" android:layout_height="fill_parent" > Layout/Horizontal2 (TextViewTest 변경 ) <TextView android:orientation="horizontal" android:text="@string/insa" android:textcolor="#ff0000" android:textsize="20pt" android:textstyle="italic"/> 나머지두텍스트는오른쪽으로밀려남 Layout/Horizontal3 <TextView android:orientation="horizontal" android:layout_width="wrap_content" android:text="@string/insa" android:textcolor="#ff0000" android:textsize="20pt" android:textstyle="italic"/> 25

26 LinearLayout 주요속성 : gravity (1) gravity vs. layout_gravity gravity 뷰내부의내용물에대한배치방법 layout_gravity 뷰를부모내에배치하는방법 26

27 LinearLayout 주요속성 : gravity (2) gravity 수평, 수직방향에대한정렬방식지정 두가지속성을동시에지정 : " " 연산자 ( 연산자양쪽에공백없음 ) 상수 값 설명 center_horizontal 0x01 수평으로중앙배치 left 0x03 왼쪽배치, 크기변경없음 right 0x05 오른쪽배치 fill_horizontal 0x07 수평방향으로가득채움 center_vertical 0x10 수직으로중앙배치 top 0x30 상단배치, 크기변경없음 bottom 0x50 하단배치 fill_vertical 0x70 수직방향으로가득채움 center 0x11 수평및수직으로중앙배치 fill 0x77 컨테이너에가득채움 27

28 LinearLayout 주요속성 : gravity (3) Layout/gravity1.xml <?xml version="1.0" encoding="utf-8"> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_height="fill_parent" > <TextView android:layout_height="fill_parent" android:text=" 정렬테스트 " android:textsize="30pt" android:textcolor="#00ff00"/> </LinearLayout> Layout/gravity2.xml <TextView android:layout_height="fill_parent" android:text=" 정렬테스트 " android:textsize="30pt" android:textcolor="#00ff00" android:gravity="center"/> 28

29 LinearLayout 주요속성 : gravity (4) Layout/gravity3.xml <TextView android:layout_height="fill_parent" android:text=" 정렬테스트 " android:textsize="30pt" android:textcolor="#00ff00" android:gravity="center_vertical"/> Layout/gravity3.xml <TextView android:layout_height="fill_parent" android:text=" 정렬테스트 " android:textsize="30pt" android:textcolor="#00ff00" android:gravity="center_vertical right"/> 29

30 LinearLayout 주요속성 : layout_gravity (1) Layout/lgravity.xml <TextView android:layout_height="fill_parent" android:text=" 정렬테스트 " android:textsize="30pt" android:textcolor="#00ff00" android:background="#ff0000" android:layout_gravity="center"/> 30

31 LinearLayout 주요속성 : layout_gravity (2) Layout/lgravity1.xml <TextView android:layout_width="wrap_content" android:layout_height="fill_parent" android:text=" 정렬테스트 " android:textsize="30pt" android:textcolor="#00ff00" android:background="#ff0000" android:layout_gravity="center"/> Layout/lgravity1.xml <TextView android:layout_width="wrap_content" android:text=" 정렬테스트 " android:textsize="30pt" android:textcolor="#00ff00" android:background="#ff0000" android:layout_gravity="center"/> [ lgravity1 width 만변경 ] [ lgravity1 width, height 모두변경 ] 수직 ( 수평 ) 리니어는차일드의수직 ( 수평 ) 요청을무시 31

32 Layout/lgravity2.xml <?xml version="1.0" encoding="utf-8"> LinearLayout 주요속성 : <LinearLayout layout_gravity (3) xmlns:android=" android:orientation="vertical" android:layout_height="fill_parent" android:gravity="center" > <TextView android:layout_width="wrap_content" android:text=" 정렬테스트 " android:textsize="30pt" android:textcolor="#00ff00" android:background="#ff0000"/> </LinearLayout> Layout/lgravity3.xml [ lgravity2 ] [ lgravity3 ] <?xml version="1.0" encoding="utf-8"> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_height="fill_parent" android:gravity="center" > <TextView android:layout_width="wrap_content" android:text=" 정렬테스트 " android:textsize="30pt" android:textcolor="#00ff00" android:background="#ff0000"/> <Button android:layout_width="wrap_content" android:layout_heigth="wrap_content" android:text=" 버튼이다."/> </LinearLayout> 32

33 LinearLayout 주요속성 : layout_gravity (4) Layout/lgravity4.xml <?xml version="1.0" encoding="utf-8"> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_height="fill_parent" android:gravity="center" > <TextView android:layout_width="200px" android:layout_height="100px" android:text=" 정렬테스트 " android:textsize="30pt" android:textcolor="#00ff00" android:background="#ff0000" android:layout_gravity="center_horizontal" android:gravity="right bottom"/> </LinearLayout> [ lgravity4 ] 33

34 LinearLayout 주요속성 : baselinealigned 높이가다른차일드뷰를수평으로정렬시하단정렬지정여부 디폴트 : true [ base1 ] [ base2 ] 수평리니어에서만적용 Layout/base1.xml ~ base2.xml <?xml version="1.0" encoding="utf-8"> <LinearLayout xmlns:android=" android:orientation="horizontal" android:layout_height="fill_parent" android:baselinealigned="true" > // false 로변경하면? <TextView android:layout_width="wrap_content" android:text="medium" android:textsize="10pt"/> <TextView android:layout_width="wrap_content" android:text="small" android:textsize="5pt" android:background="#0000ff"/> <TextView android:layout_width="wrap_content" android:text="large" android:textsize="20pt" android:typeface="serif"/> </LinearLayout> 34

35 LinearLayout 주요속성 : layout_weight (1) 중요도에따라차일드의크기를균등분할 값이클수록많은영역차지 0: 자신의고유크기로표현 1이상 : 형제뷰와의비율에따라부모의영역을균등하게배분 예 ) 버튼세개의중요도가 1, 3, 1이면부모의전체높이를 1:3:1로등분 35

36 LinearLayout 주요속성 : layout_weight (2) Layout/weight1.xml ~ weight2.xml <?xml version="1.0" encoding="utf-8"> <LinearLayout xmlns:android=" android" android:orientation="vertical" android:layout_height="fill_parent"> <Button android:text=" 위쪽버튼 " android:layout_weight="1"/> // 1 <EditText android:text=" 가운데에디트 " android:layout_weight="3"/> // 2 <Button android:text=" 아래쪽버튼 " android:layout_weight="1"/> // 3 </LinearLayout> [ weight1 ] [ weight2 ] 36

37 LinearLayout 주요속성 : layout_weight (3) Layout/weight3.xml <?xml version="1.0" encoding="utf-8"> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_height="fill_parent"> <Button android:layout_height="64px" android:text="tool Bar" android:layout_weight="0"/> <EditText android:layout_height="fill_parent" android:layout_weight="1"/> <Button android:layout_height="64px" android:text="menu Bar" android:layout_weight="0"/> </LinearLayout> [ weight3 ] 37

38 LinearLayout 주요속성 : 기타 (1) padding 뷰와내용물간의간격지정 (View의속성 ) 4면모두동일한여백지정 paddingleft, paddingtop, paddingright, paddingbottom 개별여백지정 layout_margin 마진패딩 뷰와부모와의간격을지정 근처에형제뷰가있으면설정한간격으로여백생성 뷰의입장에서볼때바깥여백을뜻하며레이아웃의속성 4면모두동일한여백지정 개별여백지정가능 Button layout_marginleft, layout_marginright, layout_margintop, layout_marginbottom 패딩 마진 38

39 LinearLayout 주요속성 : 기타 (2) Layout/padding1.xml <?xml version="1.0" encoding="utf-8"> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_height="fill_parent"> <EditText android:text="upper Text"/> <LinearLayout android:background="#ff0000"> <Button android:text="button"/> </LinearLayout> <EditText android:text="lower Text"/> </LinearLayout> [ padding1 ] 39

40 LinearLayout 주요속성 : 기타 (3) Layout/padding2.xml <LinearLayout android:background="#ff0000" android:layout_margin="10px"> [ padding2 ] Layout/padding3.xml <LinearLayout android:background="#ff0000" android:layout_margin="10px" android:padding="10px"> [ padding3 ] 40

41 RelativeLayout (1) 위젯과부모와의위치관계또는위젯끼리의관계를지정함으로써뷰를배치 ( 기준위젯에반드시 id 지정 ) 특정뷰가다른뷰의위치에종속적일때기준이되는뷰를먼저정의해야함 ex: A를 B의위에배치하고싶다면 XML 문서상에 B를먼저기술한후 A를나중에기술해야함 A B <RelativeLayout> <B android:id="@+id/b" /> <A layout_above="@id/b" /> </RelativeLayout> [ 원하는배치 ] [ XML 문서 ] 41

42 RelativeLayout (2) 레이아웃이배치되는순서 철수철수영희철수영희철수영희 몽룡 춘향 몽룡 좌상단에 철수오른쪽에 영희밑에 부모의오른쪽에 몽룡왼쪽에몽룡의아래쪽정렬 42

43 RelativeLayout (3) [ relative1 예제실행결과 ] Layout/relative1.xml <?xml version="1.0" encoding="utf-8"> <RelativeLayout xmlns:android=" android:orientation="vertical" > <TextView android:id="@+id/chulsoo" android:layout_width="wrap_content" android:layout_marginright="20px" android:textsize="15pt" android:text=" 철수 "/> <TextView android:id="@+id/younghee" android:layout_width="wrap_content" android:layout_torightof="@id/chulsoo" android:textsize="15pt" android:text=" 영희 "/> <TextView android:id="@+id/mongryong" android:layout_width="wrap_content" android:layout_below="@id/younghee" android:layout_alignparentright="true" android:layout_marginleft="10px" android:textsize="15pt" android:text=" 몽룡 "/> <TextView android:id="@+id/chunhyang" android:layout_width="wrap_content" android:layout_torightof="@id/mongryong" android:layout_alignbottom="@id/mongryong" android:textsize="15pt" android:text=" 춘향 "/> </RelativeLayout> 43

44 RelativeLayout (4) Attribute Name android:layout_above android:layout_alignbaseline android:layout_alignbottom android:layout_alignleft android:layout_alignparentbottom android:layout_alignparentleft android:layout_alignparentright android:layout_alignparenttop android:layout_alignright android:layout_aligntop android:layout_below android:layout_centerhorizontal android:layout_centerinparent android:layout_centervertical android:layout_toleftof android:layout_torightof Description Positions the bottom edge of this view above the given anchor view ID. Positions the baseline of this view on the baseline of the given anchor view ID. Makes the bottom edge of this view match the bottom edge of the given anchor view ID. Makes the left edge of this view match the left edge of the given anchor view ID. If true, makes the bottom edge of this view match the bottom edge of the parent. If true, makes the left edge of this view match the left edge of the parent. If true, makes the right edge of this view match the right edge of the parent. If true, makes the top edge of this view match the top edge of the parent. Makes the right edge of this view match the right edge of the given anchor view ID. Makes the top edge of this view match the top edge of the given anchor view ID. Positions the top edge of this view below the given anchor view ID. If true, centers this child horizontally within its parent. If true, centers this child horizontally and vertically within its parent. If true, centers this child vertically within its parent. Positions the right edge of this view to the left of the given anchor view ID. Positions the left edge of this view to the right of the given anchor view ID. 44

45 RelativeLayout (5) RelativeLayout 예제 name card 좌상단의이미지를제일먼저배치하고그아래삭제버튼배치 부모의위쪽변에이름을붙이면서동시에이미지의오른쪽에배치 부모의오른쪽에전화번호를붙이되이름과베이스를맞춤 설명문자열은이름밑에붙이되왼쪽변을이름과나란히맞춤 [ 정상적인결과 ] [ 베이스를맞추지않은결과 ] 45

46 AbsoluteLayout 관계나순서에상관없이지정한절대좌표에차일드뷰배치 공식문서에는사용을금지함 (RelativeLayout, FrameLayout 사용 ) Layout/absolute.xml <?xml version="1.0" encoding="utf-8"> <AbsoluteLayout xmlns:android=" android:layout_height="fill_parent"> <TextView android:layout_width="wrap_content" android:layout_x="50px" android:layout_y="100px" android:textsize="15pt" android:text="(50,100)"/> <TextView android:layout_width="wrap_content" android:layout_x="200px" android:layout_y="70px" android:textsize="15pt" android:text="(200,70)"/> </AbsoluteLayout> 46

47 FrameLayout (1) 모든차일드를프레임의좌상단에배치 차일드가두개이상일때는추가된순서대로겹쳐서표시함 ViewGroup 의서브클래스 addview, removeview: 실행중에차일드를추가및삭제 getchildcount: 차일드의개수확인 필요한차일드만표시하고겹쳐진차일드는숨겨둘수있음 차일드의보임상태는개별뷰의 visibility 속성을사용하여조정하며실행중에도조건에따라뷰의보임상태를변경할수있음 47

48 FrameLayout (2) foreground 차일드의위쪽에살짝얹히는이미지를지정 반투명한색상, 이미지사용이가능 foregroundgravity 전경의이미지를배치할방법을지정 ( 디폴트 : fill) measureallchildren 모든차일드의크기를다측정할것인지, 보이거나숨겨진차일드의크기만적용할것인지를지정 디폴트는 false이며 GONE 상태의차일드크기는측정하지않음 48

49 FrameLayout (3) Layout/frame.xml <?xml version="1.0" encoding="utf-8"> <FrameLayout xmlns:android=" android:layout_height="fill_parent"> <Button android:layout_width="wrap_content" android:text="push Button"/> <ImabeView android:layout_width="wrap_content" </FrameLayout> Layout/frame.java public class Frame extends Activity { public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancesatae); setcontentview(r.layout.frame); } } Button btn = (Button)findViewById(R.id.btn); btn.setonclicklistener(new Button.OnClickListener() { public void onclick(view v) { ImageView img = (ImageView)findViewById(R.id.img); if(img.getvisibility() == View.VISIBLE) { img.setvisibility(view.invisible); } else { img.setvisibility(view.visible); } } }); 49

50 TableLayout 표형식으로차일드를배치 ( 바둑판모양 ) TableRow 객체로구성되며내부에열 ( 셀 ) 이배치 셀에는차일드뷰하나를포함 크기속성에대한제약이있음 TableRow 객체의높이는항상 wrap_content로강제됨 layout_width 속성은따로지정할수없으며항상 fill_parent로가정됨 [ TableLayout 예제 ] [ TableLayout 예제 ] 50

51 레이아웃중첩 (1) 레이아웃끼리중첩가능 레이아웃중첩예제 NestLayout 제일바깥에 LinearLayout, 전체는수직으로뷰를배열 수직 LinearLayout 안에 TextView, Table, 수평 LinearLayout을일차차일드로배치 Table은다시 2행 3열의셀로분할되고, 각셀에는텍스트뷰를포함 수평 LinearLayout 안에는세개의 TextView를배치 TextView TextView TextView TextView 수직리니어 테이블 테이블로우 TextView TextView TextView pp. 158 ~ 159 TextView TextView TextView 수평리니어 51

52 레이아웃중첩 (2) 레이아웃중첩예제 MultPage 각버튼을누를때프레임내의모든페이지를일단숨긴후버튼에대응되 는페이지만을표시 [ Page 1 button ] [ Page 2 button ] [ Page 3 button ] pp. 160 ~

53 실행중속성변경 (1) 대부분의속성은관련메서드를사용하여실행중변경가능함 LinearLayout 클래스 public void LinearLayout.setOrientation( int orientation ) gravity 변경메서드 public void TextView.setGravity( int gravity ) TextView 속성관련메서드 void settext( CharSequence text ) void settextcolor( int color ) void settextsize( float size ) 53

54 실행중속성변경 (2) View Activity.findViewById (int id) View View.findViewById (int id) ID를사용하여해당뷰객체 (View) 를검색 액티비티및뷰에정의됨 액티비티에서호출시전체레이아웃에서검색 특정뷰에서검색시뷰의차일드중하나를검색 54

55 Layout/layout_codelayout.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_height="fill_parent" > <Button android:layout_width="wrap_content" android:text=" 버튼 " /> <TextView android:layout_width="wrap_content" android:text=" 문자열 " /> <EditText android:layout_width="wrap_content" android:text=" 에디트 " /> </LinearLayout> 55

56 Layout/CodeLayout2.java public class CodeLayout2 extends Activity { public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.layout_codelayout); LinearLayout MyLinear = (LinearLayout)findViewById(R.id.MyLinear); MyLinear.setOrientation(LinearLayout.HORIZONTAL); Button MyBtn = (Button)findViewById(R.id.MyButton); MyBtn.setTextSize(40); } } EditText MyEdit = (EditText)findViewById(R.id.MyEdit); MyEdit.setBackgroundColor(0xff00ff00); 56

57 레이아웃전개 (1) 레이아웃 (Layout) 생성할뷰의목록, 구조및속성들을열거 XML 문서를사용하여표현 액티비티에배치하기위해서는실제객체를생성해야함 이진형태로컴파일되어실행파일에내장되어실행직후에로드되어객체로변경됨 ADT 의 aapt 툴을사용 57

58 레이아웃전개 (2) 전개 (Inflation) XML 문서에정의된레이아웃과차일드뷰의속성을읽어실제뷰객체를생성하는과정 핵심메소드 : setcontentview( ) XML 문서의리소스 ID 를전달받아객체를생성하여액티비티를채움 58

59 레이아웃전개 (3) public class Inflation extends Activity { public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.layout_inflation); } layout_inflation.xml } <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_height="fill_parent" android:background="#ffffff" > <TextView android:gravity="center" android:textcolor="#ff0000" android:textsize="20px" android:text="textview" /> </LinearLayout> 59

60 레이아웃전개 (4) public class Inflation2 extends Activity { public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); LinearLayout linear = new LinearLayout(this); linear.setorientation(linearlayout.vertical); linear.setbackgroundcolor(color.white); TextView text = new TextView(this); text.settext("textview"); text.setgravity(gravity.center); text.settextcolor(color.red); text.settextsize(20); } } linear.addview(text); setcontentview(linear); // 레이아웃파라미터생략 60

61 레이아웃전개 (5) public class Inflation3 extends Activity { public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); /* XML 전개를직접하기 */ LayoutInflater inflater = (LayoutInflater)getSystemService( Context.LAYOUT_INFLATER_SERVICE); LinearLayout linear = (LinearLayout)inflater.inflate(R.layout.layout_inflation, null); } } setcontentview(linear); 61

62 레이아웃전개 (6) LayoutInflater 클래스 XML 리소스를전개하여뷰객체를생성 getsysemservice( ) 메소드 개발자가직접전개하기위한시스템수준의전개자 View LayoutInflater.inflate(int resource, ViewGroup root) resource XML 리소스 root 생성할뷰의 root로사용할뷰 리소스내부에 root가있으면 null로지정 62

63 레이아웃전개 (7) public class Inflation3 extends Activity { public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); /* 컨텍스트로부터전개자구하기 */ LayoutInflater inflater = LayoutInflater.from(this); LinearLayout linear = (LinearLayout)inflater.inflate(R.layout.layout_inflation, null); } } setcontentview(linear); 63

64 레이아웃전개 (8) static LayoutInflater LayouotInflater.from(Context context) LayoutInflater 클래스의정적메소드 컨텍스트를인수로전달하여전개자생성 생성한전개자의 inflate 메소드를호출 Activity는 Context의서브클래스임 this 를인자로사용 64

65 레이아웃전개 (9) public class Inflation3 extends Activity { public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); /* View 의정적메소드사용하여전개하기 */ LinearLayout linear = (LinearLayout)View.inflate( this, R.layout.layout_inflation, null ); } } setcontentview(linear); 65

66 레이아웃전개 (10) static View inflate (Context context, int resource, ViewGroup root) View의정적메서드 가장짧은길이의코드 66

67 레이아웃전개 (11) 사용용도 특정뷰혹은뷰그룹하나만을전개 layout_mytext.xml <?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android=" k/res/android" android:gravity="center" android:textcolor="#ff0000" android:textsize="20px" android:text="textview" /> public class Inflation4 extends Activity { public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); } } LinearLayout linear = new LinearLayout(this); linear.setorientation(linearlayout.vertical); linear.setbackgroundcolor(color.white); TextView text = (TextView)View.inflate( this, R.layout.layout_mytext, null); linear.addview(text); // 레이아웃파라미터생략 setcontentview(linear); 67

68 레이아웃파라미터 (1) 뷰가배치되는부모, 즉레이아웃의속성으로부모에게차일드뷰를배치할방법지시 뷰외부와의관계지정 "layout_" 으로시작 위젯의부모레이아웃에따라적용가능한종류가변경 레이아웃 ViewGroup.LayoutParams ViewGroup.MarginLayoutParams LinearLayout.LayoutParams AbsoluteLayout.LayoutParams RelativeLayout.LayoutParams 파라미터 layout_width, layout_height layout_marginleft, layout_marginright layout_gravity, layout_weight layout_x, layout_y layout_above, layout_alignparentright 68

69 레이아웃파라미터 (2) Object LinearLayout.LayoutParams ViewGroup.LayoutParams ViewGroup.MarginLayoutParams RelativeLayout.LayoutParams FrameLayout.LayoutParams 69

70 레이아웃파라미터 (3) Layout/LayoutParameter.xml <?xml version="1.0" encoding="utf-8"> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_height="fill_parent" android:background="#ffffff" android:gravity="center"> <TextView android:layout_width="wrap_content" android:textcolor="#ff0000" android:textsize="20px" android:text="textvieiw" android:background="#00ff00"/> </LinearLayout> 70

71 Layout/LayoutParameter2.java public class LayoutParameter2 extends Activity { public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); LinearLayout linear = new LinearLayout(this); linear.setorientation(linearlayout.vertical); linear.setgravity(gravity.center); linear.setbackgroundcolor(color.white); TextView text = new TextView(this); text.settext("textview"); text.settextcolor(color.red); text.settextsize(20); text.setbackgroundcolor(color.green); LinearLayout.LayoutParams paramtext = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); linear.addview(text, paramtext); } } setcontentview(linear); 71

72 레이아웃파라미터설정을생략한경우 72

73 레이아웃파라미터 (4) Layout/MarginParameter.xml <?xml version="1.0" encoding="utf-8"> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_height="fill_parent" android:background="#ffffff"> <Button android:layout_width="wrap_content" android:layout_height="fill_parent" android:text="button With Margin" android:layout_margintop="30px" android:layout_marginbottom="30px"/> </LinearLayout> 73

74 Layout/MarginParameter2.java public class MarginParameter2 extends Activity { public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); LinearLayout linear = new LinearLayout(this); linear.setorientation(linearlayout.vertical); linear.setbackgroundcolor(color.white); Button btn = new Button(this); btn.settext("button With Margin"); LinearLayout.LayoutParams parambtn = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.FILL_PARENT); parambtn.setmargins(0, 30, 0, 30); linear.addview(btn, parambtn); } } setcontentview(linear); 74

75 Lab Layout Test RelativeLayout 사용 arrow.png 사용 layout_margin 계열사용 75