소개

DreamHanks의 MOON입니다.

전회는 「스피너」에 대해서 설명을 해 갔습니다.
6. 【Android/Kotlin】 스피너(Spinner)

이번에는 간단한 로그인 화면을 만들고 유효성 검사를 할 것입니다.

유효성 검사란?

バリデーションチェック 는 입력 내용이나 설명 내용이 요구 사항을 충족하는지 유효성을 확인하는 것입니다.

모두가 ヤフー 또는 다른 포털 사이트의 로그인 페이지에서 ID를 입력하지 않고 로그인하면,
로그인 할 수 없어 "ID를 입력하십시오"라는 메시지를 본 경험이 있다고 생각합니다.

이것이 유효성 검사에 의한 오류 메시지입니다.

로그인 화면 만들기

· 로그인 화면 레이아웃의 xml 파일 만들기

activity_main.xml

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

    <TextView                                   
        android:layout_width="wrap_content"                                 
        android:layout_height="wrap_content"                                    
        android:id="@+id/main_tv"                                   
        android:text="ログイン" />                                  

    <EditText                                   
        android:layout_width="200dp"                                    
        android:layout_height="wrap_content"                                    
        android:id="@+id/id_et"                                 
        android:inputType="text"                                    
        android:hint="ID"/>                                 

    <EditText                                   
        android:layout_width="200dp"                                    
        android:layout_height="wrap_content"                                    
        android:id="@+id/pwd_et"                                    
        android:inputType="textPassword"                                    
        android:hint="パスワード"/>                                    

    <Button                                 
        android:layout_width="wrap_content"                                 
        android:layout_height="wrap_content"                                    
        android:id="@+id/login_btn"                                 
        android:text="ログイン"/>                                   

</LinearLayout>                                 

· Activity 만들기

MainActivity.kt

package com.example.practiceapplication

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView
import android.widget.Toast
import javax.xml.validation.Validator

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

        val id_et = findViewById<EditText>(R.id.id_et)              //IDのEditText（入力エリア）
        val pwd_et = findViewById<EditText>(R.id.pwd_et)            //PasswordのEditText（入力エリア）
        val login_btn = findViewById<Button>(R.id.login_btn)        //ログインボタン

        //ログインボタンのクリックイベントを設定
        login_btn.setOnClickListener {
            //バリデーションチェックの結果
            val check = validationCheck(id_et, pwd_et)

            //エラーがない場合に画面を遷移
            if(check){
                val nextIntent = Intent(this, IntentTestActivity::class.java)
                nextIntent.putExtra("id_et", id_et.text.toString())
                startActivity(nextIntent)
            }
        }
    }

    //バリデーションチェックするためのメソッド
    fun validationCheck(id_et : EditText, pwd_et : EditText) : Boolean{
        //IDの入力値がない場合
        if(id_et.text.toString().length == 0){
            //IDの入力エリアをフォーカスさせる
            id_et.requestFocus()
            //画面の下にToastエラーメッセージを表示
            Toast.makeText(applicationContext, "IDを入力してください。", Toast.LENGTH_SHORT).show()
            return false
        }

        //Passwordの入力値がない場合
        if(pwd_et.text.toString().length == 0){
            //Passwordの入力エリアをフォーカスさせる
            pwd_et.requestFocus()
            //画面の下にToastエラーメッセージを表示
            Toast.makeText(applicationContext, "パスワードを入力してください。", Toast.LENGTH_SHORT).show()
            return false
        }
        return true
    }
}

　① 로그인 버튼의 클릭 이벤트를 설정합니다.
② 밸리데이션 체크하기 위한 메소드를 작성합니다.
③ 밸리데이션 체크의 메소드의 결과에 의해 문제가 없는 경우에 화면을 천이 시킵니다.

· 천이시킬 화면의 xml을 작성

activity_intent_test.xml

<?xml version="1.0" encoding="utf-8"?>                                  
<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"                                  
    tools:context=".IntentTestActivity"                                 
    android:gravity="center">                                   

    <TextView                                   
        android:layout_width="wrap_content"                                 
        android:layout_height="wrap_content"                                    
        android:id="@+id/intent_title"                                  
        android:textSize="40dp"                                 
        android:text="ログイン成功ページ"                                  
        android:layout_marginBottom="100dp"/>                                   

    <TextView                                   
        android:layout_width="wrap_content"                                 
        android:layout_height="wrap_content"                                    
        android:id="@+id/intent_contents"                                   
        android:textSize="20dp"                                 
        android:text="ここにログインID表示" />                                 

</LinearLayout>                                 

・전이시킬 화면의 Activity를 작성

IntentTestActivity.kt

package com.example.practiceapplication

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

class IntentTestActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_intent_test)

        val intent_contents = findViewById<TextView>(R.id.intent_contents)

        //以前の画面のIDを取得
        val intented_string = intent.getStringExtra("id_et")

        //以前の画面のIDをテキストに表示
        intent_contents.text = intented_string + "様、こんにちは。"
    }
}

앱 시작

· ID를 입력하지 않고 로그인 버튼을 클릭하면


· 비밀번호를 입력하지 않고 로그인 버튼을 클릭하면


· 정확하게 입력하고 로그인 버튼을 클릭하면

끝에

이번에는 밸리데이션 체크에 대해 설명했습니다.

다음번에는 「웹 뷰」에 대해 설명하겠습니다.
8. 【Android/Kotlin】웹뷰(WebView)

최신 내용은 아래 링크(DreamHanks의 블로그)에서 확인할 수 있습니다.
DreamHanks 블로그(Android/Kotlin 앱 개발)