4 차시레이아웃 1 학습목표 레이아웃의개념을이해한다. 중복리니어레이아웃의개념이해한다. 2 확인해볼까? 3 레이아웃개념익히기 1) 학습하기 [ 그림 4-1] ViewGroup 클래스계층도
리니어레이아웃 - 2 -
[ 예제 4-1]orientation 속성-horizontal 1 <LinearLayout 2 ~~~~~~~~ 중간생략 ~~~~~~~ 3 android:orientation="horizontal"> 4 5 6 7 android:text="button1" /> 8 9 10 11 android:text="button2" /> 12 13 14 15 android:text="button3" /> 16 </LinearLayout> 3행 orientation 속성을 horizontal로설정하여버튼들이왼쪽위에서부터오른쪽으로배치된다. orientation 속성은디폴트로 horizontal 값을가지므로본행을삭제하여도동일한결과가나온다. [ 예제 4-2]orientation 속성-vertical 1 <LinearLayout 2 ~~~~~~~~ 중간생략 ~~~~~~~ 3 android:orientation="vertical"> 4 5 6 7 android:text="button1" /> - 3 -
8 9 10 11 android:text="button2" /> 12 13 14 15 android:text="button3" /> 16 </LinearLayout> 3행 orientation 속성을 vertical로설정하여버튼들이왼쪽위에서부터아래방향으로배치된다. 본행이없으면수평방향으로배치된다. [ 예제 4-3]gravity 속성 1 <LinearLayout 2 ~~~~~~~~ 중간생략 ~~~~~~~ 3 android:orientation="vertical" 4 android:gravity="center bottom"> 5 6 7 8 android:text="button1" /> 9 10 11 12 android:text="button2" /> 13 14 15 16 android:text="button3" /> 17 </LinearLayout> 4행 gravity 속성을가운데아래에설정하여위젯들이화면의가운데아래에배치되어있다. - 4 -
[ 예제 4-4]layout_gravity 1 <LinearLayout 2 ~~~~~~~~ 중간생략 ~~~~~~~ 3 android:orientation="vertical"> 4 5 6 7 android:layout_gravity="left" 8 android:text="button1" /> 9 10 11 12 android:layout_gravity="center" 13 android:text="button2" /> 14 15 16 17 android:layout_gravity="right" 18 android:text="button3" /> 19 </LinearLayout> 7, 12, 17행위젯에 layout_gravity 속성을설정하여자신을담고있는레이아웃에서본인은위치를결정한다. - 5 -
[ 그림 4-2] 안드로이드프로젝트구성 [ 예제 4-5] 중복레이아웃 1 <LinearLayout 2 ~~~~~~~~ 중간생략 ~~~~~~~ 3 android:orientation="vertical"> 4 <LinearLayout 5 android:layout_width="match_parent" 6 7 android:gravity="center" 8 android:orientation="horizontal" > 9 10 11 12 android:text="button1" /> 13 14 15 16 android:text="button2" /> 17 </LinearLayout> 18 <LinearLayout 19 android:layout_width="match_parent" 20 21 android:background="#0000ff" 22 android:gravity="center" - 6 -
23 android:orientation="vertical" > 24 25 26 27 android:text="button3" /> 28 29 30 31 android:text="button4" /> 32 </LinearLayout> 33 <LinearLayout 34 android:layout_width="match_parent" 35 36 android:background="#ff0000" 37 android:gravity="center" 38 android:orientation="horizontal" > 39 40 41 42 android:text="button5" /> 43 44 45 46 android:text="button6" /> 47 </LinearLayout> 48 </LinearLayout> 4~17행첫번째내부리니어레이아웃 18~32행두번째내부리니어레이아웃 33~47행세번째내부리니어레이아웃 6, 20, 35행바깥의큰리니어레이아웃의 orientation 특성이수직방향으로 3개의내부리니어레이아웃이수직방향으로배치된다. 이때내부리니어레이아웃의높이 (layout_height 속성 ) 를 match_parent 값으로주면첫번째내부리니어레이아웃만보이고그다음 2개의내부리니어레이아웃은안보이게된다. 그래서 wrap_content 값으로설정하였다. - 7 -
[ 예제 4-6]layout_weight 1 <LinearLayout 2 ~~~~~~~~ 중간생략 ~~~~~~~ 3 android:orientation="vertical"> 4 <LinearLayout 5 android:layout_width="match_parent" 6 android:layout_height="0dp" 7 8 android:gravity="center" 9 android:orientation="horizontal" > 10 11 12 13 android:text="button1" /> 14 15 16 17 android:text="button2" /> 18 </LinearLayout> 19 <LinearLayout 20 android:layout_width="match_parent" 21 android:layout_height="0dp" 22 23 android:background="#0000ff" 24 android:gravity="center" 25 android:orientation="vertical" > 26 27 28 29 android:text="button3" /> 30 31 32 33 android:text="button4" /> 34 </LinearLayout> 35 <LinearLayout 36 android:layout_width="match_parent" - 8 -
37 android:layout_height="0dp" 38 39 android:background="#ff0000" 40 android:gravity="center" 41 android:orientation="horizontal" > 42 43 44 45 android:text="button5" /> 46 47 48 49 android:text="button6" /> 50 </LinearLayout> 51 </LinearLayout> 3행바깥의큰리니어레이아웃의 orientation 속성값이수직이다. 6, 21, 37행바깥의큰리니어레이아웃의 orientation 속성값이수직 (vertical) 일때 layout_weight 속성을사용하려면내부레이아웃의 layout_height 속성값을 0dp로설정해야한다. 반대로, 만약바깥의큰리니어레이아웃의 orientation 속성값이수평 (horizontal) 일때 layout_weight 속성을사용하려면내부레이아웃의 layout_width 속성값을 0dp로설정해야한다. 7, 22, 38행 3개의내부리니어레이아웃들의 layout_weighty 속성을 1로주었다. 이는사용할수있는전체공간을모두활용하여 1:1:1의비율로화면에배치하겠다는것을의미한다. 2) 활동하기 활동개요 - 9 -
[ 그림 4-3] 실행화면 활동과정 - 10 -
[ 예제 4-7]main.xml 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" 6 android:padding="5dp" 7 tools:context=".layoutactivity" > 8 <LinearLayout 9 android:layout_width="match_parent" 10 11 android:layout_margin="5dp" 12 android:orientation="horizontal" > 13 <TextView 14 15 16 android:text=" 첫번째수 " /> 17 <EditText 18 android:id="@+id/edtnum1" 19 20 21 android:hint=" 첫번째수를입력하세요." /> 22 </LinearLayout> 23 <LinearLayout 24 android:layout_width="match_parent" 25 26 android:layout_margin="5dp" 27 android:orientation="horizontal" > 28 <TextView 29 30 31 android:text=" 두번째수 " /> 32 <EditText - 11 -
33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 android:id="@+id/edtnum2" android:hint=" 두번째수를입력하세요." /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_margin="5dp" android:orientation="horizontal" > android:id="@+id/btn1" android:text="1" /> android:id="@+id/btn2" android:text="2" /> android:id="@+id/btn3" android:text="3" /> android:id="@+id/btn4" android:text="4" /> android:id="@+id/btn5" android:text="5" /> - 12 -
73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_margin="5dp" android:orientation="horizontal" > android:id="@+id/btn6" android:text="6" /> android:id="@+id/btn7" android:text="7" /> android:id="@+id/btn8" android:text="8" /> android:id="@+id/btn9" android:text="9" /> android:id="@+id/btn0" android:text="0" /> </LinearLayout> <TextView - 13 -
113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 android:text=" 연산자 " /> <RadioGroup android:id="@+id/rgroup" android:layout_margin="5dp" > <RadioButton android:id="@+id/rbadd" android:text=" 더하기 " /> <RadioButton android:id="@+id/rbsub" android:text=" 더하기 " /> <RadioButton android:id="@+id/rbmul" android:text=" 더하기 " /> <RadioButton android:id="@+id/rbdiv" android:text=" 더하기 " /> </RadioGroup> android:id="@+id/btncalc" android:layout_width="match_parent" android:layout_margin="5dp" android:text=" 계산하기 " /> <TextView android:text=" 계산결과 : " android:textcolor="#ff0000" android:textsize="20dp" /> </LinearLayout> - 14 -
45, 51, 57, 63, 69행 5개의버튼을담고있는리니어레이아웃의 orientation 속성이 42행처럼수평으로설정되어있고, 수평으로 5개의버튼을배열할때빈공간이발생하지않도록 layout_weight를사용하기위하여 5개버튼위젯들의 layout_width 속성을모두 0dp로설정한다. 46, 52, 58, 64, 70행 5개의버튼이수평방향으로 1:1:1:1:1의비율로배치하도록한다. [ 예제 4-8]LinearLayoutActivity.java 1 package com.example.linearlayout; 2 3 import android.app.activity; 4 import android.os.bundle; 5 import android.view.view; 6 import android.widget.button; 7 import android.widget.edittext; 8 import android.widget.radiogroup; 9 import android.widget.textview; 10 import android.widget.toast; 11 12 public class LinearLayoutActivity extends Activity { 13 14 EditText edtnum1, edtnum2; 15 Button[] numbuttons = new Button[10]; 16 RadioGroup rgroup; 17 Button btncalc; 18 TextView tvresult; 19 String strnum1, strnum2; 20 Integer result; 21 Integer[] numbuttonids = { R.id.btn0, R.id.btn1, R.id.btn2, R.id.btn3, R.id.btn4, 22 R.id.btn5, R.id.btn6, R.id.btn7, R.id.btn8, R.id.btn9 }; 23 24 @Override 25 protected void oncreate(bundle savedinstancestate) { 26 super.oncreate(savedinstancestate); 27 setcontentview(r.layout.main); - 15 -
28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 settitle(" 간단사칙연산계산기 "); edtnum1 = (EditText) findviewbyid(r.id.edtnum1); edtnum2 = (EditText) findviewbyid(r.id.edtnum2); rgroup = (RadioGroup) findviewbyid(r.id.rgroup); btncalc = (Button) findviewbyid(r.id.btncalc); tvresult = (TextView) findviewbyid(r.id.tvresult); for (int i = 0; i < 10; i++) { numbuttons[i] = (Button) findviewbyid(numbuttonids[i]); } for (int i = 0; i < 10; i++) { final int index; index = i; numbuttons[index].setonclicklistener(new View.OnClickListener() { @Override public void onclick(view v) { if (edtnum1.isfocused() == true) { strnum1 = edtnum1.gettext().tostring() + numbuttons[index].gettext().tostring(); edtnum1.settext(strnum1); } else if (edtnum2.isfocused() == true) { strnum2 = edtnum2.gettext().tostring() + numbuttons[index].gettext().tostring(); edtnum2.settext(strnum2); } else { Toast.makeText(getApplicationContext(), " 에디트텍스트를먼저선택하세요 ", 0).show(); } } }); } btncalc.setonclicklistener(new View.OnClickListener() { @Override public void onclick(view v) { - 16 -
68 switch (rgroup.getcheckedradiobuttonid()) { 69 case R.id.rbAdd: 70 strnum1 = edtnum1.gettext().tostring(); 71 strnum2 = edtnum2.gettext().tostring(); 72 result = Integer.parseInt(strNum1) + Integer.parseInt(strNum2); 73 tvresult.settext(" 계산결과 : " + result.tostring()); 74 break; 75 case R.id.rbSub: 76 strnum1 = edtnum1.gettext().tostring(); 77 strnum2 = edtnum2.gettext().tostring(); 78 result = Integer.parseInt(strNum1) - Integer.parseInt(strNum2); 79 tvresult.settext(" 계산결과 : " + result.tostring()); 80 break; 81 case R.id.rbMul: 82 strnum1 = edtnum1.gettext().tostring(); 83 strnum2 = edtnum2.gettext().tostring(); 84 result = Integer.parseInt(strNum1) * Integer.parseInt(strNum2); 85 tvresult.settext(" 계산결과 : " + result.tostring()); 86 break; 87 case R.id.rbDiv: 88 strnum1 = edtnum1.gettext().tostring(); 89 strnum2 = edtnum2.gettext().tostring(); 90 91 if (Integer.parseInt(strNum2) == 0) 92 Toast.makeText(getApplicationContext(), 0으로나눌수없습니다.", 0).show(); 93 else 94 result = Integer.parseInt(strNum1) / Integer.parseInt(strNum2); 95 96 tvresult.settext(" 계산결과 : " + result.tostring()); 97 break; 98 default: 99 Toast.makeText(getApplicationContext(), " 연산을먼저선택하세요.", 0).show(); 100 } 101 } 102 }); 103 } 104 } 14~18행 XML의위젯에관계되는변수를선언한다. 15행숫자버튼 10개를배열로저장한다. 19행에디트텍스트에입력한문자열값으로저장할변수선언 - 17 -
20행연산결과값을정수값으로저장할변수선언 21~22행숫자버튼 10개의 id를배열로저장한다. (R.java 파일을참조 ) 28행어플리케이션의제목을설정한다. 30~38행 XML의위젯들을관계되는변수와연결한다. 40~62행숫자버튼 10개에대해클릭했을때의동작을구현한다. 41~42행 i 값을익명클래스안에서사용하기위해서 final 키워드를사용하여선언한 index 변수를선언하여 i값을받는다. 44~61행각숫자버튼에대해클릭이벤트리스너를정의한다. 48~59행숫자버튼을클릭했을때활성화되어있는에디트텍스트에숫자를추가한다. 만약두개의에디트텍스트가모두포커싱이되어있지않다면토스트메시지를띄운다. 64~102행계산하기버튼에대해클릭이벤트리스너를정의한다. 68~100행선택된연산라디오버튼에따라연산을수행하도록 switch 문으로분기한다. 만약아무런연산을선택하지않았다면토스트메시지를띄운다. 4 배운내용정리 5 학습확인하기 - 18 -
. 6 지식창고 참고문헌 참고사이트 - 19 -