LinearLayout

이제 드디어 Kotlin을 사용한 네이티브 개발을 기록하려고 한다. 코틀린으로 안드로이드 네이티브 개발을 한 번 해보고 Swift로도 IOS 네이티브 개발을 진행할 예정이다.
양대 플랫폼 네이티브 개발을 경험해보고 원래 네이티브 학습 목적인 Flutter 플러그인 배포까지 계획하고 있다.

현업에서 Flutter 개발자로 일을 하면서 네이티브 학습의 필요성을 많이 느끼고 있어 한 번 배워보고자 한다.

우선 UI부터 배워보기 위해 먼저 Layout에 대하여 알아보자.

안드로이드에서 UI 컴포넌트를 뷰(View)라고 한다. Flutter에서 Widget이라고 보면 되는데, View를 이루고 있는 ViewGroup이 Layout이다. Flutter에서는 모든게 Widget이기 때문에 차이가 있다.

LinearLayout은 뷰의 배치 구조를 정하는 Layout인데, Flutter의 Column, Row, Wrap 등과 비슷한 느낌인 것 같다.

안드로이드는 UI를 xml로 개발을 하기에 정말 낯설다.. xml 뭔가 불편하고 적응이 안됬는데, 몇 번 하다보니 로직과 UI의 분리가 정말 좋은 점이 있는 것 같다.

xml (LinearLayout)

LinearLayout의 기본 구조이다.

<LinearLayout
  ...>
</LinearLayout>

먼저 살펴보아야할 점이 layout_width, layout_height 속성인데, wrap_content와 match_parent로 설정하거나 직접 숫자형으로 넣어줘도 된다.
wrap_content속성은 하위 뷰의 크기 만큼의 영역을 차지하고 match_parent 속성은 전체 공간을 차지하게 된다.

background 속성은 배경 색상을 지정하면 된다.

LinearLayout은 하위 뷰를 차곡차곡 배치하는 Layout이기에 방향을 설정해 주어야 한다.
뷰의 배치 방향을 다루는 속성이 orientation이라는 속성이다.
디폴트 값은 Horizontal(수평)이고 Vertical(수직) 속성을 주면 수직으로 배치된다.
Column위젯이 Vertical이고 Row위젯이 Horizontal이다.

<LinearLayout
    ...
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/teal_200"
    android:orientation="vertical">

이번엔 정렬을 지정해주는 속성에 대해서 알아보자.

정렬은 Flutter에서 Align 속성으로 지정할 수 있는데, xml에서는 gravity와 layout_gravity 속성을 사용하면 된다.

gravity속성이 2개가 있는데, 차이점에 대해서 먼저 설명하면 부모와 자식 뷰의 정렬 차이라고 보면된다.
2개 속성 모두 정하는 속성 값은 동일하며, 종류가 생각보다 많다..

layout_gravity 속성을 지정할 때 layout_width, layout_height의 값이 match_parent로 되어있으면 당연히 정렬은 작동을 안한다. 뷰 전체를 확장해서 영역을 차지하고 있으니 정렬이 안되는 것이다.

자식 뷰의 속성을 제어하는 gravity도 사용 방법은 동일하다.

<LinearLayout
android:layout_gravity="center"
android:gravity="bottom" >

이번엔 LinearLayout의 속성 중 가장 마음에 드는 기능인 자식 뷰의 비율 배치에 대한 내용이다.
Flutter로 개발하고 운영이 되고 있는 앱을 개발할 때는 모든 디바이스의 사이즈를 고려해야하고 padding, margin이 다르기에 사이즈를 계산하여 비율을 맞춰주는데, xml의 weight 속성은 간편하게 알아서 비율을 조정해준다.
물론 운영되는 앱에서는 이런 속성을 사용하지 않을지 모르겠지만 지금까지는 유용한 기능인 것 같다는 생각이 든다.

layout_weight 속성에 비율을 숫자로 넣어주기만 하면 알아서 영역을 차지시킬 수 있다.

<LinearLayout
			...>
<TextView
	...
    android:layout_weight="1"
    android:text="Tyger Velog" />
<TextView
	...
    android:layout_weight="2"
    android:text="Tyger Velog" />

부모 뷰와 자식 뷰의 여유 공간 및 간격을 정해주는 padding, margin 속성도 있다.

우선 layout_margin은 뷰의 테두리 바깥 쪽으로 여유 공간을 얼마나 띄울 것인지에 대한 속성이고 padding은 뷰 안쪽에 여유 공간을 띄울 경우에 사용된다.

margin, padding 속성 둘 다 관련 속성은 동일하며, 다양한 방향을 지정할 수 있도록 해준다.

<LinearLayout
		android:layout_margin="50dp"
        android:padding="8dp"
		...>			      

<LinearLayout
	android:layout_margin="10dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginBottom="10dp"
    android:layout_marginEnd="10dp"
    android:layout_marginHorizontal="10dp"
    android:layout_marginStart="10dp"
    android:layout_marginTop="10dp"
    android:layout_marginVertical="10dp"
    android:padding="10dp"
    android:paddingBottom="10dp"
    android:paddingEnd="10dp"
    android:paddingHorizontal="10dp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingStart="10dp"
    android:paddingTop="10dp"
    android:paddingVertical="10dp" >

마무리

간단하게 LinearLayout에 대해서 알아보았다. Flutter와 비교했을 때 서로 장단점이 있는데, 개인적으로 네이티브로 UI를 개발하는게 훨씬 편한 것 같다는 느낌을 받았다.
다음에도 다른 Layout 및 View에 대해서 계속해서 글을 작성하겠다.