Android with Kotlin : 안드로이드 기초편 - 회원가입 화면(UI) 만들기

​안드로이드 프로젝트를 처음 만들었을 때 우리는 activity_main.xml과 MainActivity.kt 파일을 확인할 수 있습니다. 이 두 파일의 차이점은 무엇일까요? 단순하게 얘기하면 xml 파일은 text, button등을 다룰 수 있는 디자인과 관련된 파일이고요. kt 파일은 button등을 클릭했을 때 동작과 관련된 파일이라고 할 수 있습니다.

종류	폴더	내용
app	manifests	앱의 정보 사항들을 담아두는 xml 파일
	java	앱이 화면에 뜨고 난 이후의 동작 로직을 작성하는 폴더 (kt파일들이 있는 곳)
	res > drawable	화면에 배치될 [그림 파일]이 모여있는 폴더
	res > layout	앱 [화면의 구조]를 결정하는 xml파일
gradle scripts		프로젝트의 개발관련 주요 설정 / 라이브러리 사용목록 편집

​​동작과 관련된 kt 파일보다 [res] - [layout] 폴더에 가서 activity_main.xml에 우리가 만들 앱의 디자인부터 하도록 하겠습니다.

 

​​제가 이번 글에서 만들 화면 디자인입니다. 저도 아직 배우는 단계라 엄청 화려하게는 못만들고 기본적이면서도 있을 내용 다 있는 회원가입화면부터 만들어보도록 하겠습니다.

 

// 수정 전 원본 소스
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>
<!--
ConstraintLayout이 아닌 LinearLayout으로 하는 이유
LinearLayout 안에 있는 내용물들은 무조건 일렬로 줄을 서서 배치가 되기에 해당 Layout으로 사용할 예정
 -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" //내용물들을 가로(horizontal) / 세로(vertical)로 배치 결정하는 옵션
    android:gravity="top"          //내용물들을 top으로 설정. 만약 bottom으로 설정할 시 화면 제일 밑으로 내용물들이 이동
    android:padding="15dp"         //margin과 비슷한 padding은 Layout으로부터 padding값만큼 내용물들에게 내부 여백을 줌
    android:background="#FFFFFF"   //배경색을 설정
    tools:context=".MainActivity">

   <TextView //사용자에게 문장을 보여주기만 할 때 사용
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="아이디"        //text에 보여줄 내용
        android:textColor="#FF0000"  //글씨색 설정
        android:textStyle="bold"     //글씨의 스타일 설정
        android:textSize="20sp"/>    //글씨의 크기를 설정

    <EditText //사용자에게 값을 받아야할 때 사용
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="이메일 양식으로 입력하세요." //사용자에게 입력값에 대한 안내를 해주는 메시지
        android:inputType="textEmailAddress"/>    //어떤 데이터를 입력할지에 따라 키보드에 보여주는 양식이 다름.

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:text="비밀번호"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="비밀번호를 입력하세요."
        android:inputType="textPassword" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:text="닉네임"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="한글/영어 등을 한 줄로 입력하세요."
        android:singleLine="true"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:text="추천인"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="추천한 사람의 닉네임으로 검색하세요. (준비중)"
        android:singleLine="true"          //inputType이 따로 지정되지 않은 상태에서 문장을 한줄만 받고 싶을 때 설정
        android:enabled="false"            //사용을 하는지 안하는지를 설정
        android:imeOptions="actionSearch"/>//singleLine이 true일 때 엔터키의 종류 변경(search, done, go 등)

    <RadioGroup //만약 여러 라디오버튼 중 하나만 선택하는 목록을 만드는경우 RadioGroup을 이용하면 쉽게 가능
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"          //visibility:보임, invisibility:안보이지만 공간은 확보, gone:안보임+공간날림
        android:orientation="horizontal">

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="만 14세 미만" />

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="만 14세 이상" />

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="외국인" />
    </RadioGroup>

    <CheckBox 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="이용약관에 동의합니다."
        android:checked="true"/>

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:enabled="false"
        android:text="마케팅 활용에 동의합니다."/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center">

        <ImageView
            android:layout_width="120dp"
            android:layout_height="120dp"
            android:src="@drawable/dolphin_logo_01"
            android:scaleType="centerCrop"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="취소"/>

        <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="회원가입"/>

    </LinearLayout>

</LinearLayout>

* 지금부터 소스창에서 보이는 //주석은 제거를 해야 빌드가 정상적으로 처리되는 주석입니다. 해당 주석은 이해하는데에 도움을 드리고자 제가 넣은 주석입니다.

TextView와 EditText를 각각 생성해보았는데 만약 둘이 너무 붙어있고 TextView밑에 EditText를 놓고 싶다면, LinearLayout의 속성 중 하나인 orientation을 사용하면 됩니다. 그 외 나머지 내용들은 소스를 참고하시면 좋을듯 싶습니다.