Cloud-Lösungen der Zukunft - Testen!

Revolutionäre Cloud-Technologie, ganz ohne versteckte Kosten. Profitieren Sie von unserer Testphase und entdecken Sie umfassende Funktionen. Der Anmeldeprozess ist transparent und unkompliziert. Starten Sie jetzt Ihre Reise in die Cloud - Kostenfrei!

Mit E-Mail anmeldenMit Google anmeldenMit GitHub anmelden
Mit E-Mail anmeldenMit Google anmeldenMit GitHub anmelden

Kategorien

Apache

Databases

Docker

JavaScript

Kubernetes

Linux Basis

MySQL

Python

React

Security

Ubuntu

Android MVVM: Benutzeroberflächen dynamisch mit LiveData und Data Binding aktualisieren

In diesem Beitrag werden wir die MVVM-Architektur in Android verwenden und dabei LiveData und Data Binding kombinieren. LiveData erleichtert es, die Benutzeroberfläche (UI) automatisch zu aktualisieren, sobald sich Daten im ViewModel ändern. Wir zeigen dir, wie diese Technologien in einer einfachen Login-Anwendung zusammenarbeiten.

Einleitung

MVVM (Model-View-ViewModel) ist ein Architekturpattern, das in der Android-Entwicklung häufig genutzt wird, um eine saubere Trennung der Schichten in einer Anwendung zu gewährleisten. Dabei wird das Model für die Datenlogik und das ViewModel als Vermittler zwischen Model und View genutzt. Data Binding und LiveData machen das Arbeiten mit MVVM besonders effizient, da sie den Code vereinfachen und Fehlerquellen minimieren.

Was ist LiveData?

LiveData ist ein Container, der Daten hält und Änderungen daran beobachtet. Das Besondere an LiveData ist seine lebenszyklusbewusste Natur: Es wird nur dann aktualisiert, wenn die UI im Vordergrund aktiv ist. Dies reduziert Abstürze erheblich, da Updates an die UI nicht mehr ausgeführt werden, wenn die Activity oder das Fragment bereits zerstört wurde.

Projektstruktur und Abhängigkeiten

Um mit MVVM und LiveData zu starten, müssen wir zunächst die entsprechenden Abhängigkeiten in die build.gradle-Datei unseres Projekts hinzufügen:

Copy<br /> Code 


android {
    ...
    dataBinding {
        enabled = true
    }
    ...
}

dependencies {
    ...
    implementation 'android.arch.lifecycle:extensions:1.1.1'
    implementation 'com.android.support:design:28.0.0-beta01'
    ...
}

Diese Abhängigkeiten ermöglichen es uns, Data Binding und LiveData zu nutzen.

Model-Schicht

Das Model wird durch die User-Klasse dargestellt. Diese enthält die Validierungslogik für die Eingabefelder:

Copy<br /> Code 


public class User {
    private String mEmail;
    private String mPassword;

    public User(String email, String password) {
        mEmail = email;
        mPassword = password;
    }

    public String getEmail() {
        return mEmail == null ? "" : mEmail;
    }

    public String getPassword() {
        return mPassword == null ? "" : mPassword;
    }

    public boolean isEmailValid() {
        return Patterns.EMAIL_ADDRESS.matcher(getEmail()).matches();
    }

    public boolean isPasswordLengthGreaterThan5() {
        return getPassword().length() > 5;
    }
}

Layout mit Data Binding

Die XML-Datei activity_main.xml stellt die Benutzeroberfläche bereit und bindet das ViewModel:

Copy<br /> Code 


<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <data>
        <variable
            name="loginViewModel"
            type="com.example.androidmvvm.LoginViewModel" />
    </data>
    <ScrollView android:layout_width="match_parent" android:layout_height="match_parent">
        <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content">
            
            <android.support.design.widget.TextInputLayout android:layout_width="match_parent">
                <EditText android:id="@+id/inEmail" android:layout_width="match_parent"
                    android:hint="Email" android:text="@={loginViewModel.email}" />
            </android.support.design.widget.TextInputLayout>

            
            <android.support.design.widget.TextInputLayout android:layout_width="match_parent">
                <EditText android:id="@+id/inPassword" android:layout_width="match_parent"
                    android:hint="Passwort" android:text="@={loginViewModel.password}" />
            </android.support.design.widget.TextInputLayout>

            
            <Button android:id="@+id/button" android:layout_width="match_parent"
                android:text="LOGIN" android:onClick="@{()-> loginViewModel.onLoginClicked()}" />

            
            <ProgressBar android:id="@+id/progressBar" style="?android:attr/progressBarStyleLarge"
                android:visibility="@{loginViewModel.busy}" />
        </LinearLayout>
    </ScrollView>
</layout>

ViewModel

Im ViewModel implementieren wir die Logik, die mit dem UI-Thread interagiert:

Copy<br /> Code 


public class LoginViewModel extends ViewModel {
    public MutableLiveData<String> email = new MutableLiveData<>();
    public MutableLiveData<String> password = new MutableLiveData<>();
    public MutableLiveData<String> errorEmail = new MutableLiveData<>();
    public MutableLiveData<String> errorPassword = new MutableLiveData<>();
    private MutableLiveData<User> userMutableLiveData = new MutableLiveData<>();

    public LiveData<User> getUser() {
        return userMutableLiveData;
    }

    public void onLoginClicked() {
        // Setze die ProgressBar auf sichtbar
        new Handler().postDelayed(() -> {
            User user = new User(email.getValue(), password.getValue());
            if (!user.isEmailValid()) {
                errorEmail.setValue("Bitte eine gültige E-Mail eingeben");
            }
            if (!user.isPasswordLengthGreaterThan5()) {
                errorPassword.setValue("Das Passwort muss länger als 5 Zeichen sein");
            }
            userMutableLiveData.setValue(user);
        }, 3000);
    }
}

MainActivity

In der MainActivity beobachten wir die Änderungen am LiveData:

Copy<br /> Code 


public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ActivityMainBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
        LoginViewModel loginViewModel = ViewModelProviders.of(this).get(LoginViewModel.class);
        binding.setLoginViewModel(loginViewModel);
        binding.setLifecycleOwner(this);

        loginViewModel.getUser().observe(this, user -> {
            if (user != null) {
                Toast.makeText(this, "E-Mail: " + user.getEmail(), Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Zusammenfassung

In diesem Beitrag haben wir gezeigt, wie MVVM in Android mit LiveData und Data Binding implementiert werden kann. Durch die Verwendung dieser Technologien wird die Entwicklung einfacher und fehlerfreier, da der Code klar strukturiert und gut wartbar ist.

Starte jetzt deine kostenlose Testversion und erlebe nahtlose Cloud-Integration!

Entfalte das volle Potenzial deiner Android-Entwicklung mit unseren fortschrittlichen Cloud-Diensten. Egal ob du MVVM-Architekturen erstellst oder dynamische Benutzeroberflächen verwaltest – unsere Cloud-Lösungen ermöglichen es dir, schneller zu innovieren. Melde dich jetzt für deine kostenlose Testversion an und erlebe, wie einfach es ist, deine Apps in der Cloud zu integrieren und zu skalieren.

Try for free!

You might be interested in:

https://old.centron.de/en/glossary/server-2/
https://old.centron.de/en/glossary/query-2/