[Android/Kotlin/Tip] Layout Line divider (dotted, vertical)

 

 

1. 설명

 

결과

 

이번 글에서는 Layout Divider 레이아웃 구분선을 만드는 방법들에 관하여 기술한다.

 

Divider을 사용하면 직관적으로 레이아웃을 구분하여 볼 수 있도록 할 수 있으며, 디자인적인 요소로도 활용이 가능하다.

 

 

 

---

 

 

activity_main.xml

 

● Num 1

 

가로 화면을 가득 채우는 가장 기본적으로 사용할 수 있는 구분선(Divider)이다. 

 

View 오브젝트를 사용하여 지정하고자 하는 두께만큼 높이를 지정한 후 Background로 원하는 선의 Color를 줌으로써 원하는 두께와 Color를 갖는 Divider을 만들어 낼 수 있다. 

 

 

● Num 2

 

1번에서 구현하였던 Divider과 유사하다.

 

다만 길이와 Margin 값을 조절함으로써 텍스트 길이만큼의 Divider의 길이를 조절하였고 이처럼 다양하게 활용하면 원하는 두께나 길이, Color를 갖는 Divider을 만들 수 있다.

 

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    tools:context=".MainActivity"
    android:id="@+id/linearLayout">

    <!-- Num 1 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="Text 01"
        android:textSize="22sp"
        android:textStyle="bold" />
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/black"
        android:layout_marginBottom="20dp" />

    <!-- Num 2 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="Text 02"
        android:textSize="22sp"
        android:textStyle="bold" />
    <View
        android:layout_width="80dp"
        android:layout_height="1dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="50dp"
        android:background="@color/black"
        android:layout_marginBottom="20dp" />

    <!-- Num 3 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="Text 03"
        android:textSize="22sp"
        android:textStyle="bold" />
    <View
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="20dp"
        android:background="@drawable/line_dotted"
        android:layout_marginBottom="20dp" />

    <!-- Num 4 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:gravity="center">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Text 04"
            android:textSize="22sp"
            android:textStyle="bold" />

        <View
            android:layout_width="2dp"
            android:layout_height="match_parent"
            android:layout_marginHorizontal="60dp"
            android:layout_marginVertical="50dp"
            android:background="@drawable/line_dotted_vertical"
            android:layerType="software"
             />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Text 04"
            android:textSize="22sp"
            android:textStyle="bold" />

    </LinearLayout>

</LinearLayout>

 

 

● Num 3

 

Dotted 모양 즉, 점선형의 Divider이며 다른 속성들은 위에서 보았던 것과 동일하며 단지 Background 값으로 따로 정의한 shape로 주었다.

 

line_dotted.xml

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="line" xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:color="#717FFA"
        android:width="3dp"
        android:dashWidth="3dp"
        android:dashGap="3dp" />
</shape>

 

정의한 shape 파일을 보면 'shape=line'으로 선 모양이며 dashWidth와 dashGap 값을 변경함으로써 점선형의 모양을 나타내도록 된다.

 

 

 

 

 

● Num 4

 

Dotted 모양이며 세로형의 Divider을 나타낸다. 여기서도 Background로 정의한 shape 파일을 주었으며 다만 3번과 다르게 'shape=rectangle'을 사용하였다.

 

 

모양을 사각형으로 지정한 이유는 line을 사용하면 가로의 선이 되어버려 세로의 Divider의 적용하여도 가로의 선이므로 보이지 않게 된다.

 

또한, rotate를 사용하여 가로의 선을 회전시켜 세로의 선으로 만들었다 하여도 이는 가로였던 선을 회전시킨 것이므로 결국 선의 길이만큼 가로의 길이를 해당 View의 주어야만 하고 그만큼 Divider 좌우 방향으로 불필요한 공백이 발생하게 된다.

 

 

따라서 이 같은 문제를 해결하기 위해서 약간의 꼼수를 사용한 걸로 보면 된다.

 

Dotted 형의 세로 구분 선처럼 보이지만 사실은 아주 짧은 가로길이를 갖는 사각형의 Shape를 Background로 줌으로써 불필요한 공백 없이 Dotted 형의 세로 구분 선처럼 보이게 만든 것이다.

 

 

line_dotted_vertical.xml

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:color="#f00"
        android:width="1dp"
        android:dashWidth="3dp"
        android:dashGap="3dp" />
</shape>