Développement d'applications Android (compatibles Java et Kotlin) Comment implémentez-vous cela? ~ Edition de texte ~

Cet article est la deuxième partie de "Développement d'applications Android: comment l'implémenter?"

L'objectif principal est (arbitrairement) de supposer "les débutants et les intermédiaires qui ont appris à google bientôt" comme moi. Puisqu'il explique à la fois Java et Kotlin, même ceux qui disent "Je comprends l'implémentation en Java, mais comment l'écrire en Kotlin?" Je pense que ce sera utile.

Le premier était Button Edition.

Un échantillon de ce projet est disponible sur le lien ci-dessous. La branche principale est le code source Kotlin et la branche java est le code source Java.

https://github.com/Dai1678/SampleCodePrograms

J'ai essayé d'utiliser divers textes

Il n'y a pas de tsukkomi que vous utilisez déjà Text pour la première fois. C'est une fonction essentielle.

C'est juste ennuyeux de simplement mettre un TextView Comme échantillon

--TextView qui peut être copié en appuyant longuement sur le caractère --Seulement ici est EditText ordinaire

De plus, j'ai ajouté une fonction comme un simple formulaire de connexion en utilisant ces derniers.

environnement

Android Studio 3.0+ Opération confirmée sur Android 8.0

build.gradle


apply plugin: 'com.android.application'

apply plugin: 'kotlin-android'

apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 27
    defaultConfig {
        applicationId "net.ddns.dai.samplecodeprograms"
        minSdkVersion 17
        targetSdkVersion 27
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_version"
    implementation 'com.android.support:appcompat-v7:27.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    implementation 'com.android.support:design:27.1.0'
    implementation 'com.android.support:customtabs:27.1.0'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.1'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
}

Démo d'opération

TextSampleActivity.gif

Explication de XML

activity_text_sample.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"
    android:gravity="center"
    android:padding="10dp"
    tools:context=".TextSampleActivity">

    <TextView
        android:id="@+id/userName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Votre nom d'utilisateur est ◯◯\n Appuyez et maintenez pour copier"
        android:textSize="20sp"
        android:textIsSelectable="true"/>

    <EditText
        android:id="@+id/editPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Veuillez définir un mot de passe"
        android:textSize="20sp"
        android:maxLines="1"
        android:layout_marginTop="20dp" />

    <TextClock
        android:id="@+id/currentTime"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:hint="yyyy/MM/dd HH:mm:ss"
        android:textSize="20sp"
        android:timeZone="Asia/Tokyo"
        android:format12Hour="yyyy/MM/dd HH:mm:ss"
        android:format24Hour="yyyy/MM/dd HH:mm:ss"/>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/nameTextInputLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        app:counterEnabled="true"
        app:counterMaxLength="10"
        app:errorEnabled="true"
        app:hintAnimationEnabled="true"
        app:hintEnabled="true">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/userNameInput"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Nom d'utilisateur"
            android:maxLines="1"
            android:textSize="20sp" />

    </android.support.design.widget.TextInputLayout>


    <android.support.design.widget.TextInputLayout
        android:id="@+id/passwordTextInputLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:counterEnabled="false"
        app:errorEnabled="false"
        app:hintAnimationEnabled="true"
        app:hintEnabled="true">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/userPassWordInput"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword"
            android:hint="mot de passe"
            android:maxLines="1"
            android:textSize="20sp" />

    </android.support.design.widget.TextInputLayout>

    <Button
        android:id="@+id/loginButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="S'identifier"/>

</LinearLayout>

Vous pouvez afficher des caractères avec «».

--ʻ android: l'unité recommandée pour textSizeestsp. Il est étendu ou réduit en fonction du paramètre de taille de police du terminal. --Lorsque ʻandroid: textIsSelectable est défini sur true, vous pouvez sélectionner la plage en appuyant sur le caractère affiché.

Vous pouvez saisir des caractères avec «».

--ʻAndroid: vous pouvez définir une chaîne de caractères qui invite l'utilisateur à entrer lorsque rien n'est entré avec un indice. (Dans TextView, etc., il est utilisé pour vérifier sur l'écran de prévisualisation d'Android Studio) ―― Même si vous commencez une nouvelle ligne en tapant avec ʻandroid: maxLines, l'espace d'entrée est étendu uniquement au nombre de lignes spécifié. (En fait, la ligne saute juste parce que les caractères disparaissent)

<TextClock /> peut afficher la date et l'heure actuelles sous forme de chaîne formatée.

Utilisez «» et «» comme un ensemble (lors de la préparation de deux champs d'entrée, préparez-en deux chacun). Vous pouvez l'utiliser pour implémenter EditText avec des animations de conception de matériaux.

N'oubliez pas ʻimplementation'com.android.support: design: (version) dans build.gradle lorsque vous l'utilisez. Aussi, lorsque vous utilisez app: ~ en xml, n'oubliez pas xmlns: app =" http://schemas.android.com/apk/res-auto "`.

--Lorsque ʻapp: counterEnabled est défini sur true, le nombre de caractères saisis est affiché dans le coin inférieur droit. --Si vous spécifiez ʻapp: counterMaxLength, vous pouvez visualiser la limite de caractères comme "0/10". (Avec cela seul, vous pouvez continuer à taper même si le nombre de caractères est dépassé) --Lorsque ʻapp: errorEnabled est défini sur true --Si ʻapp: hintEnabled est défini sur true, la chaîne de caractères de l'indice est affichée en haut à gauche lors de la saisie. --ʻApp: Si hintAnimationEnabled` est défini sur true, l'animation sera appliquée à la chaîne d'indication.

Explication de l'activité

Édition Java

Je l'utilise souvent pour traiter des caractères affichés ou saisis dans TextView ou EditText. getText et setText.

example.java


 //Étant donné que la valeur de retour de getText est de type TextView, Cast avec toString, etc.(Conversion de type)Et remplacer
String str = textView.getText().toString();

textView.setText("Chaîne");

TextInputEditText est fondamentalement la même utilisation.

Dans l'exemple, la méthode generateUserName est utilisée pour générer un nombre aléatoire à 10 chiffres et déterminer le nom d'utilisateur sans autorisation. Définissez le mot de passe avec n'importe quelle chaîne de caractères dans EditText avec l'astuce "Veuillez définir le mot de passe". Lorsque vous appuyez sur le bouton de connexion, la chaîne de caractères est comparée à la chaîne de caractères saisie dans TextInputEditText qui contient les indices de «nom d'utilisateur» et de «mot de passe».

À propos de TextInputLayout et TextInputEditText

Je voulais utiliser EditText, qui est une conception matérielle, alors j'ai essayé de l'utiliser.

En gros, si vous l'ajoutez à xml, cela fonctionnera sans autorisation, Du côté code, si plus que le nombre de ʻapp: counterMaxLength` spécifié dans xml est entré Un message d'erreur a été affiché.

example.java


userNameInput.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int start, int count, int after) {

            }

            @Override
            public void afterTextChanged(Editable editable) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int start, int before, int count) {
                if (charSequence.length() > nameTextInputLayout.getCounterMaxLength()){
                    nameTextInputLayout.setError("Veuillez saisir le nom d'utilisateur avec moins de 10 caractères");
                }else{
                    nameTextInputLayout.setError(null);
                }
            }


        });

userNameInput sera le TextInputLayout où vous entrez votre nom d'utilisateur. J'ai ajouté un auditeur à cela pour surveiller les caractères tapés dans TextWatcher.

beforeTextChanged(CharSequence charSequence, int start, int count,int after)

onTextChanged(CharSequence charSequence, int start, int before, int count)

afterTextChanged(Editable editable)

--Enfin, cette méthode s'appelle - Editable editable
La dernière chaîne modifiable et modifiée

Pour afficher le message d'erreur, utilisez la méthode setError et si rien ne s'affiche, spécifiez null comme argument.

J'ai omis des explications autres que celles liées au texte, mais ce qui suit est le code source.

TextSampleActivity.java


public class TextSampleActivity extends AppCompatActivity {

    private final int NoInput = -2;
    private final int LOGIN = 1;
    private final int ERROR = -1;

    @SuppressLint("SetTextI18n")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text_sample);

        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null){
            actionBar.setDisplayHomeAsUpEnabled(true);
        }

        final String name = generateUserName();

        TextView userName = findViewById(R.id.userName);
        userName.setText("Votre nom d'utilisateur est" + name + "est\n Appuyez et maintenez pour copier");

        Button loginButton = findViewById(R.id.loginButton);
        final EditText editPassWord = findViewById(R.id.editPassword);
        final TextInputEditText userNameInput = findViewById(R.id.userNameInput);
        final TextInputEditText userPassWordInput = findViewById(R.id.userPassWordInput);

        final TextInputLayout nameTextInputLayout = findViewById(R.id.nameTextInputLayout);

        loginButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String yourPassWord = editPassWord.getText().toString();
                String inputUserName = userNameInput.getText().toString();
                String inputUserPassWord = userPassWordInput.getText().toString();

                if (inputUserName.equals("")){
                    //Demander votrePassWord
                    showResult(view, NoInput);
                }else{
                    boolean loginResult = name.equals(inputUserName) && yourPassWord.equals(inputUserPassWord);

                    if (loginResult){
                        //login
                        showResult(view, LOGIN);
                    }else{
                        //error
                        showResult(view, ERROR);
                    }
                }

            }
        });

        userNameInput.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int start, int count, int after) {

            }

            @Override
            public void afterTextChanged(Editable editable) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int start, int before, int count) {
                if (charSequence.length() > nameTextInputLayout.getCounterMaxLength()){
                    nameTextInputLayout.setError("Veuillez saisir le nom d'utilisateur avec moins de 10 caractères");
                }else{
                    nameTextInputLayout.setError(null);
                }
            }


        });

    }

    private String generateUserName(){

        final String letters = "abcdefghijklmnopqrstuvwxyz0123456789";
        Random random = new Random();
        StringBuilder stringBuilder = new StringBuilder();

        while (stringBuilder.length() < 10){
            int val = random.nextInt(letters.length());
            stringBuilder.append(letters.charAt(val));
        }

        return stringBuilder.toString();

    }

    @SuppressLint("SimpleDateFormat")
    private void showResult(View view, int result){

        String showText = "";
        DateFormat dateFormat = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
        Date date = new Date(System.currentTimeMillis());

        switch (result){
            case NoInput:
                showText = "Veuillez définir un mot de passe";
                break;

            case LOGIN:
                showText = dateFormat.format(date) + "Connecté!";
                break;

            case ERROR:
                showText = "Le nom d'utilisateur ou le mot de passe saisi est incorrect";
        }

        Snackbar.make(view, showText, Snackbar.LENGTH_LONG)
                .setAction("Action", null).show();

    }
}

La raison pour laquelle j'ai dû ajouter le modificateur final aux variables nommées editPassWord, userNameInput et userPassWordInput. Cela permet d'éviter que la valeur ne soit modifiée pendant le traitement, comme OnClickListener qui définit une classe anonyme. Si vous voulez faire quelque chose comme le décompte pendant le traitement, vous pouvez utiliser les variables membres de la classe.

Édition Kotlin

La façon d'écrire getText et setText dans Kotlin est un peu cool.

example.kt


val str = textView.text.toString()  //Utilisé comme setText

textView.text = "Chaîne"  //Utilisé comme getText

Vous pouvez faire les deux avec .text. Surtout lorsque vous l'utilisez comme getText, au lieu de passer un type String comme argument comme java Il s'exprime sous forme de substitution.

En passant, dans Kotlin, lorsque vous souhaitez incorporer une variable dans une chaîne, vous pouvez l'exprimer naturellement en utilisant $. C'est la même chose que PHP.

example.kt


userName.text = "Votre nom d'utilisateur est${name}est\n Appuyez et maintenez pour copier"

//C'est très bien lorsque vous placez des espaces avant et après la variable
userName.text = "Votre nom d'utilisateur est$est le nom\n Appuyez et maintenez pour copier"

Vous trouverez ci-dessous le code source de l'exemple d'application dans Kotlin.

TextSampleActivity.kt


class TextSampleActivity : AppCompatActivity() {

    private val noInput = -2
    private val login = 1
    private val error = -1

    @SuppressLint("SetTextI18n")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_text_sample)

        val actionBar = supportActionBar
        actionBar!!.setDisplayHomeAsUpEnabled(true)

        //Créez votre nom
        val name = generateUserName(10)
        userName.text = "Votre nom d'utilisateur est${name}est\n Appuyez et maintenez pour copier"

        loginButton.setOnClickListener { view ->
            val yourPassWord = editPassword.text.toString()
            val inputUserName = userNameInput.text.toString()
            val inputUserPassWord = userPassWordInput.text.toString()

            if (inputUserPassWord == ""){
                //Demander votrePassWord
                showResult(view, noInput)
            }else{
                val loginResult = name == inputUserName && yourPassWord == inputUserPassWord

                if (loginResult){
                    //login
                    showResult(view, login)
                }else{
                    //error
                    showResult(view, error)
                }
            }

        }

        userNameInput.addTextChangedListener(object: TextWatcher {
            override fun beforeTextChanged(charSequence: CharSequence, start: Int, count: Int, after: Int) {}
            override fun afterTextChanged(editable: Editable) {}
            override fun onTextChanged(charSequence: CharSequence, start: Int, before: Int, count: Int) {
                if (charSequence.length > nameTextInputLayout.counterMaxLength) {
                    nameTextInputLayout.error = "Veuillez saisir le nom d'utilisateur avec moins de 10 caractères"
                } else {
                    nameTextInputLayout.error = null
                }
            }
        })

    }

    //Créez un nombre aléatoire avec le nombre de chiffres de la valeur de l'argument
    private fun generateUserName(length: Int): String {

        val letters = "abcdefghijklmnopqrstuvwxyz0123456789"

        var str = ""
        while (str.length < length) {
            str += letters[Random().nextInt(letters.length)]
        }

        return str

    }

    @SuppressLint("SimpleDateFormat")
    private fun showResult(view: View, result: Int){

        var showText = ""
        val dateFormat = SimpleDateFormat("yyyy/MM/dd HH:mm:ss")
        val date = Date(System.currentTimeMillis())

        when (result) {
            noInput -> {
                showText = "Veuillez définir un mot de passe"
            }
            login -> {
                showText = "${dateFormat.format(date)}Vous êtes connecté à!"
            }
            error -> {
                showText = "Le nom d'utilisateur ou le mot de passe saisi est incorrect"
            }
        }

        Snackbar.make(view, showText, Snackbar.LENGTH_LONG)
                .setAction("Action", null).show()

    }
}

référence

J'ai découvert TextInputLayout grâce à cet article.

Aperçu de la prochaine fois

Je l'ai déjà utilisé plusieurs fois, mais à propos de Toast et SnackBar. Peut-être que je vais sauter et faire autre chose ...

Ce n'est pas hors de matière

Épilogue

Je voudrais le montrer aux juniors de l'université, mais je serais reconnaissant aux utilisateurs de Qiita de commenter s'il y a une demande. Si vous avez des erreurs, veuillez faire une demande de correction.

Recommended Posts

Développement d'applications Android (compatibles Java et Kotlin) Comment implémentez-vous cela? ~ Edition de texte ~
Développement d'applications Android (compatibles Java et Kotlin) Comment implémentez-vous cela? ~ Edition du bouton ~
Résumé des bons points et des précautions lors de la conversion de l'application Java Android vers Kotlin