공통 속성을 설정해주는 style

✨ 오늘 공부한 것

- 알고리즘 n^2 배열 자르기 풀이
- 앱개발 입문 강의 3~4주차 

style

같은 모양의 텍스트뷰를 여러 개 배치하고 싶을 때, 나는 여태 슈퍼 복붙을 해왔다. 그러나 style을 사용하면 공통된 속성들을 묶어서 편리하게 뷰나 창의 모양을 지정할 수 있다고 한다!

style로는 크기나 패딩, 폰트 색상, 폰트 크기 등의 속성들을 지정할 수 있고, 레이아웃 XML과 별개인 XML 리소스에 정의된다.

공통된 속성들을 묶는 다는 점에서 CSS의 class가 생각난다. 실제로 사용하는 방식도 비슷하다.

styles.xml

원래 이전에는 res/values/styles.xml에 theme이 작성되어 있어 기본으로 파일이 생성되었었지만, 지금은 themes.xml에 따로 작성되어 있어 따로 파일을 만들어줘야 한다. 파일의 기본 형태는 다음과 같다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style
        name="style_name"
        parent="@[package:]style/style_to_inherit">
        <item
            name="[package:]style_property_name"
            >style_value</item>
    </style>
</resources>

resources 태그 내부에 만들고 싶은 style들을 작성해나가면 된다.

스타일 만들어보기

우선 내가 만들어 볼 스타일은 다음과 같다.

<Button
    android:id="@+id/btn_exit"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="50dp"
    android:paddingTop="8dp"
    android:paddingBottom="8dp"
    android:text="종료"
    android:textSize="20sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintVertical_bias="0" />

제약 조건들은 버튼마다 다를 수 있으니, 버튼의 크기와 마진, 패딩 값 같은 고정적인 값들만 스타일로 만들고자 했다.

<style name="PrimaryButton" parent="@android:style/TextAppearance.Medium">
  <item name="android:layout_width">match_parent</item>
  <item name="android:layout_height">wrap_content</item>
  <item name="android:layout_marginTop">50dp</item>
  <item name="android:paddingTop">8dp</item>
  <item name="android:paddingBottom">8dp</item>
  <item name="android:textColor">#ffffff</item>
  <item name="android:textSize">20sp</item>
</style>

위와 같이 공통된 속성들을 정의해주었다. 이 스타일을 버튼에 적용한다면 레이아웃 XML 파일이 조금 더 간단해지지 않을까!

<Button
    android:id="@+id/btn_exit"
    style="@style/PrimaryButton"
    android:text="종료"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />

오.. 이런 기능을 진작 알았더라면.. 아니다. 오늘이라도 안 것에 감사해보자고..