안드로이드 ConstraintLayout 에 대하여 알아보자 -- 레이아웃 첫번째

오늘은 안드로이드 스튜디오의 기초 레이아웃에 대하여 알아보겠습니다. 

흔히 말하는 레이아웃(layout)은 사용자 인터페이스(UI: User Interface) 라고

하는데요 쉽게 말하면 화면에 보여지는 형식을 정한다고 할 수 있겠네요!! 

 

오늘은 기본 레이아웃인 ConstraintLayout에 대하여 알아보겠습니다.

그럼 안드로이드 스튜디오를 실행시켜서 한번 알아볼까요~~ go~go~go~~~

 

File  -->  new --> New Project 를 누릅니다.

 

 

이렇게 New Project 창이 뜰꺼에요!!

첫번째 Application name 창에 쓰고싶은 이름을 쓰셔도 되고 그냥 넘어가셔도 되요

저는 그냥 패스~~~ ㅎㅎ

밑에 Next 버튼을 누르세요!!

 

 

다음창이에요!!

Phone and Tablet을 선택하시고 Minimum SDK창의 오른쪽끝에 세모를 눌러서

안드로이드 버전을 선택하세요!! 앱이 실행될수 있는 최소 버전을 의미하는 것이기

때문에 버전이 낮을수록 앱개발을 했을때 쓸수 있는 사람이 많아 지겠죠!!

 

Minimum SDK창 밑을 자세히 보시면 97.4% 라고 나와있는게 보이실 겁니다.

버전을 선택할때마다 퍼센트가 달라지는데 그 버전을 사용했을때 안드로이드 기기의

97.4%의 사람들이 사용할 수 있다는 얘기 입니다.

선택을 다 하셨으면 Next 버튼을 누르세요!!

 

 

 

다음화면입니다.

Empty Activity를 선택하고 Next버튼을 누릅니다.

 

 

마지막 설정 화면입니다.

Activity Name창과 Layout Name창 두개가 있습니다.

두개다 원하시는 이름을 넣으셔도 되고요 그냥 기본으로 놔두고 넘어가셔도 됩니다.

저는 그냥 넘어가겠습니다.

Finish 버튼을 누릅니다.

 

 

드디어 안드로이드 스튜디오 작업창이 시작되네요~~ 야~호~~~ ㅎㅎㅎ

화면을 보시면 크게 왼쪽창과 오른쪽창 두개로 나눠져있습니다.

왼쪽은 윈도우 탐색기처럼 폴더나 파일들을 보기쉽게 관리하기 쉽게 해놨고요

오른쪽은 왼쪽에서 파일을 열어서 작업하는 작업창입니다. 참 쉽죠~~~~ ㅎㅎ

 

오른쪽창을 보시면 두개의 탭이 열려있는걸 보실수 있으실꺼에요 바로 위에서

정해주었던 Activity Name창의 이름과  Layout Name창의 이름으로 된 파일입니다.

 

 

여기까지 잘 따라오셨으면 이제부터 레이아웃에 대하여 알아보겠습니다.

위 그림의 오르쪽창의 두개의 파일중에서 Layout Name창을 선택해 보겠습니다.

그러면 선택한 탭 밑으로 Palette라는 창이 보이게됩니다.

Palette창도 조그맣게 두개로 나뉘어 지는데요 왼쪽창의 All, Widgets, Text, Layouts ...

등등 이렇게 보이시죠 여기에서 Layouts을 선택해 봅니다.

 

 

Layouts을 선택하면 오른쪽창에 드디어~~ 드디어~~ 오늘 알아보려고 했던 Layout의

종류들이 나타납니다.  와우~~ 처음으로 블로그 글을 작성 해보는건데 생각보다

손이 많이 가네요~~ ㅋㅋㅋ 시간도 많이 걸리구요!! 여기까지 하는데 한시간이나

걸렸네요! 처음이라 더 그런거겠죠~~ ㅋㅋ 암튼 이제 거의 다왔으니 쫌더 힘을내서

작성을 해보도록 할께요!! 아자~아자~ 화이팅!!

 

 

 

이제는 기본적으로 많이 쓰는 레이아웃에 대해서 알아보도록 합시당.

제일먼저 프로젝트를 생성하면 기본적으로 셋팅되어지는 레이아웃이 ConstraintLayout 입니다.  여기서는 기본적인 형태만 설명하겠습니다.

우선 설명을 위해  버튼을 2개 만들어 볼께요!!

Palette트 왼쪽창에서 All을 선택하면 오른쪽창 두번째줄에 Button이 보일겁니다.

Button을 클릭한 상태로 아래창으로 드래그 합니다.

 

버튼이 두개 만들어 진것이 보이시죠~ 왼쪽 아래 창에 button 과 button2가 만들어

졌습니다. 그런데 오른쪽 화면에는 버튼이 하나밖에 보이지 않습니다. 왜그럴까요??

왼쪽창으로 드래그해서 가져다 놓을때는 위치를 지정해주지 못하기 때문에 기본

위치에 두개가 생겨서 겹쳐져 있어서 하나로 보이는 것이고요  오른쪽 창으로 드래그

할때는 바로 원하는 위치로 가져다 놓을수 있기 때문에 두개가 보이겠지요~~

 

 

그럼 오른쪽 화면에 만들어진 버튼을 클릭해 보세요!! 그럼 아래 사진처럼 버튼 4면에

하얀색 동그라미가 나타나고 동그라미로 마우스를 가져가면 녹색으로 깜빡거리게

됩니다. 깜빡거리는 녹색 동그라미를 클릭하고 드래그하여 맨 오른쪽 끝으로 드래그

합니다. 그럼 버튼이 오른쪽 끝으로 가서 붙을꺼에요~ 버튼의 기준면을 정하는거죠!

 

 

이렇게 오른쪽 끝에 붙어있게 되죠!!  오른쪽 기준으로 정렬이 되었죠!!

 

 

그러면 나머지 방향들로도 다 클릭하여 드래그 합니다. 다시 버튼을 클릭하여 아래쪽

동그라미를 클릭 드래그하여 밑쪽 끝으로 가져가세요!! 그럼 버튼이 밑으로 가서

붙어 있겠죠~~  그 상태에서 또 왼쪽으로 클릭 드래그 하셔서 가져가 보세요~~ 그럼

이번에는 버튼이 하단  중앙에 위치하게 될꺼에요!!  그리고 마지막으로 위쪽으로도 클릭 드래그하여 가져가면 화면 정중앙에 위치하게 됩니다. 이렇게요~~

 

여기서 궁금증 오른쪽으로 붙일때는 끝에가서 붙었는데 왼쪽으로 붙일때는 가운데로

가는지 기준을 왼쪽과 오른쪽을 같이 잡아주기 때문에 공평하게 가운데로 위치하게

되는거지요 ㅎㅎ  이상태까지 끝이 나면 이제 동서남북 4면의 기준이 다 정해졌기

때문에 버튼을 클릭하여 움직여보면 내가 원하는 곳 어느곳이던 가져다 놓을수가

있게 됩니다. 마음에 드는 곳으로 옮겨보세요!!!

 

 

여기에서 주의할 점은 기준을 정해주지 않은 상단에 위치한 버튼도 클릭 드래그 하여 원하는 위치로 가져가면 가져가면 화면에서 옮겨지는것이 보일 것입니다.  하지만

애뮬레이터에서 실행을 시켜보면 버튼은 왼쪽 상단에 그대로 위치하게 됩니다.

버튼을 2개, 3개 만들어서 위치를 맞춰서 가져다 놓았는데 위에서 처럼 4면 기준을

정하지 않고 그냥 가져다 놓고 에뮬레이터를 실행시켰다면 화면에 보여지는건

버튼을 처음 만들었을때처럼 왼쪽상단에 다 겹쳐져서 하나로만 보인다는 겁니다.

 

자 이제 ConstraintLayout이 어떤 레이아웃인지 아시겠나요???

 

화면에 보여지는 형식을 내가 원하는 위치로 마음대로 정해서 쓸 수 있는 레이아웃이 바로 ConstraintLayout 되시겠습니다.  캬~~~ 

 

열심히 설명해 보았는데 저도 배워가는 과정이라서 내용이 틀리거나 잘못됐을수도

있다는 점 알아주시고요 제가 아는 한도에서 열심히 설명해 드리고  저도 다시한번

집고 넘어갈 수 있도록 앞으로도 쭉~~ 열심히 작성해 보도록 하겠습니다. 

부디 조금이라도 처음 시작하시는 분들에게 도움이 되었으면 하는 바램입니다.

부족한 내용 봐주시느라 수고하셨습니다.!!

 

그럼 이번 한주도 다들 화이팅 해보시자구요!!! 홧팅!!