[코틀린으로 인스타그램 만들기] 1. 로그인 화면 만들기

오늘은 코틀린으로 안드로이드 로그인 화면을 만들어보겠습니다.

먼저 프로젝트를 생성해주세요.

빈 액티비티로 생성해줍니다.

원하는 패키지 명과 프로젝트 이름을 설정해주세요. 그 후 finish를 누릅니다.

다음과 같은 activitiy_main.xml로 이동해주세요.

layout폴더를 우클릭 한 후 new -> resource layout file을 클릭 -> activity_login을 입력해 로그인 화면으로 쓸 레이아웃 파일을 만들어줍니다.

안드로이드는 xml 파일로 레이아웃을 구성합니다. 그 후에 각 태그에 id를 두어서 자바, 코틀린 코드와 View라는 개념으로 연결하게 되고, 자바, 코틀린으로 로직을 짜게 됩니다.

activity_login.xml에 아래 코드를 입력해줍니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".MainActivity">


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

        <TextView
            android:layout_width="match_parent"
            android:layout_height="80sp"
            android:text="로그인 화면입니다."
            android:textAlignment="center"
            android:textSize="20sp" />

        <EditText
            android:id="@+id/id"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="id" />

        <EditText
        android:id="@+id/pw"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="pawword" />

        <Button
        	android:id="@+id/btn_email_login"
            android:layout_width="match_parent"
            android:layout_height="50sp"
            android:text="로그인"/>

    </LinearLayout>
</RelativeLayout>

 

코드를 입력하시고 나면 우측과 같은 레이아웃 화면을 보실 수 있습니다.

매우 간단하게 안드로이드 로그인 화면을 만드셨습니다!!! 짝짝짝~~!!

각 태그에 대한 간단한 설명

RelativeLayout : 상대적 레이아웃 기법으로서 상대적 위치 기준이 되는 뷰를 기준으로 정렬함. 

ex) a를 기준으로 b가 정렬된다면 a의 위, a의 아래, a의 오른쪽, a의 왼쪽

LinearLayout : 말 그대로 선형 레이아웃입니다. orientation값의 수평, 수직 값에 맞춰서 자식 태그들을 정렬합니다.

EditText : 택스트를 수정하는 박스를 만드는 태그입니다.

Button : 버튼을 만드는 태그입니다.

 

다음 시간에는 이 로그인 화면과 파이어베이스를 연동해서 회원가입 기능을 만들어 보겠습니다.