[Android Studio] 아이디 비밀번호 입력창 만들기(정보입력)

이도연·2023년 8월 7일
0

android studio

목록 보기
5/28

1. 실행 화면

.
.
.

2. 전체 코드

Empty View Project 생성 후 layout 폴더 하위에 Layout Resource file을 생성하였다.

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

    <TextView
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Join the membership"
        android:textColor="#2F0B3A"
        android:textSize="10pt"
        android:typeface="serif"
        android:textStyle="bold"
        />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="ID"
        android:inputType="text"
        android:textSize="10pt"
        android:textStyle="italic" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:inputType="textPassword"
        android:textSize="10pt"
        android:textStyle="italic" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Telephone"
        android:inputType="phone"
        android:textSize="10pt"
        android:textStyle="italic" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Email"
        android:inputType="textEmailAddress"
        android:textSize="10pt"
        android:textStyle="italic" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Description"
        android:inputType="text|textMultiLine|textAutoCorrect"
        android:textSize="10pt"
        android:textStyle="italic" />
    <Button
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Submit"
        android:onClick="doAction" />
</LinearLayout>

.
.

아래 코드는 MainActivity 코드이다.

package com.android.myapplication

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.Toast

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.text_views)
    }

    fun doAction(v: View) {
        Toast.makeText(
            getApplicationContext(), "Submitted Successfully",
            Toast.LENGTH_SHORT
        ).show();
    }
}

.
.
.

3. 레이아웃 설정

레이아웃 설정을 위해, XML 코드를 작성했다.
세로 방향의 LinearLayout을 사용했으며, 사용자에게 텍스트 입력을 받거나 정보를 표시한다.

3-1. LinearLayout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

android:orientation
세로로 배치하기 위해 'vertical'설정.
레이아웃의 너비와 높이를 match_parent로 설정하여 부모 뷰에 맞추었다.

.
.
.

3-2. TextView

<TextView
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Join the membership"
        android:textColor="#2F0B3A"
        android:textSize="10pt"
        android:typeface="serif"
        android:textStyle="bold"
        />

android:layoutgravity:

텍스트 뷰 위치 설정 (ex. center, left, right 또는 center|top 처럼 다중 옵션도 적용 가능)

android:text:

텍스트 뷰에 표시될 텍스트

android:textColor:

텍스트의 색상을 설정 (ex."red", "#~~~" ...)

android:textSize:

텍스트의 크기를 설정 (ex. pt, px ...)

android:typeface:

텍스트의 폰트 스타일 (ex. serif, sans ...)

android:textStyle:

텍스트의 스타일을 설정 (ex. bold, italic ...)

.
.
.

3-3. EditText

<EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="ID"
        android:inputType="text"
        android:textSize="10pt"
        android:textStyle="italic" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:inputType="textPassword"
        android:textSize="10pt"
        android:textStyle="italic" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Telephone"
        android:inputType="phone"
        android:textSize="10pt"
        android:textStyle="italic" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Email"
        android:inputType="textEmailAddress"
        android:textSize="10pt"
        android:textStyle="italic" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Description"

android:hint:

입력 창에 어떤 형식이나 값을 입력하라고 알려준다. 사용자가 값을 입력할 경우 가이드글이 사라지게 하는 기능

android:inputType:

입력 상자에 입력할 데이터의 유형을 설정

.
.

레이아웃 위젯의 속성에 match_parent 와 wrap_content 를 설정할 수 있다. (물론, 숫자 임의 지정도 가능. dp, in, mm 등)
match_parent 의 경우 너비 or 높이가 화면 전체 길이가 된다.
warp_content 는 위젯에 입력할 글자 혹은 이미지 크기에 맞게 설정.

.
.
.

4. 버튼 구현

4-1. 위젯 추가

<Button
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Submit"
        android:onClick="doAction"
        />

.
.
.

4-2. 버튼을 클릭했을 때 이벤트 처리하기

package com.android.myapplication

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.Toast

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.text_views)
    }

    fun doAction(v: View) {
        Toast.makeText(
            getApplicationContext(), "Submitted Successfully",
            Toast.LENGTH_SHORT
        ).show();
    }
}

함수 doAction 에서 "Submit" 버튼을 클릭하면 "Submitted Successfully" 메시지가 팝업으로 표시되는 로직을 짰다. xml 파일의 'onClick' 메서드를 통해 클릭 이벤트가 처리된다. 'setOnClickListener'를 통해 처리하는 방법도 있다.

5. 디바이스에 표시하기

파일의 내용을 디바이스에 표시하기 위해 setContectView 함수의 layout 파일명을, 본인 레이아웃 구성 파일명으로 변경한다. (초기에는 R.layout.MainActivity 로 되어있을 것)

package com.android.myapplication

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.text_views) // 해당 라인이 수정됨
    }
}

나는 레이아웃 코드를 ui.xml 파일에 작성해놓고, 함수를 text_views 로 수정했다. 빌드 시, Hello world 만 떠서, 중복 파일 삭제를 통해 해결했다. (이전의 코드는 Hello World 밖에 없었다.)

0개의 댓글