[Do it 개정7판] 안드로이드 스튜디오와 친숙해지기

책: Do it 안드로이드 앱 프로그래밍 (개정 7판)
날짜: 20-03-10 
내용: Chapter02-01

도구: 안드로이드 스튜디오
언어: 자바
환경: Windows10

 

---

 

01-1. 안드로이드 스튜디오 제대로 익히기

 

- 안드로이드 스튜디오는 인텔리제이( InteelliJ )라는 개발 도구를 확장시켜 만든 것이다.

- 안드로이드 스튜디오 최신버전 확인하기 : Configure - Check for Updates

- 안드로이드 스튜디오 테마 변경하기 : File - Settings - Apperance & Behavior - Apperance - Theme

 

Minimum API level : 어느 OS 버전의 단말까지 지원할 것인가를 지정하기 위한 것

( 버전이 높을수록 최신단말이다. / 최대한 많은 사람들이 사용하게 하기위해 낮은 버전까지 지원하게 만들면 좋다. )

 

[ Project Files ] 탭 : 윈도우 파일 탐색기처럼 프로젝트를 볼 수 있다.

[ Android ] 탭 : 프로젝트 안에 들어있는 파일을 보기 쉽게 정리해 준다.

 

 

[ Sync Project with Gradle Files ]

빌드 기능을 담당하는 그래이들이 새로 프로젝트를 빌드하면서 변경된 파일의 내용들을 모두 반영한다.

방법1: [File] - [Sync Project with Gradle Files]
방법2: Sync Project with Gradle Files 아이콘 클릭

 

파일의 내용을 변경하는 경우에는 안드로이드 스튜디오가 자동으로 변경사항을 반영하지만
자동으로 모든 파일의 내용을 갱신하지는 않는다.
따라서 이미지 파일을 새로 가져다 놓거나 또는 XML 파일을 수정했을 때 오류가 발생했다면
코드를 수정한 후에도 오류가 그대로 남아 있을 수 있다. 이때 사용한다.

 

 

 

ㅁ 코드 편집기 주요 기능

 

Ctrl + Q : 클래스에 대한 API 문서가 표시 ( 마우스 커서를 클래스에 위치시키고 사용 )

Ctrl + P : 파라미터( 매개변수 )들에 대한 후보들을 확인 할 수 있다. ( 마우스 커서를 소괄호에 위치 시키고 사용 )

마우스 우클릭 + Generate : 코드 생성을 위한 메뉴 표시 ( 생성자, 오버라이딩 등의 코드를 자동으로 만드는 기능 )

Ctrl + Shift + F : 프로젝트 파일 전체에서 원하는 글자 검색

 

 

ㅁ 디자이너 도구 주요 기능

 

Palette( 프리뷰 왼쪽 ) : 버튼 등 다양한 위젯(Widget)을 사용할 수 있음

Attributes( 프리뷰 오른쪽 ) : 위젯의 속성 값을 입력하거나 수정할 수 있음

 

 

---

 

 

01-2. 뷰와 뷰의 크기 속성 이해하기

 

ㅁ 뷰의 속성

 

뷰( View ) : 컨트롤이나 위젯으로 불리는 UI 구성요소

뷰그룹 : 뷰를 여러개 포함하고 있는 것

( 뷰 그룹은 뷰를 상속한다. 따라서 뷰 그룹도 일종의 뷰이다. )

디자인 패턴 : 컴포지트 패턴 ( Composite Pattern )

 

안드로이드 화면을 구성하는 뷰와 뷰그룹의 역할을 구분하기 위해

뷰의 종류에 따라 다른 이름으로 부르기도 한다.

 

위젯( Widget ) : 뷰 중에서 일반적인 컨트롤의 역할을 하는 것 ( 버튼, 텍스트 등 )

레이아웃 ( Layout ) : 뷰그룹 중에서 내부에 뷰들을 포함하고 있으면서 그것들을 배치하는 역할을 하는 것

( 레이아웃은 눈으로 직접 확인할 수는 없지만 여러 위젯을 담고 있으면서 그것들이 어디에 배치되어야 할지 정해준다. )

 

 

ㅁ 뷰의 크기 속성

 

android: => 안드로이드의 기본 API에 정의한 속성이라는 의미

 

* 뷰가 가질 수 있는 필수 속성

1) layout_width : 가로크기

2) layout_height : 세로크기

 

가로세로의 크기의 값은 아래의 세 가지 값 중의 하나가 들어갈 수 있다.

 

1) wrap_content : 뷰에 들어 있는 내용물의 크기에 자동으로 맞춘다.

2) match_parent : 뷰를 담고 있는 뷰그룹의 여유 공간을 꽉 채운다.

3) 숫자로 크기지정 : 숫자를 사용해 크기를 지정한다. ( 크기는 dp나 px와 같은 단위가 꼭 있어야 한다. )

 

 

---

 

 

01-3. 레이아웃 기초 익히기

 

ㅁ 제약조건 이해하기

 

제약 레이아웃 ( Constraint Layout )

안드로이드 스튜디오의 디폴트 레이아웃
제약조건 : 뷰가 레이아웃 안의 다른 요소와 어떻게 연결되는지 알려주는 것
뷰의 연결점( Anchor Point )과 대상( Target )을 연결한다.

뷰를 감싸고 있는 레이아웃을 부모레이아웃( Parent Layout )이라고 부른다.
뷰는 위, 아래, 왼쪽, 오른쪽 각각 연결점을 가지고 있다. ( 연결점을 핸들이라고 부른다. )

 

연결선을 만들 때 뷰의 연결점과 타깃이 될 수 있는 것

1) 같은 레이아웃 안에 들어있는 다른 뷰의 연결점

2) 부모 레이아웃의 연결점

3) 가이드라인( Guideline )

 

대상 뷰와 타깃의 연결점으로 될 수 있는 것

1) 위쪽(Top), 아래쪽(Bottom), 왼쪽(Left, Start). 오른쪽(Right, End)

2) 가로축의 가운데(Center X), 세로축의 가운데(Center Y)

3) 베이스라인(Baseline) -> 텍스트를 보여주는 뷰인 경우에만 적용됨

 

마진( Margin ) : 연결점과 타깃의 거리를 나타냄

 

 

 

ㅁ 화면 가운데 뷰 배치하기

 

4개의 연결점을 부모 레이아웃에 연결해 중앙에 위치했을때 위치를 변경하기 위해 사용

세로방향 바이어스 ( Vertical Bias )

가로방향 바이어스 ( Horizontal Bias )

 

 

ㅁ 가이드라인 사용하기

 

가이드라인( Guideline )

여러 개의 뷰를 일정한 기준 선에 정렬할 때 사용한다. ( 실제 화면의 구성 요소는 아니다. )

세로 줄 ( Add Vertical Guideline )

가로 줄 ( Add Horizontal Guideline )

 

필수 속성 : orientation = ( vertical / horizontal )

 

layout_constraintGuide_begin 속성 : 부모 레이아웃의 벽면에서 얼마나 떨어뜨려 배치할지 지정하는 속성

1) begin : 세로 방향인 경우 왼쪽부터, 가로 방향인 경우 위쪽부터의 거리 지정

2) end : 세로 방향인 경우 오른쪽부터, 가로 방향인 경우 아래쪽부터의 거리 지정

3) percent : begin 속성 대신 지정하되 %단위로 거리 지정

 

 

 

ㅁ XML 원본에 추가된 속성 확인하기

 

xmlns:android => 안드로이드 기본 SDK에 포함되어 있는 속성을 사용합니다.

xmlns:app => 프로젝트에서 사용하는 외부 라이브러리에 포함되어 있는 속성을 사용합니다.

                   app이라는 단어는 다른것으로 바꿀 수 있다.

xmlns: tools => 안드로이드 스튜디오의 디자이너 도구 등에서 화면에 보여줄 때 사용합니다.

                     이 속성은 앱이 실행될 때는 적용되지 않고 안드로이드 스튜디오에서만 적용된다.

 

아래 ConstraintLayout은 안드로이드 SDK에 나중에 추가되면서 외부 라이브러리로 분류되었다.

그래서 그 앞에 패키지 이름까지 함께 작성한 것이다.

 

 

 

id 속성의 용도

1) XML 레이아웃 파일 안에서 뷰를 구분할 때

2) XML 레이아웃 파일에서 정의한 뷰를 자바 소스 파일에서 찾을 때

 

제약 레이아웃에서 하나의 뷰를 다른 뷰와 연결할 때 사용하는 XML 속성의 이름 규칙

layout_[소스 뷰의 연결점]_[타깃 뷰의 연결점]="[타깃 뷰의 id]"

 

버튼 5의 아래점을 버튼 4의 위에 점에 연결할때

소스 뷰 : 버튼5 ( @+id/button5 )

타깃 뷰 : 버튼4 ( @+id/button4 )

 app:layout_constraintBottom_toTopOf="@+id/button4"

 

 

 

 

ㅁ 크기를 표시하는 단위와 마진

 

px (픽셀) : 화면 픽셀의 수

dp (밀도 독립적 픽셀) : 160dpi 화면을 기준으로 한 픽셀 ( = dpi )

sp (축척 독립적 픽셀)  : 텍스트 크기를 지정할 때 사용하는 단위. 글꼴의 설정에 따라 1sp당 픽셀수가 달라짐 ( = spi )

in (인치) : 1인치로 된 물리적 길이

mm (밀리미터) : 1밀리미터로 된 물리적 길이

em (텍스트 크기) : 글꼴과 상관없이 동일한 텍스트 크기 표시

 

* 뷰에는 dp , 글자 크기에는 sp 단위를 사용하는 것이 좋다.

 

 

마진 ( margin )

layout_marginTop : 뷰의 위쪽을 얼마나 띄울지 지정

layout_marginBottom : 뷰의 아래쪽을 얼마나 띄울지 지정

layout_marginLeft : 뷰의 왼쪽을 얼마나 띄울지 지정

layout_marginRight : 뷰의 오른쪽을 얼마나 띄울지 지정

layout_margin : 뷰의 위, 아래, 왼쪽, 오른쪽을 얼마나 띄울지 한꺼번에 지정

 

 

---

 

[ 도전01. 화면 아래쪽에 두 개의 버튼 추가하기 ]

=> 새로운 프로젝트를 만들고 화면의 아래쪽에 두 개의 버튼이 보이도록 만들기

 

1) 제약 레이아웃을 사용해 화면을 구성합니다.

2) 화면의 아래쪽에 가이드라인을 배치합니다.

3) 가이드라인의 위쪽에 버튼을 추가한 후 가이드라인과 연결합니다. 그리고 적절한 간격을 띄워줍니다.

4) 가이드라인의 위쪽에 버튼을 하나 더 추가한 후 이전에 추가했던 버튼 및 가이드라인과 연결합니다.

 

 

 

[ 도전02. 위, 아래, 중앙의 공간을 차지하는 전형적인 화면 구성하기 ]

=> 화면의 위쪽과 아래쪽에 가로로 긴 모양의 버튼을 배치하고 비어있는 가운데 공간에 또 다른 버튼을 배치하세요

 

1) 제약 레이아웃을 사용해 화면을 구성합니다.

2) 화면의 위쪽에 버튼을 추가하고 가로 방향으로 꽉 차도록 만듭니다.

3) 화면의 아래쪽에 버튼을 추가하고 가로 방향으로 꽉 차도록 만듭니다.

4) 화면의 가운데에 버튼을 추가하고 위쪽 버튼과 아래쪽 버튼 사이의 중앙 공간을 꽉 채우도록 만듭니다.

 

* 팁 : 가운데 버튼의 연결점을 부모 레이아웃이 아닌 위와 아래 버튼에 연결해야 한다.