리니어레이아웃 - 2 -

Size: px

Start display at page:

Download "리니어레이아웃 - 2 -"

니훈 심
6 years ago
Views:

1 4 차시레이아웃 1 학습목표 레이아웃의개념을이해한다. 중복리니어레이아웃의개념이해한다. 2 확인해볼까? 3 레이아웃개념익히기 1) 학습하기 [ 그림 4-1] ViewGroup 클래스계층도

2 리니어레이아웃 - 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

3 [ 예제 4-1]orientation 속성-horizontal 1 <LinearLayout 2 ~~~~~~~~ 중간생략 ~~~~~~~ 3 android:orientation="horizontal"> android:text="button1" /> android:text="button2" /> android:text="button3" /> 16 </LinearLayout> 3행 orientation 속성을 horizontal로설정하여버튼들이왼쪽위에서부터오른쪽으로배치된다. orientation 속성은디폴트로 horizontal 값을가지므로본행을삭제하여도동일한결과가나온다. [ 예제 4-2]orientation 속성-vertical 1 <LinearLayout 2 ~~~~~~~~ 중간생략 ~~~~~~~ 3 android:orientation="vertical"> android:text="button1" /> - 3 -

8 9 10 11 android:text="button2" /> 12 13 14 15 android:text="button3" /> 16 </LinearLayout> 3행 orientation 속성을

[ 예제 4-3]gravity 속성 1 <LinearLayout 2 ~~~~~~~~ 중간생략 ~~~~~~~ 3 android:orientation="vertical" 4

4 android:text="button2" /> android:text="button3" /> 16 </LinearLayout> 3행 orientation 속성을 vertical로설정하여버튼들이왼쪽위에서부터아래방향으로배치된다. 본행이없으면수평방향으로배치된다. [ 예제 4-3]gravity 속성 1 <LinearLayout 2 ~~~~~~~~ 중간생략 ~~~~~~~ 3 android:orientation="vertical" 4 android:gravity="center bottom"> android:text="button1" /> android:text="button2" /> android:text="button3" /> 17 </LinearLayout> 4행 gravity 속성을가운데아래에설정하여위젯들이화면의가운데아래에배치되어있다

[ 예제 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

5 [ 예제 4-4]layout_gravity 1 <LinearLayout 2 ~~~~~~~~ 중간생략 ~~~~~~~ 3 android:orientation="vertical"> android:layout_gravity="left" 8 android:text="button1" /> android:layout_gravity="center" 13 android:text="button2" /> android:layout_gravity="right" 18 android:text="button3" /> 19 </LinearLayout> 7, 12, 17행위젯에 layout_gravity 속성을설정하여자신을담고있는레이아웃에서본인은위치를결정한다

android:orientation="horizontal" > 9 10 11 12 android:text="button1" /> 13 14 15 16 android:text="button2" /> 17

6 [ 그림 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" > android:text="button1" /> android:text="button2" /> 17 </LinearLayout> 18 <LinearLayout 19 android:layout_width="match_parent" android:background="#0000ff" 22 android:gravity="center" - 6 -

7 23 android:orientation="vertical" > android:text="button3" /> android:text="button4" /> 32 </LinearLayout> 33 <LinearLayout 34 android:layout_width="match_parent" android:background="#ff0000" 37 android:gravity="center" 38 android:orientation="horizontal" > android:text="button5" /> 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 값으로설정하였다

[ 예제 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

8 [ 예제 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" > android:text="button1" /> android:text="button2" /> 18 </LinearLayout> 19 <LinearLayout 20 android:layout_width="match_parent" 21 android:layout_height="0dp" android:background="#0000ff" 24 android:gravity="center" 25 android:orientation="vertical" > android:text="button3" /> android:text="button4" /> 34 </LinearLayout> 35 <LinearLayout 36 android:layout_width="match_parent" - 8 -

9 37 android:layout_height="0dp" android:background="#ff0000" 40 android:gravity="center" 41 android:orientation="horizontal" > android:text="button5" /> 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 -

10 [ 그림 4-3] 실행화면 활동과정

11 [ 예제 4-7]main.xml 1 <LinearLayout xmlns:android=" 2 xmlns: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" android:layout_margin="5dp" 12 android:orientation="horizontal" > 13 <TextView android:text=" 첫번째수 " /> 17 <EditText 18 android:id="@+id/edtnum1" android:hint=" 첫번째수를입력하세요." /> 22 </LinearLayout> 23 <LinearLayout 24 android:layout_width="match_parent" android:layout_margin="5dp" 27 android:orientation="horizontal" > 28 <TextView android:text=" 두번째수 " /> 32 <EditText

12 android:hint=" 두번째수를입력하세요." /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_margin="5dp" android:orientation="horizontal" > android:text="1" /> android:text="2" /> android:text="3" /> android:text="4" /> android:text="5" />

13 </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_margin="5dp" android:orientation="horizontal" > android:text="6" /> android:text="7" /> android:text="8" /> android:text="9" /> android:text="0" /> </LinearLayout> <TextView

14 android:text=" 연산자 " /> <RadioGroup android:layout_margin="5dp" > <RadioButton android:text=" 더하기 " /> <RadioButton android:text=" 더하기 " /> <RadioButton android:text=" 더하기 " /> <RadioButton android:text=" 더하기 " /> </RadioGroup> android:layout_width="match_parent" android:layout_margin="5dp" android:text=" 계산하기 " /> <TextView android:text=" 계산결과 : " android:textcolor="#ff0000" android:textsize="20dp" /> </LinearLayout>

15 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; public class LinearLayoutActivity extends Activity { 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 }; protected void oncreate(bundle savedinstancestate) { 26 super.oncreate(savedinstancestate); 27 setcontentview(r.layout.main);

16 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() 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() public void onclick(view v) {

17 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(); if (Integer.parseInt(strNum2) == 0) 92 Toast.makeText(getApplicationContext(), 0으로나눌수없습니다.", 0).show(); 93 else 94 result = Integer.parseInt(strNum1) / Integer.parseInt(strNum2); 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행에디트텍스트에입력한문자열값으로저장할변수선언

18 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 학습확인하기

19 . 6 지식창고 참고문헌 참고사이트

[ 그림 7-1] 프로젝트 res 폴더 이미지뷰 [ 예제 7-1] 이미지뷰 1 <LinearLayout 2 중간생략 3 android:orientation="vertical" > 4 <ImageView

7 차시이미지처리 1 학습목표 이미지뷰를사용하는방법을배운다. 비트맵을사용하는방법을배운다. 2 확인해볼까? 3 이미지뷰와이미지버튼 1) 학습하기 [ 그림 7-1] 프로젝트 res 폴더 이미지뷰 [ 예제 7-1] 이미지뷰 1 4