05. 레이아웃 익히기 제목.

Presentation on theme: "05. 레이아웃 익히기 제목."— Presentation transcript:

1 05. 레이아웃 익히기 제목

2 레이아웃의 개념을 익힌다. 화면을 다양한 레이아웃으로 구성한다. Java 코드만으로 화면을 작성해 본다.

3 01 레이아웃 개요 02 리니어레이아웃 03 기타 레이아웃

4 1. 레이아웃 개요▶ 레이아웃 기본 개념 레이아웃 계층도
레이아웃은 레이아웃 자체를 보이기 보다는, 레이아웃 안에 존재하는 위젯을 배치하기 위한 용도가 더 주요한 목적. 레이아웃 중에서 가장 많이 사용되는 것은 리니어레이아웃.

5 1. 레이아웃 개요▶ 레이아웃 기본 개념 레이아웃의 대표적인 속성
orientation : 레이아웃 안에 배치될 위젯의 수직 또는 수평방향을 설정 gravity : 레이아웃 안에 배치될 위젯을 좌측, 우측, 중앙 등 정렬할 방향을 설정 padding : 레이아웃 안에 배치될 위젯의 여백을 설정 layout_weight : 레이아웃이 전체 화면에서 차지하는 공간의 가중 값을 설정하는데, 여러 개의 레이아웃이 중복될 때 주로 사용 baselineAligned : 레이아웃 안에 배치할 위젯들을 보기 좋게 정렬한다

6 1. 레이아웃 개요▶ 레이아웃의 종류 레이아웃의 기본 형태
절대 좌표값으로 지정하는 앱슬루트레이아웃(AbsoluteLayout)도 있었으나, 해상도가 다른 안드로이드폰에서는 문제가 발생되어 사용 안함

7 2. 리니어레이아웃 ▶ 기본 리니어레이아웃 형태 orientation 속성과 예제 vertical은 수직 배열

8 2. 리니어레이아웃 ▶ 기본 리니어레이아웃 형태 horizontal은 수평배열

9 2. 리니어레이아웃 ▶ 기본 리니어레이아웃 형태 gravity 속성 - 속성은 레이아웃 안의 위젯들의 배치를 결정 예제

10 2. 리니어레이아웃 ▶ 기본 리니어레이아웃 형태 layout_gravity 속성 - 자신의 위치를 부모(주로 레이아웃)의 어디쯤에 위치할 것인지를 결정 예제

11 2. 리니어레이아웃 ▶ 기본 리니어레이아웃 형태 [직접 풀어보기 5-1]
리니어레이아웃으로 다음 화면을 구성하는 XML을 작성하라. 리니어레이아웃의 orientation은 vertical로 한다. 버튼 3개를 생성하고, 버튼의 layout_width는 110dp로, layout_height는 100dp로 한다. hint : 버튼에 gravity와 layout_gravity를 모두 설정해야 한다.

12 2. 리니어레이아웃 ▶ 기본 리니어레이아웃 형태 baselineAligned 속성 크기가 다른 위젯들의 정렬을 보기 좋게 설정
디폴트 값은 "true“ 예제

13 2. 리니어레이아웃 ▶ 중복 리니어레이아웃 형태 중복 리니어레이아웃 기본 형태

14 2. 리니어레이아웃 ▶ 중복 리니어레이아웃 형태 layout_weight 속성
리니어레이아웃을 여러 개 사용하면, 각 레이아웃의 크기를 지정 대개 각 레이아웃을 전체 화면에서 몇 %로 지정하는 것이 일반적 예제 1 - 오류

15 2. 리니어레이아웃 ▶ 중복 리니어레이아웃 형태

16 2. 리니어레이아웃 ▶ 중복 리니어레이아웃 형태

17 2. 리니어레이아웃 ▶ 중복 리니어레이아웃 형태 예제 2(오류 수정) - layout_height를 wrap_content로 변경

18 2. 리니어레이아웃 ▶ 중복 리니어레이아웃 형태 예제 3 - layout_weight를 1로 지정

19 2. 리니어레이아웃 ▶ 중복 리니어레이아웃 형태 [직접 풀어보기 5-2] 리니어레이아웃으로 다음 화면을
구성하는 XML을 작성하라. 단, 레이아웃은 구분되어 보이도록 서로 다른 색으로 지정한다. hint : 레이아웃 안에 다시 레이아웃을 여러 번 중첩해도 된다.

20 2. 리니어레이아웃 ▶ Java 코드로 화면 만들기
XML과 Java 코드 동작 방식

21 2. 리니어레이아웃 ▶ Java 코드로 화면 만들기
[실습5-1] XML 없이 화면 코딩하기 (1/3) 버튼을 클릭하면 Toast 메시지가 출력되는 화면을 XML 파일이 없이 Java에서 코딩 프로젝트 정보 프로젝트 이름 : Project5_1 패키지 이름 : com.cookandroid.project5_1 빌드 SDK : Goolge API 15 또는 16 Minimum Required SDK : API 15 또는 16 액티비티이름 : Project5_1Activity 레이아웃 이름 : activity_main  추후 삭제 타이틀 : Project5_1

22 2. 리니어레이아웃 ▶ Java 코드로 화면 만들기
[실습5-1] XML 없이 화면 코딩하기 (2/3) Java 코딩 1 - 리니어레이아웃을 생성하는 코드를 작성하고 실행

23 2. 리니어레이아웃 ▶ Java 코드로 화면 만들기
[실습5-1] XML 없이 화면 코딩하기 (3/3) Java 코딩 2 - 버튼을 만들고 버튼을 클릭했을 때, Toast 메시지를 나타냄 onCreate() 메소드 안에 이어서 코딩.

24 2. 리니어레이아웃 ▶ Java 코드로 화면 만들기
[직접 풀어보기 5-3] 다음 화면을 XML파일 없이 Java코드만 이용하여 완성하라. 레이아웃에는 에디트텍스트 1개와 버튼 1개, 텍스트뷰 1개를 생성한다. 버튼을 클릭하면 에디트텍스트에 써진 문자열이 텍스트뷰에 나타나도록 한다.

25 3. 기타 레이아웃▶ 렐러티브레이아웃 개념 렐러티브레이아웃(RelativeLayout)은 상대레이아웃이라고도 부르는데, 이름처럼 레이아웃 내부에 포함된 위젯들을 상대적인 위치로 배치 렐러티브레이아웃의 상하좌우에 배치

26 3. 기타 레이아웃▶ 렐러티브레이아웃 예제 1

27 3. 기타 레이아웃▶ 렐러티브레이아웃 다른 위젯의 상대위치에 배치
각 속성의 값은 다른 위젯의 id를 지정하면 되는데, 형식으로 사용 아래 그림을 간략하게 표현하기 위해서 나타난 속성 이름에서 앞의 "layout_"은 생략하였음

28 3. 기타 레이아웃▶ 렐러티브레이아웃 예제 2

29 3. 기타 레이아웃▶ 렐러티브레이아웃 예제 3

30 3. 기타 레이아웃 [직접 풀어보기 5-4] 다음 화면의 XML 코드를 중복 리니어레이아웃과 렐러티브레이아웃으로 각각 작성하라. 텍스트뷰 1개, 에디트텍스트 1개, 버튼 2개로 구성한다.

31 3. 기타 레이아웃▶ 테이블레이아웃 개요 표 형태로 위젯을 배치할 때 주로 사용
<TableRow>와 함께 사용되는데, <TableRow>의 개수가 바로 행의 개수가 됨. 열의 개수는 <TableRow>안에 포함된 위젯의 개수가 열의 개수로 결정됨. 3행 4열의 테이블레이아웃은 다음과 같음

32 3. 기타 레이아웃▶ 테이블레이아웃 속성 layout_span은 열을 합쳐서 표시하라는 의미
layout_column은 지정된 열에 현재 위젯을 표시하라는 의미 stretchColumns는 <TableLayout> 자체에 설정하는 속성으로 지정된 열의 폭을 늘리라는 의미. stretchColumns=“*”로 하면 각 셀을 모두 같은 크기로 확장해서 전체 화면이 꽉 차는 효과를 갖음 참고로 열번호는 0번부터 시작함

33 3. 기타 레이아웃▶ 테이블레이아웃 예제

34 3. 기타 레이아웃▶ 테이블레이아웃 [실습5-2] 테이블레이아웃을 활용한 계산기 앱(1/10)
<실습 4-1>에서 초간단 계산기를 만들었다. 이번에는 테이블레이아웃을 활용하여 숫자 버튼까지있는 계산기를 만들어보자. 비슷한 형태의 버튼이 여러 개 나오는데, Java 코드로 버튼을 배열로 처리하는 기법도 함께 익혀보겠다. 프로젝트 정보 프로젝트 이름 : Project5_2 패키지 이름 : com.cookandroid.project5_2 빌드 SDK : Goolge API 15 또는 16 Minimum Required SDK : API 15 또는 16 액티비티이름 : Project5_2Activity 레이아웃 이름 : activity_main 타이틀 : Project5_2

35 3. 기타 레이아웃▶ 테이블레이아웃 [실습5-2] 테이블레이아웃을 활용한 계산기 앱(2/10) 화면 디자인 (1/4)
TableLayout 1개와 TableRow 9개로 구성 EditText 2개, 숫자버튼 10개, 연산 Button 4개, TextView 1개를 생성 각 연산 버튼 위젯에는 layout_margin을 적절히 지정 결과를 보여줄 TextView는 색상을 빨간색으로, 글자크기는 20dp 정도로 지정 각 위젯의 id는 위에서부터 Edit1, Edit2, BtnNum0~9, BtnAdd, BtnSub, BtnMul, BtnDiv, TextResult로 지정

36 3. 기타 레이아웃▶ 테이블레이아웃 [실습5-2] 테이블레이아웃을 활용한 계산기 앱(3/10) 화면 디자인 (2/4)

37 3. 기타 레이아웃▶ 테이블레이아웃 [실습5-2] 테이블레이아웃을 활용한 계산기 앱(4/10) 화면 디자인 (3/4)

38 3. 기타 레이아웃▶ 테이블레이아웃 [실습5-2] 테이블레이아웃을 활용한 계산기 앱(5/10) 화면 디자인 (4/4)

39 3. 기타 레이아웃▶ 테이블레이아웃 [실습5-2] 테이블레이아웃을 활용한 계산기 앱(6/10)
Java 코딩 1 : 전역변수 선언 숫자 버튼을 제외한 main.xml의 7개 위젯에 대응할 위젯 변수 7개 입력될 2개 문자열을 저장할 문자열 변수 2개 계산 결과를 저장할 정수 변수 1개 10개 숫자버튼을 저장할 버튼 배열 10개 버튼의 id를 저장할 정수형 배열 증가 값으로 사용할 정수변수

40 3. 기타 레이아웃▶ 테이블레이아웃 [실습5-2] 테이블레이아웃을 활용한 계산기 앱(7/10)
Java 코딩 2-1 숫자 버튼이 없다고 가정하고, 연산 버튼을 터치했을 때의 내용을 코딩

41 3. 기타 레이아웃▶ 테이블레이아웃 [실습5-2] 테이블레이아웃을 활용한 계산기 앱(8/10) Java 코딩 2-2

42 3. 기타 레이아웃▶ 테이블레이아웃 [실습5-2] 테이블레이아웃을 활용한 계산기 앱(9/10) Java 코딩 3-1
10개 숫자 버튼을 배열 변수에 대입한 후에, 각 버튼의 클릭이벤트 리스너 생성

43 3. 기타 레이아웃▶ 테이블레이아웃 [실습5-2] 테이블레이아웃을 활용한 계산기 앱(10/10) Java 코딩 3-2

44 3. 기타 레이아웃▶ 그리드레이아웃 개요 테이블레이아웃에서는 좀 어려웠던 행을 확장하는 기능도 간단하게 할 수 있어서 유연한 화면 구성에 적합 행, 열을 지정하는 것은 상당히 직관적 Android 4.0 (아이스크림 샌드위치, API 14)부터 지원.

45 3. 기타 레이아웃▶ 그리드레이아웃 속성 <GridLayout> 자체에 자주 사용되는 속성
rowCount : 행 개수 columnCount : 열 개수 orientation : 수평방향/수직방향 중 어디를 우선할 것인지를 결정 그리드레이아웃 안에 포함될 위젯에서 사용되는 속성 layout_row : 자신이 위치할 행 번호 (0번부터 카운트) layout_column : 자신이 위치할 열 번호 (0번부터 카운트) layout_rowSpan : 지정된 개수만큼 행을 확장 layout_columnSpan : 지정된 개수만큼 열을 확장 layout_gravity : 위젯을 확장된 셀에 꽉 채우는 효과

46 3. 기타 레이아웃▶ 그리드레이아웃 예제

47 3. 기타 레이아웃▶ 그리드레이아웃 [직접 풀어보기 5-5] <실습 5-2>를 그리드레이아웃으로 변경해서 실행하라.
hint : Java 코드는 변경할 필요가 없고, XML만 변경하면 된다. 또 XML 위젯의 id도 동일하게 사용한다.

48 3. 기타 레이아웃▶ 프레임레이아웃 개요 단순히 레이아웃 내의 위젯들은 왼쪽 상단부터 겹쳐서 출력함
프레임레이아웃 그 자체를 사용하기 보다는 탭 위젯 등과 혼용해서 사용할 때 유용함

49 3. 기타 레이아웃▶ 프레임레이아웃 속성 - foreground : 프레임레이아웃의 전경이미지를 지정
foregroundGravity : 전경이미지의 위치를 지정 예제

50 테이블레이아웃은 표 형태로 위젯을 배치할 때 사용되는데, 행의 개수는 <TableRow>로 결정된다
레이아웃 종류 리니어레이아웃(LinearLayout), 렐러티브레이아웃(RelativeLayout), 프레임레이아웃(FrameLayout), 테이블레이아웃(TableLayout), 그리드레이아웃(GridLayout) 레이아웃 주요 속성 orientation, gravity, padding, layout_weight, baselineAligned 테이블레이아웃은 표 형태로 위젯을 배치할 때 사용되는데, 행의 개수는 <TableRow>로 결정된다 그리드레이아웃은 테이블레이아웃보다 좀 더 직관적으로 구성할 수 있으며, 행 단위의 확장도 가능해서 다양한 형태의 표를 구성할 수 있다. 프레임레이아웃은 레이아웃 안의 위젯들을 좌측상단에 겹쳐서 출력한다

51