[안드로이드 스튜디오] Ch2. 컬러 지정, 그리고 Linear과 Relative Layout

2019년 8월 15일 (목)

 

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

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

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

 

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

 

*이 글에선 "안드로이드 스튜디오"를 줄여서 "안스" 라고 표현합니다. 참고 바랍니다.

 

이번 글에서는 디자인 파트의 컬러에 대해 간단하게 배우고, 사용이 '덜' 되는 레이아웃들에 대해 알아본다.

---

<차례>

1. RGB와 HEX

2. LinearLayout

3. RelativeLayout

---

 

---

 

1. RGB와 HEX

 레이아웃으로 들어가기 앞서 배경 또는 내용물의 색 설정을 하는 방법에 대해 간단히 알아보고 가겠다.

 RGB 는 Red, Green, Blue를 뜻하며 빛의 삼원색을 의미한다. 그리고 이 세가지 색을 조합하면 새로운 색을 만들 수 있게 된다.

 

 

컴퓨터는 이러한 시스템을 숫자로 받아들이는데, 예를 들어 검은색은 [255,255,255] 하얀색은 [0.0.0] 으로 표현될 수 있다.

 

 

HEX는 Hexadecimal을 뜻하며 16진법을 의미한다. 그리고 이 시스템을 이용해서 색의 좌표를 정해 표현하는 방식이다.

이 HEX또한 컴퓨터는 숫자로 받아들이는데, 예를 들어 검은색은 [#000000] 하얀색은 [#ffffff] 이다.

 

그런데 이걸 언제 다 외우고 있단 말인가?

그래서 우리의 안스는 이러한 수고를 덜어주기 위해 색 지정 서비스를 제공하는데,

 

 

필자가 작성한 HEX 방식의 컬러 호출 로직이다. 즉, #fff000 을 이용해서 노란색을 호출했다.

그런데 왼쪽 13번 옆을 보면 노란색의 박스가 보인다. 바로 저 녀석이 안스가 제공하는 컬러 지정 서비스이다.

저 박스를 클릭하게 되면

 

 

이렇게 컬러 지정 서비스가 제공된다. 또한 가운데를 잘 살펴보면 사용자 편의를 위해 RGB방식과 HEX방식 또한 제공하는 걸 알 수 있다.

안스의 친절함에 무릎을 치고 간다.

자, 이제 본격적인 레이아웃에 대해 알아보자.

 

---

 

2. LinearLayout

 LinearLayout, 말 그대로 선형 레이아웃이고, 말 그대로 뷰들의 레이아웃(틀) 자체를 '일'자로 배치 한다는 말이다.

그 방식은 또 두가지로 나뉘는데 '가로'와 '세로' 이다. 참고로 설정을 잡기전엔 디폴트 값이 수평이 되어 가로로 기본 설정된다.

이 선형 레이아웃은 앞서 배운 ConstraintLayout과 달리 한쪽 방향으로 뷰를 추가하여 화면을 구성하게 된다.

알아두어야할 로직은 총 7가지로 꽤 복잡해 보이지만 그리 복잡한 내용은 아니다.

 

(2.1) LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

-> LinearLayout을 사용하기 위해선 호출이 먼저다.

 

(2.2) android:orientation="vertical"/"horizontal"

-> 그 호출한 선형 레이아웃의 방향을 설정하자. 가로와 세로 둘 중 하나를 선택할수있다.

 

(2.3) android:layout_gravity="start"/"center"/"end"

-> 레이아웃(틀)의 위치를 설정해 주는데, 보통 전체 레이아웃 보다는 특정 클래스의 레이아웃에 이용된다.

지정 위치는 (2.2)에서 설명한 orientation이 무엇이냐에 따라 달라지는데, 밑의 예시를 보자.

지금 이 사진은 선형 레이아웃을 가로로 해두고 Text View를 3개 추가 시켰을때의 모습이다.

이 가로 선형 레이아웃에 추가된 뷰들은 화면의 왼쪽 가장 끝부터 채워지게 되는데, 위에서 언급했듯이 그렇게 설정이 되어있기 때문이다.

이렇게 배치되어있는 뷰들은, 딱 봐도 뭔가 제한적으로 보인다. 그렇다. 위, 가운데, 아래로 밖에는 움직일 수 없는 것이다.

반대로 선형 레이아웃의 orientation이 세로로 되어있다면 뷰들은 세로로 쌓이고 움직일 수 있는 방향 역시 제한적으로 왼쪽, 가운데, 그리고 오른쪽으로 밖에 움질일 수 없다.

 

(2.4) android:gravity="start"/"center"/"end"

-> 위 (2.3)에서 'layout_'이 빠진 모습인데, 어려울 건 없다. 그냥 말 그대로 레이아웃이 아닌 그속의 내용물을 말한다.

헷갈릴수 있기 때문에 밑의 사진을 참고하자.

차이를 알아 보기 위해 2번째 텍스트뷰 레이아웃의 넓이를 wrap_content에서 match_parent로 바꾸었다.

그리고 layout_gravity가 아닌 그냥 gravity의 위치를 "center"로 설정한 모습이다. 내용물이 가운데로 옮겨진 것을 볼 수 있다.

 

(2.5) android:layout_margin="value dp"

-> margin 이란 직역하자면 공백을 의미 하는데, 안스에선 뷰 자체의 여백을 의미한다.

밑의 예시를 보면 이해하기 쉽다.

두번째 텍스트 뷰의 margin에 100dp를 입력한 모습이다. 보이는대로 vertical orientation임에도 불구하고 사방에 여백이 생기는 것을 볼 수 있다. (...이 기능이 과연 언제 필요할까 싶다.)

 

(2.6) android:paddingEnd="value dp"

-> (2.5)와 크게 다를 건 없다. 이번엔 레이아웃(틀)이 아니라 내용물이라고 생각하면 쉽다. 이번에도 예시를 통해 알아보자.

이번에는 내용물의 margin에 100dp를 입력한 모습이다. 위와 동일한 dp를 넣음으로써 둘의 차이를 쉽게 확인할 수 있다.

 

(2.7) android:layout_weight="value"

-> 마지막으로는 weight다. 무게를 실어준다는 느낌으로, 즉, 빈칸을 채워버리는 로직이다.

이는 (2.3)의 예시에서 나온 사진과 비교를 해보면 그 차이를 알 수 있는데, "1"의 weight를 3번째 텍스트 뷰에 넣은 모습이다. 빈칸이 그 뷰로 채워진것을 볼 수 있다.

 

---

 

3. RelativeLayout

 위 사진은 Relative Layout의 특징을 정확히 표현한 사진이다. 

 

 RelativeLayout(RL)은 말 그대로 상대적 레이아웃이다. 위젯들이 서로간의 상대적인 배치 관계에 따라 화면에 표시될 위치가 결정되도록 만들어주는 레이아웃이다. 규칙기반 모델이라고도 불리며, 안스가 ios의 ConstraintLayout(CL)을 도입하기 전에 사용했던 레이아웃이다. 

 

CL과의 큰 차이점이라면, CL은 연결선을 이용해서 상대적 위치를 지정하는데 반해 RL은 속성을 통해 위치를 지정한다.

좀 더 쉽게 말하자면, 레이아웃의 여백을 통해 위치를 지정한다는 것 이다. 

이번에 숙지해야할 로직은 총 5가지다.

 

(3.1) <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"/>

-> RelativeLayout을 사용하기 위해선 호출이 먼저다.

 

(3.2) android:id="@+id/textName"

-> RL같은 경우 기준을 뷰로 잡기 때문에 각각의 뷰에 고유의 아이디를 생성해주어야만 한다. 자바로 생각하면 멤버변수 설정과 비슷하다고 생각한다.

 

(3.3) android:layout_alignParent[부모뷰의 위치] = "true"

-> 부모 뷰, 즉 화면 전체를 타겟으로 위치를 지정하는 옵션이다. 

예시로 밑의 사진을 참고하자.

 

 

각각의 뷰에 (3.2) 로직을 이용해서 위치를 다르게 설정해준 모습이다. 부모뷰를 기준을 했기 때문에 화면 가장자리에 위치가 지정되는 것을 알 수 있다. 그런데 이상(?) 하게도 center는 없더라.

 

(3.4) android:layout_to[Start/End]Of="@id/textName" 

-> 부모 뷰가 아닌 타겟 뷰의 왼쪽 또는 오른쪽에 붙이는 로직이다. 아까 (3.2)에서 설명한 뷰 고유의 아이디 생성이 이를 위해 필요한 것 이다. 

이번엔 파란색 텍스트 뷰의 위치를 (3.3)과 (3.4)를 이용해서 옮겨 보았다.

android:layout_toEndOf="@id/text1" -> text1(노란색 텍스트뷰)을 기준으로 오른쪽에 지정했고

android:layout_alignParentBottom="true" -> 부모뷰를 기준으로 밑에 지정했다.

그랬더니 정확히 파란색 텍스트뷰는 내가 지정한 그 자리 그대로 옮겨 간 것을 볼 수 있다.

 

(3.5) android:layout_above/below="타겟아이디"

-> 타겟 뷰의 위 또는 아래로 붙이는 로직이다.

 

이번엔 기존에 파란색 텍스트 뷰를 기준으로 오른쪽에 위치해 있던 빨간색 텍스트 뷰를 파란색 텍스뷰의 위까지 지정해보았다.

android:layout_toRightOf="@id/text2" -> 파란색 텍스트뷰의 오른쪽 지정
android:layout_above="@id/text2" -> 파란색 텍스트뷰의 위쪽 지정

둘이 합쳐져 오른쪽 사선위에 지정된 것을 볼 수 있다.