[안드로이드 스튜디오] Ch1. 태그와 Constraint Layout

2019년 8월 14일 (수)

창업의 길로 가기 위한 두번째 걸음, [안드로이드 스튜디오]로 향해보자!

*질적으로 많이 부족한 글입니다. 지적 및 조언 환영합니다.

우선, 본인은 학원에서 'JAVA' 기초 수업을 선수강했다. 안드로이드 스튜디오를 배우기 위해선 피할 수 없는 언어이기 때문이다.

(물론 Kotlin 도 있지만, 대한민국에선 아직 JAVA의 파워가 어마어마 하다고..)

 

각설하고, 학원 이틀차, 현재 까지 뭘 배웠겠냐만은...

내가 이 안드로이드 스튜디오에 대해 느낀 소감은, 코딩 프로그램 보다는 포토샵 또는 영상 프로그램과 더 이미지가 가까웠다는것.

즉, 내가 어떤 메서드나 클래스를 암기를 통해 만들어 내는게 아니라, 기존에 빌트인 되어있는 도구들을 마음껏 사용하는 느낌이 더 강하다.

프로그램 자체도 딱딱한 느낌이 전혀 없으며, 전체적인 이미지 자체가 디자이너를 위한 프로그램이다.

(사실 이클립스만 한달동안 다루다 보니 이런 감정이 더 든것도 같다.)

 

월요일에 다운 받았던 것으로는 [안드로이드 스튜디오, 자바 JRE] 정도 이고

*안드로이드 스튜디오를 다운받으면 JRE는 자동으로 따라오지만 그래도(?) 확실히 하기 위해 다운받는다고 한다.

다음날 추가로 안드로이드 스튜디오 자체에 빌트 되어 있는 tool -> SDK Manager -> Oreo 8.1을 다운받았다.

최신버전이 나와있음에도 불구하고 오레오를 사용하는 이유는 '안정성'이라고 한다.

 

오늘의 내용을 알아가기 전, 기본적인 개념들을 알고 넘어가자. 안드로이드를 구성하는것으로 총 4가지가 있다.

 

1) 뷰 (View): 객체 다음으로 사실상 최상위에 위치, 화면에 보이는 각각의 것들 (컨트롤이나 위젯이라 불리는 구성 요소)

 

2) 뷰 그룹 (View Group): 뷰들이 여러개 포함되어 있는 그룹 + 화면에 보이지 않는 것들까지 포함이 되어 있다. (예: 어플 위치 지정할때, 내맘대로 안되고 보이지 않는 위치 지정)

 

3) 위젯 (Widget): 버튼이나 텍스트 아이콘 같은 뷰중에 일반적으로 컨트롤의 역할을 하고 있는 것들 

 

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

[4.1] Constraint Layout (가장 기본이 되는 (신)레이아웃, 상대적 배치)

[4.2] Relative Layout (가장 기본이 되는 (구)레이아웃, 상대적 배치)

[4.3] Linnear Layout

[4.4] Table Layout

[4.5] Frame Layout

[4.6] Grid Layout (사진, 파일과 같은 것들을 일정한 간격으로 나누기 위한 레이아웃)

 

오늘의 내용은 Android Studio를 켰을때 우선적으로 눈에 보이는 것들을 전반적으로 다루며, 초반에는 Active_Main 이라는 윈도우를 많이 다룬다. 또한 두가지의 기본적이 레이아웃에 대해 알아볼것이다.

 

1. 프로젝트 생성

사진1

프로젝트는 Empty Activity를 이용한다. 이유는 아무래도 기능적인 측면에서 많이 배울 것 이고, 빌트인된 디자인 요소들을 알아보기 위해서 인 것 같다.

 

2. 환경설정

사진2

프로젝트를 만들기 위해선 환경설정이 필수다.

차례대로 프로젝트 이름, 패키지 이름, 저장 장소, 사용 언어, 그리고 API Level이다.

 

3. 첫 화면

사진3

프로젝트 생성후 첫 모습! 아름답다!

왼쪽 윗부분 귀여운 안드로이드 밑을 보면 파일들이 있는데, 저것들 중에서도 java 와 res (resource) 를 중심으로 배운다.

 

4. activity_main의 모습

사진4

MainActivity는 기능을 담당하고 있다. 아마 다음주부터 배우지 않을까 싶다.

activity_main은 디자인을 담당하는데 사진4 왼쪽 맨 밑을 보면 Design과 Text가 나누어져 있는 것을 볼 수 있다.

디자인은 마우스를 이용해서 도구를 선택하고 직접 만드는 곳, 텍스트는 코딩을 통해 디자인을 편집 하는곳

정도라고 생각하면 쉬울것같다. 아무튼 이 둘은 같은 존재다. 즉, 텍스트에서 편집하면 디자인에서 똑같이 편집되는 거다 (vice versa).

 

5. utf-8 과 xml

사진5

가장 처음 프로젝트를 생성 했을 때 나오는 로직 모습.

즉, "hello world"를 만들기 위한 로직.

그런데 xml과 utf-8이라는 녀석들이 가장 상단에 표시 되어있는게 보인다. 정체가 뭘까?

우선 xml 은 Extensible Markup Language의 축약어로, 직역하자면 "확장가능한 표시 언어" 라는 뜻이 된다.

그런데 이 뜻을 알기 위해선 '태그'가 뭔지를 알아야 한다.

나는 인스타충으로써 '태그'라는 말을 처음 들었을 때 크게 동요하지 않았다. 그렇다. 태그란 말 그대로 '표시'다.

사진5에 나와있는 노란색 글자들이 보이는가? 바로 태그다. 즉, <태그명 /> 이런식으로 내가 작성하고자 하는 로직 내용을 표시해주는 언어가 바로 xml 인것. (*태그명=클래스명 이라고 한다.)

또한 utf-8이란 '유니코드'로 전 세계의 모든 문자를 처리할수있도록 정해 놓은 코드다.

이건 그리 어렵지 않으니 여기서 넘어가자!

 

6. Constraint Layout (제약적 레이아웃)

사진5

위의 사진과 동일하다. Constraint Layout이란, 뷰(view)들의 위치를 상대적으로 위치 할 수 있도록 하는 레이아웃이다. 즉, 내가 스마트폰 또는 타블렛을 세로로 놓든 가로로 놓든 뷰들의 위치는 그냥 알아서 상대적으로 지정이 된다는 것.

(정말 좋은 레이아웃이구나!라고 생각했다.) 

또한, Constraint Layout은 본래 아이폰 ios에서 쓰던 레이아웃이라고 한다. 그런데 그 편리성과 효율성의 우수함을 안드로이드쪽에서 인정하고 비교적 최근 가져왔다고 한다.

(그 전까지는 Relative Layout을 사용했다고 한다.)

그런데 아무래도 이 레이아웃이 안드로이드 자체 빌트인된 레이아웃이 아니다 보니, 이녀석 하나 부르는데 <android속 support, 그리고 그 속의 constraint, 마지막으로 그 속의 레이아웃/> 방식으로 꺼낼 수 밖에 없는것이다.

이게 무슨말이냐면,

사진6

사진7

사진6의 constraint layout에 비교했을때, 사진7에서 보이는 저 Linear 레이아웃 클래스명의 간결함이 보이는가? 저런 차이인것이다.

 

자, 다음으로는 이 Constraint Layout이 반드시 갖추어야할 요소는 무엇이 있는지 알아볼 것 이다.

그 것은 바로 '좌표 지정' 이다.

사진8

'좌표 지정'이라고 해서 뭐 대단한게 절대 아니라, 내가 입력한 뷰를 어디에 지정시킬건지 정해야 한다는 소리다.

이 둘이 바로 좌표를 지정할때 필요한 가장 기본적인 것으로, 저 로직속 android는 이 프로그램내의  것을 이용한다는 의미이고, 그속의(:) 레이아웃의 넓의 (width) 와 높이(height)를 어떻게 지정하겠냐는 말이다. 그리고 이 기준은 2가지로 설정될수 있다.

*아직도 헷갈리긴 하지만, 레이아웃과 내용물을 헷갈려하면 안되겠다.

내용물 -> 내용물+레이아웃

          -> 레이아웃

내용물 -> 내용물

 

(1) wrap_content: 내용물의 크기에 따라 뷰의 넓이/높이를 상대적으로 결정.

사진9가 바로 그 예시다. 보이지는 않지만 파란색 레이아웃이 저 "hello world"에 맞춰 감싸고 있다.

 

사진9

(2) match-parent: 남은 공간을 그냥 채우는 설정. 즉, 상위 태그(parent)에 맞춰 넓이/높이 지정. 

사진9와 비교했을때, 사진10의 경우, 텍스트가 왼쪽 위 부터 채워지는 것을 볼 수 있다.

보이진않지만, 저 상위 태그(parent) 모서리가 레이아웃의 시작이 된것이다.

 

사진10

 

다음으로는 기준점 정하기다.

기준점으로는 [위,아래,오른쪽,왼쪽]이 있다.

 

사진11

 

사진 11에서 보이는데로 총4가지다. 하지만 주의할 점은, left와 right는 Start와 End로도 표현될 수 있다는것.

그리고 지금 이 로직을 디자인 측면에서 바라보면 레이아웃은 이렇게 생겼다.

 

사진12

즉, 쓰여진 로직 그대로, 네개의 모든 상대적 기준점을 상위 태그(parent) 로 한것이다.