이전에 작성한 strings.xml, colors.xml 파일 참조과 비슷한 맥락의 포스팅이다.
[Android] strings.xml / colors.xml / string · color 파일 참조
아직도 위와 같이 텍스트를 작성하고 있는 사람?? 노란색 경고창은 가볍게 생각하고 넘어가는 사람도 많다. 하지만 가벼운 경고라도 다 이유가 있으니 표시해 주는 게 아닐까? 경고 내용을 살펴
oscarstory.tistory.com
이번 포스팅에서는 style.xml 파일을 활용하여 레이아웃 xml 파일을 다뤄보겠다.
style.xml 활용하기
간단한 예시로, 회원가입 화면 레이아웃을 짠다고 생각해보자.
동일한 형식을 가진 TextView, EditText가 반복되는 구조다.
위와 같은 형식의 UI라고 가정하면, 대충 다음과 같은 xml 파일을 작성할 것이다.
<LinearLayout
...
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="아이디"
android:textStyle="bold"
android:textColor="@color/black"
android:textSize="20dp"
android:layout_marginStart="20dp"
/>
<EditText
android:id="@+id/id_edittext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20dp"
android:textColor="@color/black"
android:layout_marginHorizontal="20dp"
android:layout_marginBottom="10dp"
/>
...(생략)
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="휴대폰 번호"
android:textStyle="bold"
android:textColor="@color/black"
android:textSize="20dp"
android:layout_marginStart="20dp"
/>
<EditText
android:id="@+id/phone_edittext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20dp"
android:textColor="@color/black"
android:layout_marginHorizontal="20dp"
android:layout_marginBottom="10dp"
/>
</LinearLayout>
위 xml 파일을 조금만 훑어보아도, 정말 비효율적이라고 느껴진다.
동일한 형식의 View에 일부 입력값만 다른 속성들이 반복되는 것이다.
예시에서는 5개의 입력 항목만이 세팅되어 있지만, 항목이 더 많아지면 그만큼 더 많이 반복된다.
결국 의미없이 줄 수만 늘어나게 되고, 유지보수함에 어려움이 있다.
✅ 이러한 상황에서 우리는 style.xml 파일로 View에 대한 속성을 별도로 관리할 수 있다.
style.xml
<resources>
<style name="register_textview">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">@color/black</item>
<item name="android:textSize">20dp</item>
<item name="android:textStyle">bold</item>
<item name="android:layout_marginStart">20dp</item>
</style>
<style name="register_edittext">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">@color/black</item>
<item name="android:textSize">20dp</item>
<item name="android:layout_marginHorizontal">20dp</item>
<item name="android:layout_marginBottom">10dp</item>
</style>
</resources>
layout.xml
<LinearLayout
...
>
<TextView
style="@style/register_textview"
android:text="아이디"
/>
<EditText
style="@style/register_edittext"
android:id="@+id/id_edittext"
/>
...(생략)
<TextView
style="@style/register_textview"
android:text="휴대폰 번호"
/>
<EditText
style="@style/register_edittext"
android:id="@+id/phone_edittext"
/>
</LinearLayout>
style.xml 파일에 View에 대한 반복되는 속성 값을 모두 지정해주고,
layout.xml 파일에서는 style.xml 파일을 참조하는 형식이다.
물론, id, text 등 View마다 달라야 하는 속성은 별도 기입한다.
결과
✅ 코드 줄 수 간소화
style.xml 파일을 활용했을 때와 안 했을 때를 비교하자면,
파일의 줄 수가 약 110줄 → 60줄로 간소화되었다.
레이아웃 파일의 코드 줄 수가 줄어들었다는 것은,
유지보수 환경에서 의미없이 스크롤해가며 머릿 속에 화면 구조를 때려넣는 시간을 단축시켜준다는 의미다.
그렇기에 반복되는 구조를 style.xml 파일 속 태그로 정리해가며 레이아웃을 정의하게 되면,
해당 레이아웃 파일을 처음 보는 사람에게도 레이아웃이 한 눈에 들어오게끔 배려할 수 있게 된다.
✅ 유지보수 편의성 ↑
어떤 View의 속성 값을 변경해야 하는 상황을 맞이했을 때 유지보수가 편리해진다.
여러 View를 건드릴 필요 없이 style.xml 파일 내 해당 태그의 속성 값만 수정해주면
해당하는 모든 View에 적용되기 때문이다.
parent 속성 사용하기
위에서 설명한 style.xml 파일을 활용함에 있어서, parent 속성을 소개한다.
<style name="register_edittext_1">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">@color/black</item>
<item name="android:textSize">20dp</item>
<item name="android:layout_marginHorizontal">20dp</item>
<item name="android:layout_marginBottom">10dp</item>
</style>
<style name="register_edittext_2">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">@color/black</item>
<item name="android:textSize">20dp</item>
<item name="android:layout_marginHorizontal">20dp</item>
<item name="android:layout_marginBottom">10dp</item>
<item name="android:visibility">gone</item> // 여기만 추가된 상황!
</style>
위와 같이 style.xml 파일 내에서도 비슷한 형식의 속성들이 반복될 상황이 있다.
나머지는 모두 동일하고, visibility라는 1가지 속성만 추가된 style이다.
이러한 상황에서는 parent 속성을 사용해 다음과 같이 작성해줄 수 있다.
<style name="register_edittext_1">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">@color/black</item>
<item name="android:textSize">20dp</item>
<item name="android:layout_marginHorizontal">20dp</item>
<item name="android:layout_marginBottom">10dp</item>
</style>
<style name="register_edittext_2" parent="register_edittext_1">
<item name="android:visibility">gone</item>
</style>
register_edittext_1의 모든 요소를 포함한 상태로
새로 추가할 속성만 정의할 수 있는 방법이다.
개발자들은 재사용성이라는 요소를 정말 중요하게 생각한다.
그 재사용이라는 기준이 Java/Kotlin 파일을 넘어서 xml 파일까지 적용될 수 있다는 것이다.
어느덧 본인도 보일러 플레이트 코드를 눈뜨고 못보는 몸이 되어버렸다.
style.xml 파일을 자주 활용하여 깔끔한 layout.xml 파일로 관리하는 습관을 만들자..!
