[JAVA] Erste Erstellung einer Benutzeroberfläche für die Android-Entwicklung für vielbeschäftigte Personen (zusätzlich Erfahrung mit Datenbindung)

Einführung

Dieser Artikel ist eine Fortsetzung von "Erste Android-Entwicklung für vielbeschäftigte Menschen".

Dieses Mal werden wir eine Benutzeroberfläche erstellen. Ich werde auch auf die Datenbindung im Android-Framework eingehen.

Die offizielle Dokumentation für die Datenbindungsbibliothek finden Sie hier [https://developer.android.com/topic/libraries/data-binding?hl=ja]

Vorbereitungen

Ändern Sie build.gradle, um die Datenbindung zu aktivieren.

build.gradle

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

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

Drücken Sie oben auf "Jetzt synchronisieren".

Erstellen Sie eine ViewModel-Klasse

MainViewModel.java

public class MainViewModel extends ViewModel {

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

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

Übrigens, ändern wir die Paketstruktur wie folgt.

Bearbeiten Sie die Layoutdatei

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>

Bearbeiten Sie die Aktivitätsklasse

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! Drücken Sie die Run-Taste, um die App zu starten. Sobald Sie den Wert in das Eingabefeld eingeben, sehen Sie, dass die Textbezeichnung aktualisiert wurde.

Erweiterte Version

Lassen Sie uns sehen, wie Sie die Änderungen im ViewModel erfassen und einige Verarbeitungsschritte ausführen, um sie in Echtzeit auf dem Bildschirm anzuzeigen. Dieses Mal werde ich versuchen, die eingegebenen Zeichen umzukehren und anzuzeigen.

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());
        });
    }