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

Presentation on theme: "05. 레이아웃 익히기 제목. 05. 레이아웃 익히기 제목 레이아웃의 개념을 익힌다. 화면을 다양한 레이아웃으로 구성한다. Java 코드만으로 화면을 작성해본다."— Presentation transcript:

1

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

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

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

5 1. 레이아웃 개요 ▶ 레이아웃 기본 개념[1/2] 레이아웃
ViewGroup 클래스로부터 상속받으며 내부에 무엇을 담는 용도로 사용 레이아웃 중에서 가장 많이 사용되는 것은 리니어레이아웃(LinearLayout)

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

7 1. 레이아웃 개요 ▶ 레이아웃의 종류 레이아웃의 종류 리니어레이아웃 : 왼쪽 위부터 아래쪽 또는 오른쪽으로 차례로 배치
렐러티브레이아웃 : 위젯 자신이 속한 레이아웃의 상하좌우의 위치를 지정하여 배치 테이블레이아웃 : 위젯을 행과 열의 개수를 지정한 테이블 형태로 배열 그리드레이아웃 : 테이블레이아웃과 비슷하지만, 행 또는 열을 확장하여 다양하게 배치할 때 더 편리 프레임레이아웃 : 위젯들을 왼쪽 위에 일률적으로 겹쳐서 배치하여 중복해서 보이는 효과를 냄

8 2. 리니어레이아웃 ▶ 기본 리니어레이아웃 형태[1/7]
orientation 속성 리니어레이아웃의 가장 기본적인 속성 Vertical : 리니어레이아웃 안에 포함될 위젯의 배치를 수직방향으로 쌓음 Horizontal : 수평 방향으로 쌓겠다는 의미

9 2. 리니어레이아웃 ▶ 기본 리니어레이아웃 형태[2/7]
orientation 속성이 vertical 값인 XML 코드

10 2. 리니어레이아웃 ▶ 기본 리니어레이아웃 형태[3/7]
orientation 속성이 horizontal 값인 XML 코드

11 2. 리니어레이아웃 ▶ 기본 리니어레이아웃 형태[4/7]
gravity 속성 gravity 속성은 레이아웃 안의 위젯들을 어디에 배치할 것인지를 결정

12 2. 리니어레이아웃 ▶ 기본 리니어레이아웃 형태[5/7]
layout_gravity 속성 layout_gravity는 자신의 위치를 부모의 어디쯤에 위치시킬지를 결정

13 2. 리니어레이아웃 ▶ 기본 리니어레이아웃 형태[6/7]

14 2. 리니어레이아웃 ▶ 기본 리니어레이아웃 형태[7/7]
baselineAligned 속성 baselineAligned 속성은 크기가 다른 위젯들을 보기 좋게 정렬함 true와 false 값을 가질 수 있음

15 2. 리니어레이아웃 ▶ 중복 리니어레이아웃 형태[1/5]

16 2. 리니어레이아웃 ▶ 중복 리니어레이아웃 형태[2/5]
layout_weight 속성 리니어레이아웃을 여러 개 사용할 경우 각 레이아웃의 크기를 지정할 때 사용

17 2. 리니어레이아웃 ▶ 중복 리니어레이아웃 형태[3/5]
layout_height를 wrap_content로 변경

18 2. 리니어레이아웃 ▶ 중복 리니어레이아웃 형태[4/5]
layout_weight를 1로 지정

19 2. 리니어레이아웃 ▶ 중복 리니어레이아웃 형태[5/5]

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

21 2. 리니어레이아웃 ▶ Java 코드로 화면 만들기[2/5]
안드로이드 프로젝트 생성 프로젝트 이름 : Project5_1 패키지 이름 : com.cookandroid.project5_1 화면 디자인 및 편집 main.xml 삭제 Java 코드 작성 및 수정 main.xml 삭제했기 때문에 오류가 발생함 //를 붙여 주석으로 처리한 후 진행

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

23 2. 리니어레이아웃 ▶ Java 코드로 화면 만들기[4/5]
버튼을 만들고, 버튼을 클릭했을 때 토스트 메시지를 작성 (onCreate( ) 안에 이어서 코딩)

24 2. 리니어레이아웃 ▶ Java 코드로 화면 만들기[5/5]

25 3. 기타 레이아웃 ▶ 렐러티브레이아웃[1/6] 렐러티브레이아웃(상대레이아웃) 렐러티브레이아웃의 상하좌우에 배치
렐러티브레이아웃은 레이아웃 내부에 포함된 위젯들을 상대적인 위치로 배치 렐러티브레이아웃의 상하좌우에 배치

26 3. 기타 레이아웃 ▶ 렐러티브레이아웃[2/6] 렐러티브레이아웃 예제

27 3. 기타 레이아웃 ▶ 렐러티브레이아웃[3/6] 다른 위젯의 상대 위치에 배치 각 속성의 값은 다른 위젯의 id를 지정하면 됨
간략하게 표현하기 위해 속성 이름의 layout_은 생략

28 3. 기타 레이아웃 ▶ 렐러티브레이아웃[4/6] 렐러티브레이아웃 안에서 다른 위젯의 특정한 곳 배치 예제

29 3. 기타 레이아웃 ▶ 렐러티브레이아웃[5/6] 여러 위젯에서 상대 위치를 지정한 예제

30 3. 기타 레이아웃 ▶ 렐러티브레이아웃[6/6]

31 3. 기타 레이아웃 ▶ 테이블레이아웃[1/8] 테이블레이아웃(TableLayout) 주로 위젯을 표 형태로 배치할 때 사용
<TableRow>와 함께 사용되는데 <TableRow>의 개수가 바로 행의 개수가 됨 열의 개수는 <TableRow> 안에 포함된 위젯의 개수로 결정

32 3. 기타 레이아웃 ▶ 테이블레이아웃[2/8] 테이블레이아웃의 속성
layout_column : 지정된 열에 현재 위젯을 표시하라는 의미 stretchColumns : 지정된 열의 폭을 늘리라는 의미 stretchColumns =“*” : 각 셀을 같은 크기로 확장, 전체 화면이 꽉 차는 효과

33 3. 기타 레이아웃 ▶ 테이블레이아웃[3/8] 테이블레이아웃 예제

34 3. 기타 레이아웃 ▶ 테이블레이아웃[4/8] 테이블레이아웃을 활용하여 숫자 버튼까지 있는 계산기를 만들어보자.
안드로이드 프로젝트 생성 프로젝트 이름 : Project5_2 패키지 이름 : com.cookandroid.project5_2 화면 디자인 및 편집 TableLayout 1개와 TableRow 9개로 구성 에디트텍스트 2개, 숫자 버튼 10개, 연산 버튼 4개, 텍스트뷰 1개를 생성 연산 버튼 위젯에는 layout_margin을 적절히 지정 결과를 보여줄 TextView는 색상을 빨간색, 글자 크기는 20dp 각 위젯의 id는 위에서부터 Edit1, Edit2, BtnNum0~9, BtnAdd, BtnSub, BtnMul, BtnDiv, TextResult

35 3. 기타 레이아웃 ▶ 테이블레이아웃[5/8] 화면 디자인 및 편집

36 3. 기타 레이아웃 ▶ 테이블레이아웃[6/8] Java 코드 작성 및 수정 전역변수 선언
숫자 버튼을 제외한 activity_main.xml의 7개 위젯에 대응할 위젯변수 7개 입력될 2개 문자열 저장할 문자열 변수 2개 계산 결과를 저장할 정수 변수 1개 10개 숫자 버튼을 저장할 버튼 배열 10개 버튼의 id를 저장할 정수형 배열 증가 값으로 사용할 정수 변수

37 3. 기타 레이아웃 ▶ 테이블레이아웃[7/8] Java 코드 작성 및 수정
숫자 버튼이 없다고 가정하고 연산 버튼을 터치했을 때의 내용을 코딩

38 3. 기타 레이아웃 ▶ 테이블레이아웃[8/8] Java 코드 작성 및 수정
숫자 버튼 10개를 배열 변수에 대입한 후에 각 버튼의 클릭 이벤트 리스너를 만듦

39 3. 기타 레이아웃 ▶ 그리드레이아웃[1/4] 그리드레이아웃(GridLayout)
테이블레이아웃처럼 위젯을 표 형태로 배치할 때 사용하는데 좀 더 직관적임 Android 4.0(아이스크림 샌드위치, API 14)부터 지원

40 3. 기타 레이아웃 ▶ 그리드레이아웃[2/4] 그리드레이아웃 속성 <GridLayout> 자체에 자주 사용되는 속성
rowCount : 행 개수 columnCount : 열 개수 orientation : 그리드를 수평 방향을 우선할지, 수직 방향을 우선할지를 결정 그리드레이아웃 안에 포함될 위젯에서 자주 사용되는 속성 layout_row : 자신이 위치할 행 번호(0번부터 시작) layout_column : 자신이 위치할 열 번호(0번부터 시작) layout_rowSpan : 행을 지정된 개수만큼 확장 layout_columnSpan : 열을 지정된 개수만큼 확장 layout_gravity : 주로 fill, fill_vertical, fill_horizontal 등으로 지정 행 또는 열 확장시, 위젯을 확장된 셀에 꽉 채우는 효과를 냄

41 3. 기타 레이아웃 ▶ 그리드레이아웃[3/4] 그리드레이아웃 예제

42 3. 기타 레이아웃 ▶ 그리드레이아웃[4/4]

43 3. 기타 레이아웃 ▶ 프레임레이아웃[1/3] 프레임레이아웃(FrameLayout)
단순히 레이아웃 내의 위젯들은 왼쪽 상단부터 겹쳐서 출력 프레임레이아웃 자체로 사용하기보다는 탭 위젯 등과 혼용해서 사용할 때 유용

44 3. 기타 레이아웃 ▶ 프레임레이아웃[2/3] 프레임레이아웃의 속성 foreground : 프레임레이아웃의 전경 이미지를 지정
foregroundGravity : 전경 이미지의 위치를 지정

45 3. 기타 레이아웃 ▶ 프레임레이아웃[3/3] 프레임레이아웃 예제

46