[JAVA] Première création d'interface utilisateur de développement Android pour les personnes occupées (en plus, expérience de liaison de données)

introduction

Cet article est la suite du "Premier développement Android pour les personnes occupées".

Cette fois, nous allons créer une interface utilisateur. Je vais également aborder la liaison de données dans le cadre Android.

La documentation officielle de la bibliothèque de liaison de données est ici [https://developer.android.com/topic/libraries/data-binding?hl=ja)

Préparation préalable

Modifiez build.gradle pour activer la liaison de données.

build.gradle

android {
    ...
    dataBinding {
        enabled = true
    }
    compileOptions {
        sourceCompatibility = '1.8'
        targetCompatibility = '1.8'
    }
}

dependencies {
    ...
    implementation 'androidx.lifecycle:lifecycle-extensions:2.2.0-alpha01'
}

Appuyez sur "Sync Now" qui apparaît en haut.

Créer une classe ViewModel

MainViewModel.java

public class MainViewModel extends ViewModel {

    private MutableLiveData<String> name = new MutableLiveData<>();

    public MutableLiveData getName() {
        return this.name;
    }
}

Au fait, modifions la structure du package comme indiqué ci-dessous.

Modifier le fichier de mise en page

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<layout 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:id="@+id/layout">

    <data>
        <variable name="mainViewModel" type="jp.co.sample.hands_on_sample.viewmodel.MainViewModel" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".activity.MainActivity">

        <EditText
            android:id="@+id/editText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="100dp"
            android:layout_marginEnd="8dp"
            android:ems="10"
            android:inputType="textPersonName"
            android:text="@={mainViewModel.name}"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:text="@{mainViewModel.name}"
            android:textSize="36sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/editText" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Modifier la classe d'activité

MainActivity.java

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Log.i(TAG, "onCreate");

        mainViewModel = ViewModelProviders.of(this).get(MainViewModel.class);
        ActivityMainBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_main);

        binding.setMainViewModel(mainViewModel);
        binding.setLifecycleOwner(this);
    }

Run! Appuyez sur le bouton Exécuter pour lancer l'application. Dès que vous entrez la valeur dans la zone de saisie, vous verrez que l'étiquette de texte a été mise à jour.

Version avancée

Voyons comment capturer les modifications dans le ViewModel et effectuer un traitement pour les afficher à l'écran en temps réel. Cette fois, je vais essayer d'inverser les caractères saisis et de les afficher.

MainViewModel.java

public class MainViewModel extends ViewModel {

    private MutableLiveData<String> name = new MutableLiveData<>();

    private MutableLiveData<String> reverseName = new MutableLiveData<>();

    public MutableLiveData<String> getName() {
        return this.name;
    }

    public MutableLiveData<String> getReverseName() {
        return this.reverseName;
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<layout 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:id="@+id/layout">

    <data>
        <variable name="mainViewModel" type="jp.co.sample.hands_on_sample.viewmodel.MainViewModel" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".activity.MainActivity">

        <EditText
            android:id="@+id/editText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="100dp"
            android:layout_marginEnd="8dp"
            android:ems="10"
            android:inputType="textPersonName"
            android:text="@={mainViewModel.name}"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:text="@{mainViewModel.name}"
            android:textSize="36sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/editText" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:text="@{mainViewModel.reverseName}"
            android:textSize="36sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView2" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

MainActivity.java

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Log.i(TAG, "onCreate");

        mainViewModel = ViewModelProviders.of(this).get(MainViewModel.class);
        ActivityMainBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_main);

        binding.setMainViewModel(mainViewModel);
        binding.setLifecycleOwner(this);

        mainViewModel.getName().observe(this, name -> {
            mainViewModel.getReverseName().postValue(new StringBuilder(name).reverse().toString());
        });
    }