はじめに

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 + "様、こんにちは。"
    }
}