안드로이드 스튜디오 뷰 클래스 레이아웃

이 내용은 안드로이드 스튜디오를 활용한 안드로이드 프로그래밍 책을 기반으로 재구성하였고 이후의 내용도 이와 유사하게 진행될 예정입니다. 더 자세한 내용은 책에 서술되어있으므로 한번 관련 책을 구매를 해서 보는 것도 좋을 거 같습니다.

View클래스는 안드로이드 스튜디오의 모든 위젯의 부모 클래스이고 이 클래스 밑으로 버튼 등 여러 가지 값들을 상속하여 입력되게 됩니다.

주요 속성 값으로는 id, layout_width, layout_height, background, padding, layout_margin, visibility, enabled, clickable, rotation 속성 등이 있습니다.

id속성은 해당 위젯의 아이디를 나타내고 자바로 해당 위젯에 기능을 넣기 위한 접근자의 역할을 담당하게 됩니다. 그러므로 xml코드 상에서는 딱히 크게 바뀌거나 하는 것을 볼 수는 없지만 중요한 역할을 담당하고 있습니다. id속성은 '@+id/' 형식을 사용하고 /다음에 필요한 아이디를 입력하시면 됩니다. 안드로이드 스튜디오 상에서는 보통 id를 치고 엔터 두 번 누르면 바로 저 형식이 입력됩니다.  예를 들면 "@+id/textView1"이라고 지정하게 되면 해당 위젯의 id를 textView1으로 지정한다는 의미이고 자바 코드에서 textView1을 찾아서 다른 기능을 넣을 수 있게 됩니다. 자바에서 접근하는 코드로는 findViewById(R.id. 위젯 id);를 사용합니다. 다만 텍스트 표시만 기능하는 등 추가적인 기능이 필요 없는 경우 굳이 지정하지 않아도 됩니다.

layout_width, layout_height 속성은 같이 붙어 다니며 모든 위젯에 필수적으로 들어가는 속성입니다. 당연히 이름답게 width 속성은 폭을 height 속성은 높이를 나타내며 입력값으로는 match_parent와 wrap_content를 사용하고 match_parent는 말 그대로 자신의 부모의 크기와 맞춘다는 의미이고 wrap_content도 이름 그대로 내용의 크기만큼 크기를 지정한다는 의미입니다. fill_parent의 경우 안드로이드 2.1 이하 버전에서 사용하던 것으로 match_parent와 같은 역할을 담당하지만 안드로이드 2.1 버전은 2010년도 초반에 사용하던 버전으로 현재(2021년 4월 기준)는 안드로이드 10 혹은 11 버전이 주로 사용되므로 신경 쓰지 않으셔도 됩니다. 그리고 원한다면 값을 직접 입력할 수도 있으며 주로 사용하는 크기 값은 픽셀(px) 단위 또는 dp단위를 사용하고 dp단위면 비율 값을 지정하게 되어 해상도가 달라도 같은 비율로 표시해주는 효과가 있으며 픽셀 단위로 지정하면 항상 고정된 값만을 보여주게 됩니다. 따라서 단위에 주의할 필요가 있습니다.

background 속성은 위젯의 배경색을 지정하고 #RRGGBB의 값을 사용합니다. 여기서 RR은 빨강, GG는 초록, BB는 파랑을 의미하며 00~FF로 16진수의 값을 사용합니다. 그리고 0이면 흰색 F면 각 부분의 최대의 값을 넣습니다. 만약 #FF0000이면 빨간색 #00FF00면 초록색이 표시되게 되며 #000000이면 검은색 #FFFFFF면 흰색 그 이외에 같은 값(예를 들면 #111111)이면 회색이 표시됩니다. 다만 버튼 위젯에서는 제대로 작동하지 않는 부분이 있어 주의가 필요합니다.

여기까지 설명한 값들을 사용하면 다음과 같이 표시됩니다.

xml코드는 다음과 같습니다.

<?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"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="성별 선택"/>
        <RadioButton
            android:id="@+id/female"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="여성"/>
        <RadioButton
            android:id="@+id/male"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="남성"/>
        <RadioButton
            android:id="@+id/etc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="기타"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ff0000"
        android:orientation="vertical">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00ff00"
            android:text="버튼 1"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="버튼 2"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="버튼 3"/>
    </LinearLayout>
</LinearLayout>

padding, layout_margin 속성은 html 파일을 만져보았다면 굉장히 익숙하실 속성입니다. padding은 경계선으로부터 위젯이 떨어지도록 설정하는 속성 값으로 레이아웃의 경계와 위젯 사이에 여백을 두도록 하는 속성입니다. 그리고 layout_margin의 경우 각 위젯 별로 서로 간격을 두고 싶을 때 사용합니다. 그리고 그냥 padding과 layout_margin의 경우 상하좌우 전부 동일한 값만큼 거리를 두도록 하기 때문에 상하좌우 각각 다른 값을 주고 싶다면 padding이나 margin 뒤에 Top, Bottom, Left, Right속성을 바로 이어 붙여 값을 지정하시면 됩니다.(예를 들면 상부분의 패딩 거리를 30dp만큼 주고 싶은 경우 android:paddingTop="30dp"이런 식으로 사용하면 됩니다.) 

Visibility속성의 경우도 이름 값하는 속성으로 위젯의 표시 유무를 설정하는 속성으로 입력 가능한 값으로는 visible, invisible, gone이 있으며 visible은 보이는 상태, invisible은 보이지 않는 상태, gone은 보이지 않으며 위치를 표시하지 않음을 의미합니다.

enabled, clickable속성의 경우에는 클릭이나 터치가 가능 여부를 지정하는 속성으로 기본값으로는 true값이 들어가며 false 값을 넣어 비활성화시킬 수 있습니다.

rotation속성은 위젯을 회전시켜 출력하고 각도를 값으로 넣어 지정합니다. 각도 값에서는 딱히 단위가 없으므로 원하는 만큼 값을 입력하시면 됩니다.

위 6개의 속성을 이용하면 다음과 같은 이미지를 만들 수 있습니다.

<?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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="30dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            android:text="아래에 이름을 입력 : "/>
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            android:hint="여기에 채우세요"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            android:text="확인"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="버튼 1"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="invisible"
            android:text="버튼 2"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="visible"
            android:text="버튼 3"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="gone"
            android:text="버튼 4"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="버튼 5"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:enabled="false"
            android:text="버튼 6"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clickable="false"
            android:text="버튼 7"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:rotation="45"
            android:text="버튼 8"/>
    </LinearLayout>

</LinearLayout>

그리고 책에 있는 직접 풀어보기 4-2번 문제의 해답은 다음과 같습니다.

<?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"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="20dp"
        android:orientation="vertical">
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#00FF00"
            android:layout_margin="20dp"
            android:text="버튼 1"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            android:text="여기는 텍스트뷰 입니다"/>
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            android:background="#0000ff"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_margin="20dp"
            android:text="버튼 2"/>
    </LinearLayout>
    
</LinearLayout>

텍스트뷰와 에디트 뷰 등은 다음 게시글로 설명드리겠습니다.

---

2021년 4월 2일 내용 수정

배경색 흰색과 검은색이 반대로 설명되어있던 점 수정