[Ch 4-3] 안드로이드 스튜디오 테이블 레이아웃 사용하여 로그인 화면 만들기 (Using table layout in Android Studio)

지난 시간에 우리는 다양한 리니어 레이아웃을 사용하면서 뷰(View)들을 화면에 배치시켜왔다.

- 세로배치, 가로배치, ㄴ 자 배치 등등

그런데, 만약 그런 규칙이 있는 배치를 한다고 하면, 테이블을 사용하는것이 더 효과적인 것이 아닐까?

 

리니어 레이아웃과 유사하게 테이블 레이아웃의 활용도 기본 HTML 에서 테이블을 짜는것과 크게 다르지 않다.

오늘의 목표

로그인 화면 만들기

 

1. 신규 Empty Project 생성

2. activity_main.xml 파일 수정 (아래의 코드로)

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <TableRow>
        <TextView
            android:text="사용자 이름 : "
            android:width="120dp" />
        <EditText
            android:id="@+id/txtUserName"
            android:width="200dp" />
    </TableRow>
    <TableRow>
        <TextView
            android:text="비밀번호 : "/>
        <EditText
            android:id="@+id/txtPassword"
            android:inputType="textPassword"/>
    </TableRow>
    <TableRow>
        <TextView />
        <CheckBox
            android:id="@+id/chkRememberPassword"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Remember Password"/>
    </TableRow>

    <TableRow>
        <Button
            android:id="@+id/buttonSignIn"
            android:text="Log In" />
    </TableRow>
</TableLayout>

1) 2번째 라인에 <TableLayout 을 선언함으로써, Table Layout 사용을 명시한다.

- android:layout_width 와 height 가 "fill_parent" 로 되어 있는것은 화면의 전체 크기를 가득 채우는 크기의 Table 레이아웃을 사용하겠다는 뜻이다.

2) <TableRow> 를 선언함으로써 하나의 행을 그린다.

- 첫번째 행에는 "사용자 이름"(TextView)과 이름을 칠 수 있는 공간이 생성되었다.

3) 하나의 TableRow 하나당, 사용하는 View 를 선언할 수록 왼쪽부터 오른쪽으로 하나씩 추가되면서 컬럼을 자동생성한다.

 

이 내용들을 보기 쉽게 정리하면 아래와 같은 화면으로 볼 수 있다.

※ 위의 코드대로 작성하여 실제로 프로그램을 실행하면, password 가 자동으로 ***** 처리되어 가려지는 것을 볼 수 있는데, 이 이유는 EditText View 를 사용할 때, input Type 을 password 용도로 지정하였기 때문이다.