[Android] LinearLayout 기본부터 다지고 쀼셔버리기

형들 안녕?

오늘은 안드로이드에서 기본적으로 제공하는 레이아웃중에 층층이 쌓을 수 있는 LinearLayout 에 대해 알아보려고 해~

 

UX적으로 겹쳐있는 뷰구조는 좋지 않아서 뷰들을 겹치지 않게 층층이 쌓으려고 한다면 거의 무조건 이 LinearLayout 을 사용해야해.

거의 모든 페이지에 하나씩은 LinearLayout 이 포함되어 있다고 봐도 무관할 정도로 여기저기 많이 쓰이는 레이아웃이야.

 

본론에 들어가기 앞서서 Linear 가 뭔지 알아봐야겠지?

영어를 잘 못하니 이번에도 구글 번역기를 돌려봤어~!

선의, 선으로 된 그리고 (일련의 여러단계가) 직선 모양의 이렇게 되어있네?

여기서 볼드 처리한 부분으로 생각하면 될 것 같아. linear 을 어디서 많이 본 것 같았는데, 선형대수학이 linear algebra 였네.. ㅎ_ㅎ

공대 헛 다녔나봐.

 

이제 공식문서를 보면서 언제 사용하는지 그리고 어느 상황에 많이 사용하는지 코드와 함께 자세히 설명해 줄까 해

 

LinearLayout 을 사용할 때 중요한 부분이 있어!

그것은 반드시 android:layout_orientation="~~~" 을 설정해 줘야 하는거야.

orientation 은 진로방향이라는 뜻 인데 VERTICAL, HORIZONTAL 이렇게 두가지를 설정해 줄 수 있어.

 

• VERTICAL -> 세로
• HORIZONTAL -> 가로

어느것 하나 상관없이 많이 사용되니 사용하면서 감을 익히는걸 추천할게.

다 아는걸 왜 이렇게 장황하게 설명하나 할 수 있지만... 내가 손에 익기 전까지 좀 헷갈려 했었거든.

 

그럼 이제 공식문서를 봐보도록 할까?

 

 

다행히도 별로 길지는 않네. 헤헤

사실 내용은 별거 없는 것 같아. 뭐 orientation 관련해서 horizontal 은 하나의 행, vertical 은 하나의 열이라고 나와있네.

그리고 위에서 보면 LinearLayout 에서 중요한 attribute 들을 확인할 수 있는데

android:orientation, android:gravity, android:layout_weight 이렇게 3가지가 나와있는거 다들 확인했지?

그러면 지금부터 코드와 함께 각 요소들을 확인해 볼까 해~

 

Orientation

LinearLayout에 빨간색, 보라색, 남색, 하늘색 4가지 뷰를 추가해 줬어. 그리고 LinearLayout 에 android:orientation="vertical" 를 넣어주니 아래 왼쪽 이미치같이 세로로 쭉 늘어져서 뙇 나온거 있지? 😊 생각보다 잘되니깐 기분이 좋네~

여기서 orientation 을 horizontal 로 바꿔주면 오른쪽 이미지처럼 가로로 쭉 늘어지는 것을 확인할 수 있어 ㅎ_ㅎ

 

Gravity

이제 gravity 를 확인해 봐야 하는데, 위에 공식문서 설명에 따르면 LinearLayout 에 gravity 를 설정해줘서 아래 자식뷰들이 해당 gravity 를 따라가게끔 만들어 줄 수 있다고 나와있네~ 바로 확인해 보도록 하자.

 

먼저 LinearLayout 의 height 를 200dp 로 설정해주면 아래 첫번째 이미지의 하늘색 선 테두리 만큼 LinearLayout 이 잡히게 된 걸 확인할 수 있을거야. 여기에 각각 gravity 를 설정해 주도록 할게.

 

아우 하나하나 확인하려니 약간 빡세네~ 하지만 우리 형들을 위해서라면 이 정도는 뭐 간단하징!! 내 맘 알징~~?

topstart / topcenter_horizontal / topend

center_verticalstart / center_verticalcenter_horizontal / center_verticalend

bottomstart / bottomcenter_horizontal / bottomend

 

Weight

이제 LinearLayout 에서 가장 중요하다고 생각하는 weight 에 대해서 얘기해 보고자 해.

weight 를 이용하면 각 자식들에게 LinearLayout 전체 에서 얼마만큼 차지할 건지 정할 수 있어.

음... 좀 풀어서 얘기하자면 LinearLayout 의 orientation 이 horizontal 이라면 자식 뷰들이 가로로 얼마만큼 차지하게 만들건지

orientation 이 vertical 이라면 자식 뷰들이 세로로 얼마만큼 차지하게 만들건지

정할 수 있다는 거야.

내가 공대생이라 설명하기 좀 어려운데 아래 코드랑 설명을 보면 이해하기 쉬울거야~

 

먼저 width를 match_parent, height는 wrap_content 로 한 뒤에, orientation 을 horizontal 로 설정하게 되면 첫번째 이미지 같이 LinearLayout 의 크기와 자식뷰들의 크기를 확인할 수 있을거야. :)

첫번째 뷰에다가 android:layout_weight="1" 를 추가해주면 아래같이 나오는 것을 확인할 수 있어~

이때 주의해야 될 점이 width 를 0dp 로 만들어줘야 된다는 고얌~

그럼 나머지 뷰들에도 위와 같이 설정해줘 볼까?

오우~ 스크린 사이즈의 딱 1:1:1:1 의 비율로 잘 들어가 있는 걸 확인 할 수 있지?

마지막 하늘색의 weight 만 10으로 만들어줘 볼까?

그러면 1:1:1:10 으로 뷰가 그려지는 걸 확인할 수 있을거야.

 

여기까지 LinearLayout 에 대해서 알아 봤어. 

다들 여기까지 긴글 읽어주느라 대단히 고맙다고 인사하고 싶네~ 고마우이~!!

날씨가 많이 추워졌는데, 그럼 다음 포스팅까지 감기 조심하구 잘 지내~