[boostcourse] 1. 레이아웃 만들기

 

 

해당 포스트는 부스트코스의 "안드로이드 앱 프로그래밍"을 수강하며

학습한 내용을 토대로 작성되었습니다.

 

목차

• 첫번째 앱 만들기
• 도구 사용하기
• 레이아웃 종류
• 기본 위젯들
• 드로어블 만들기

 

 

---

 

첫번째 앱 만들기

안드로이드 모바일 앱은 '안드로이드 스튜디오'라는 도구를 사용해 만들 수 있다.

해당 도구는 안드로이드 개발자 사이트에서 다운로드 받을 수 있다.

 

http://developer.android.com/studio/index.html

Download Android Studio and SDK tools  |  Android 스튜디오

 

안드로이드 스튜디오를 이용해 만든 앱을 띄우고 테스트할 때는 '애뮬레이터'를 사용한다.

여기서 에뮬레이터는 가상의 단말기를 말한다.

앱을 실행할 때에는 상단의 아이콘 ▶ 을 클릭하면 된다.

 

프로젝트 내 파일은 크게 XML 과 java 로 분류한다.

 

- XML : 레이아웃

- java : 레이아웃.xml 에 기능을 넣어주는 역할

 

 

 

---

 

도구 사용하기

사용자에게 보이는 화면은 XML 파일로 만들어지며, XML 레이아웃이라 부른다.

XML 파일 내에는 <태그> 와 <속성> 이 들어가며, 이 파일은 시스템에 의해 읽혀 화면에 보여진다.

또한, 화면이나 소스코드를 수정하면 안드로이드는 수정 사항을 즉시 반영한다.

 

각 <태그>는 뷰를 의미한다.

뷰는 화면을 만드는 가장 기본적인 단위다.

뷰 중에 눈에 보이는 것들은 위젯, 눈에 보이지 않는 것들은 레이아웃이라 부른다.

 

<속성>에 붙은 'android' 지시어는 안드로이드 SDK에서 정의한 속성을 말한다.

필수적인 속성은 크기를 나타내는 layout_width 와 layout_height 이다.

 

 

 

---

 

레이아웃 종류

프로젝트를 처음 만들면 제약 레이아웃(ConstraintLayout) 내에 버튼이 담긴 화면이 생성된다.

 

(1) ConstraintLayout

제약 레이아웃은 제약 조건을 이용해 그 안에 추가된 뷰들의 위치를 결정한다.

그러한 제약 조건은 연결선을 통해 만들어진다.

 

(2) LinearLayout

리니어 레이아웃은 상자를 쌓듯 뷰를 하나씩 쌓을 수 있는 레이아웃이다.

화면에서 뷰가 차지한 영역을 상자라 보고, 이 상자를 한쪽 방향으로 쌓을 수 있게 한다.

뷰를 정렬할 때는 'layout_gravity', 뷰 안 내용물을 정렬할 때는 'gravity'를 사용한다.

 

(3) RelativeLayout

상대 레이아웃은 뷰를 담고 있는 부모 레이아웃이나 그 안에 들어있는 다른 뷰들과의 상대적 위치를 이용해 화면을 배치한다.

부모 레이아웃과의 상대적 위치를 지정할 때 사용하는 속성들은 모두 'parent' 라는 단어가 들어가 있지만,

다른 뷰와의 상대적 위치를 지정할 때 사용하는 속성들에는 parent 라는 단어가 들어가 있지 않다.

 

(4) FrameLayout

프레임 레이아웃은 한번에 하나의 뷰만 보여주는 레이아웃으로, 화면에는 가장 나중에 추가한 뷰만 보인다.

이런 특성 때문에 화면 중첩 시에 주로 사용된다.

 

(5) TableLayout

테이블 레이아웃은 격자 모양으로 뷰를 배치할 때 사용한다.

레이아웃 안에서 각 행은 TableRow 태그를 이용해 추가하며, 그 안에 추가되는 뷰의 개수에 따라 열의 개수 또한 결정된다.

정해진 규격에 맞춰 테이블을 제작하고 싶을 때 테이블 레이아웃을 사용한다.

 

 

 

---

 

기본 위젯들

(1) TextView

텍스트뷰는 화면에 글자를 표시하도록 해준다.

해당 뷰 안에 들어가는 내용은 가급적 stings.xml 파일 안에 넣어둔 태그 값으로 설정한다.

해당 방식은 다국어를 설정할 때도 유용한데, 언어 폴더를 각각 만들어 넣으면 단말의 위치에 따라 언어가 변경된다.

 

(2) Button

버튼은 텍스트뷰를 상속하여 만들어졌다.

이는 라디오 버튼이나 체크 박스 등으로 나누어 사용될 수 있다.

그 중 라디오 버튼은 라디오 그룹을 이용해 하나의 그룹으로 묶어준다.

 

(3) EditText

EditText는 입력 상자 역할을 한다.

<inputType> 속성을 이용해, 어떤 유형의 글자를 입력할 지 결정한다.

 

(4) ImageView

이미지뷰는 이미지를 보여주는 뷰로, res/drwable 폴더 내 이미지를 불러와 보여준다.

이미지 파일의 확장자는 png 형식의 이미지를 권장한다.

 

 

 

---

 

드로어블 만들기

드로어블(Drawable)은 뷰에 설정할 수 있는 객체이며, 그래픽으로 그릴 수 있다.

 

(1) 상태 드로어블

상태 드로어블은 뷰의 상태에 따라 뷰에 보여줄 그래픽을 다르게 지정할 수 있다.

drawable 폴더 내 최상위 태그는 <selector> 이며, 태그 내에 <item> 태그를 넣을 수 있으며,

state_ 로 시작하는 상태를 나타내는 속성을 적용할 수 있다.

 

(2) 쉐이프 드로어블

쉐이프 드로어블은 XML로 도형을 그릴 수 있도록 한다.

drawable 폴더 내 최상위 태그는 <shape> 이며, 해당속성을 이용해 원하는 모양의 도형을 지정할 수 있다.

 

# 태그 종류

 

stroke	테두리 선 속성 지정
width	선의 굵기
color	선의 색상
solid	도형의 안쪽 채우기
gradient	배경색으로 그라데이션 설정

 

 

 

 

 

© 참고

https://www.boostcourse.org/mo316/joinLectures/13158?isDesc=false 

안드로이드 앱 프로그래밍