안드로이드 RelativeLayout(상대적 레이아웃)에 대하여 알아보자 -- 레이아웃 세번째

안녕하세요!! 오랜만에 찾아온 세번째 시간이네요~~ 저번시간에 배운  LinearLayout(선형 레이아웃)에 이어서 오늘 알아볼것은 무엇이냐

RelativeLayout(상대적 레이아웃) 입니다. 

RelativeLayout(상대적 레이아웃)이란 말그대로 상대적으로 배치를 할 수 있다는 얘기인데요 기본 부모뷰를 기준으로 상대적으로

위, 아래, 옆으로 배치를 한다는 겁니다. 자 그럼 실제로 살펴보겠습니다.

 

새로운 프로젝트를 생성하고 activity_main.xml을 선택한다음 화면 밑에 Text를 선택합니다. 이상태에서 아래 그림에서 빨간 네모박스 부분을

설명처럼 RelativeLayout으로 바꿔주고 밑에 TextView부분은 지워줍니다.

 

 

그럼 아래 그림과 같이 되셨겠죠~~

이상태에서 다시 하단쪽의 Design탭을 선택 후 버튼을 3개 정도만 추가해 봅시다!!

 

 

다들 버튼 3개를 추가하셨나요?? 앞에서도 얘기했듯이 버튼을 선택 후 드래그해서 Component Tree 쪽으로 끌어다 놓으셔도 되고요

오른쪽의 화면에 바로 끌어다 놓으셔도 됩니다.  자~ 여기까지 되셨다면 이제는 RelativeLayout의 속성을 알아보도록 하겠습니다.

 

 

그럼 다시 하단의 Text탭을 눌러서 내용들을 살펴 볼까요~~ 버튼 3개가 보이시죠!! 근데 빨간박스를 쳐놓은 곳처럼 보이시는 분들도 계시고

박스 아래처럼 길게 나오시는 분들도 계실꺼에요!!  위에서 버튼을 만드실때 왼쪽 Component Tree 쪽으로 끌어다 만드신 분들은 박스처럼

기본적인 소스만 보이실꺼고요 오른쪽 화면으로 끌어다 놓으신 분들은 박스 밑에처럼 내용들이 많으실 겁니다.  오늘 우리가 알아볼 부분이

박스 밑에 추가된 여러종류들의 속성입니다.  그럼  기본적으로 버튼3개를 전부 "빨간박스의 내용처럼 간단하게 만들어 주시고 시작해봅시다

 

 

속성을 살펴볼께요!!

layout_alignParentLeft       --  부모영역 내에서 좌측에 배치

layout_centerHorizontal     --  부모영역 내에서 수평 중앙에 배치

layout_alignParentRignt     --  부모영역 내에서 우측에 배치

layout_alignParentTop       --  부모영역 내에서 상단에 배치

layout_centerVertical         --  부모영역 내에서 수직 중앙에 배치

layout_alignParentBottom   --  부모영역 내에서 하단에 배치

layout_centerInParent        --  부모영역 내에서 정중앙에 배치

 

자그럼 버튼 3개를 좌측, 중앙, 우측 3개로 적용을 해볼까요~~

버튼안에 하단 그림처럼 한줄을 추가해 주시면 됩니다.

 

 

 

 

버튼이 좌측과 중앙과 우측으로 정렬된게 보이시죠~~ 위의 속성들을 버튼안에 추가해서 중앙의 좌측이나 하단의 중앙이나 어떤 쪽이던

응용해서 바꿀 수 있으니 한번씩 해보시길 바랍니다.

 

 

이번에는 버튼들끼리의 관계배치를 한번 해볼께요!! 다른말로 설명하자면 위에서는 부모뷰를 기준으로 했다면 이번엔 자식뷰 간의 관계를

보는겁니다.

버튼들의 속성을 보시면 버튼들마다 android:id="@+id/button" 이런 id값이 존재하는데요 id값이란 버튼의 이름이라고 생각하시면

편하실것 같네요!! 밖으로 보여지는 이름이 아니라 프로그램 안에서만 쓰이는 이름이라고 생각하세요!!

 

자식뷰 간의 관계를 나타낼때는 id값이 필요합니다. 살펴보시죠!!

 

layout_above = 기준뷰 id 

ex) layout_above = "@+id/button" 이런식으로 씁니다.

 

layout_above         = 기준뷰 id      --  기준이되는 뷰(여기서는 버튼)의 위쪽을 기준선으로 잡아서 그 위쪽에 배치

 

이런식으로 버튼이 위치하게 되는겁니다. 아래 내용들은 사진 생략할께요~~ ㅎㅎ 너무 많아서요!!

 

 

layout_alignTop     = 기준뷰 id       -- 기준이되는 뷰(여기서는 버튼)의 위쪽을 기준선으로 잡아서 그 아래쪽에 배치

layout_alignBottom = 기준뷰 id      -- 기준이되는 뷰(여기서는 버튼)의 아래쪽을 기준선으로 잡아서 그 위쪽에 배치

layout_below         = 기준뷰 id      -- 기준이되는 뷰(여기서는 버튼)의 아래쪽을 기준선으로 잡아서 그 아래쪽에 배치

layout_toLeftOf      = 기준뷰 id      -- 기준이되는 뷰(여기서는 버튼)의 왼쪽을 기준선으로 잡아서 그 왼쪽에 배치

layout_alignLeft      = 기준뷰 id      -- 기준이되는 뷰(여기서는 버튼)의 왼쪽을 기준선으로 잡아서 그 오른쪽에 배치

layout_toRightOf     = 기준뷰 id      -- 기준이되는 뷰(여기서는 버튼)의 오른쪽을 기준선으로 잡아서 그 오른쪽에 배치

layout_alignRight     = 기준뷰 id      -- 기준이되는 뷰(여기서는 버튼)의 오른쪽을 기준선으로 잡아서 그 왼쪽에 배치

 

자그럼 막지막으로 버튼들에 적용을 한번 시켜보시죠

 

 

이렇게 나타나는게 보이실 겁니다.

아래화면에서 가장 왼쪽에 보이는 버튼을 기준으로 두번째 버튼이 아래쪽으로 내려간거구요 두번째 버튼을 기준으로 왼쪽을 기준선으로해서

오른쪽으로 길게 나타나져 있는겁니다. 여러가지 속성들을 적용해 보시면 이해하기가 더 쉬우실 겁니다.

 

 

휴~~ 이렇게 해서 RelativeLayout에 대해서 알아 보았는데요!! 어떠셨나요?? 궁금증이 좀 풀리셨나요?? 아님 더 복잡해 지셨나요?? ㅎㅎㅎ

있는힘껏 설명해 드렸는데 많이 부족하실 거라는걸 잘 압니다.  궁금하신점 있으시면 댓글 달아주세요!! 성심성의껏 설명해 드리겠습니다.

그럼 남은 하루도 홧팅하시구요!!  다음에는 다른 내용으로 찾아오겠습니다. 

허접한 글 읽으시느라 수고 많으셨습니다.  감사합니다.!!!