본문 바로가기

안드로이드 스튜디오

[안드로이드 스튜디오]로그인 화면 만들기(스낵바,토스트바 활용)

화면 개발

각 화면에 맞게 xml을 구성해주고 우측 상단 검색 표시를 눌러 hint를 검색하고 아래 화면처럼 hint를 넣어준다.

Constraint Widget도 클릭해서 꼭 이어줘야 한다(양옆과 위or ㅇ양옆 아래 이어주면 됌)

 

로직개발

package com.kks.uitest1;

import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    EditText editEmail;
    EditText editPassword;
    EditText editName;
    Button btnSave;
    TextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // UI 컴포넌트와 자바 변수 연결
        editEmail = findViewById(R.id.editEmail);
        editPassword = findViewById(R.id.editPassword);
        editName = findViewById(R.id.editName);
        btnSave = findViewById(R.id.btnSave);
        textView = findViewById(R.id.textView);

        // 저장 버튼 클릭 리스너 설정
        btnSave.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 사용자가 입력한 데이터를 가져온다
                String email = editEmail.getText().toString();
                String password = editPassword.getText().toString();
                String name = editName.getText().toString();

                // 입력값이 비어있는지 확인한다
                if(email.isEmpty() || password.isEmpty() || name.isEmpty()){
                    // 비어있다면 토스트 메시지로 사용자에게 알린다
                    Toast.makeText(MainActivity.this,
                            "필수 항목이니 모두 입력하시오.",
                            Toast.LENGTH_SHORT).show();
                } else {
                    // 입력된 이메일을 로그에 출력하고, 텍스트 뷰에 표시한다
                    Log.i("UITEST MAIN", email);
                    textView.setText(email);
                }
            }
        });
    }
}

1. UI 컴포넌트 연결

  • 액티비티가 생성될 때 XML 레이아웃 파일의 UI 컴포넌트를 자바 코드와 연결한다.
editEmail = findViewById(R.id.editEmail);
editPassword = findViewById(R.id.editPassword);
editName = findViewById(R.id.editName);
btnSave = findViewById(R.id.btnSave);
textView = findViewById(R.id.textView);

2. 버튼 클릭 리스너 설정

  • 저장 버튼이 클릭되었을 때 실행될 코드를 설정한다.
btnSave.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // 코드 내용
    }
});

3. 입력값 검증

  • 모든 입력값이 비어있지 않은지 확인한다. 비어있다면, 토스트 메시지로 사용자에게 알려준다.
if(email.isEmpty() || password.isEmpty() || name.isEmpty()){
    Toast.makeText(MainActivity.this,
            "필수 항목이니 모두 입력하시오.",
            Toast.LENGTH_SHORT).show();
} else {
    Log.i("UITEST MAIN", email);
    textView.setText(email);
}

로그 출력 및 텍스트 뷰 업데이트

  • 이메일을 로그에 출력하고, 텍스트 뷰에 표시한다.
Log.i("UITEST MAIN", email);
textView.setText(email);

실행결과

입력을 안했을경우(토스트 메시지)vs 입력을 모두 정상적으로 했을 경우

스낵바 메시지 코드 및 결과

                    // 유저에게 알리는 방법 1 스낵바
                    Snackbar.make(btnSave,
                            "필수항목 입니다 모두 입력하시오.",
                            Snackbar.LENGTH_LONG).show();