Smarthome App #2: Login-Bildschirm

Im letzten Teil des Tutorials habe ich dir erklärt, wie du in Android Studio ein Projekt erstellen und die ersten Aufgaben erledigen kannst. Im heutigen Tutorial wird der Login-Bildschirm der App designed und implementiert. Dazu startest du, falls nicht bereits geschehen, Android Studio und öffnest das Projekt über “File -> Open…” bzw. “File -> Open Recent”.

Dieses Tutorial gibt es auch als Video!

Den Login-Bildschirm designen

Als erstes wird das Layout des Login-Bildschirms definiert. Dazu wird die Datei mobile -> res -> layout -> activity_login.xml geöffnet und der Code mit folgendem Code ersetzt (wenn die Datei geöffnet ist, kannst du links unten zwischen Design- und Textansicht umschalten):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="de.smarthome_blogger.smarthome.LoginActivity"
android:background="@color/layoutBackground"
android:id="@+id/frame">
 
	<android.support.v7.widget.CardView
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_centerVertical="true"
	android:layout_margin="15dp"
	app:cardElevation="@dimen/cardViewElevation"
	app:cardCornerRadius="@dimen/cardViewCornerRadius"
	app:cardUseCompatPadding="true">
 
		<LinearLayout
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:orientation="vertical"
		android:padding="5dp">
		
			<ImageView
			android:layout_width="match_parent"
			android:layout_height="120dp"
			android:id="@+id/app_logo"
			android:layout_margin="10dp"
			android:src="@mipmap/ic_launcher"/>
			
			<EditText
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:inputType="textPersonName"
			android:hint="Nutzername"
			android:layout_marginBottom="5dp"
			android:id="@+id/username"/>
			
			<EditText
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:inputType="textPassword"
			android:hint="Passwort"
			android:layout_marginBottom="5dp"
			android:id="@+id/password"/>
			
			<EditText
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:inputType="textUri"
			android:hint="Server-IP"
			android:layout_marginBottom="5dp"
			android:id="@+id/server_ip"/>
			
			<CheckBox
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:text="Login-Daten speichern"
			android:id="@+id/save_login"
			android:gravity="center_horizontal|center_vertical"
			android:layout_marginBottom="5dp"
			android:checked="false"/>
			
			<RelativeLayout
			android:layout_width="match_parent"
			android:layout_height="wrap_content">
			
				<Button
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				style="@style/Widget.AppCompat.Button.Colored"
				android:background="@color/colorPrimary"
				android:textColor="@color/textColorLight"
				android:text="Login"
				android:layout_alignParentRight="true"
				android:id="@+id/login_button"/>
			
				<ProgressBar
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:indeterminate="true"
				android:layout_centerInParent="true"
				android:visibility="gone"
				android:id="@+id/loading_animation"/>
			
			</RelativeLayout>
		
		</LinearLayout>
	
	</android.support.v7.widget.CardView>
 
</RelativeLayout>

Du kannst dir ansehen, wie das Design momentan aussieht, indem du links unten den Design-Tab anklickst. Das Design sollte nun in etwa so aussehen, wie im folgenden Bild:

So sollte der Login-Bildschirm jetzt aussehen.

LoginActivity implementieren

Nachdem das Design des Login-Bildschirms definiert worden ist, wird als nächstes die Funktionalität implementiert. Öffne dazu die Datei mobile -> java -> de.smarthome_blogger.smarthome -> LoginActivity.java und füge über der Methode “protected void onCreate(Bundle savedInstanceState)” folgende Variablen ein:

private EditText usernameField, passwordField, serverIpField;
private Button loginButton;
private CheckBox saveLogin;
private View loadingAnimation;

Diese Variablen sind die Textfelder, Buttons und die Checkbox des Login-Bildschirms.

In der Methode “protected void onCreate()” fügst du anschließend unter der Zeile “setContentView(R.layout.activity_login);” den folgenden Code ein:

//Actionbar verstecken
getSupportActionBar().hide();
 
//Views deklarieren
usernameField = (EditText) findViewById(R.id.username);
passwordField = (EditText) findViewById(R.id.password);
serverIpField = (EditText) findViewById(R.id.server_ip);
 
loadingAnimation = findViewById(R.id.loading_animation);
 
loginButton = (Button) findViewById(R.id.login_button);
 
saveLogin = (CheckBox) findViewById(R.id.save_login);
 
//Dem Button eine Aktion zuweisen
loginButton.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
		String username = usernameField.getText().toString();
		String password = passwordField.getText().toString();
		String serverIp = serverIpField.getText().toString();
 
		//Eingaben auf Vollständigkeit prüfen
		if(username.equals("")){
			fehlermeldung("Bitte gib deinen Nutzernamen ein");
		}
		else if(password.equals("")){
			fehlermeldung("Bitte gib dein Passwort ein");
		}
		else if(serverIp.equals("")){
			fehlermeldung("Bitte gib die Adresse des Servers ein");
		}
		else{
			SaveData.setSaveLoginData(getApplicationContext(), saveLogin.isChecked());
 
			login(username, password, serverIp);
		}
	}
});
 
//Haken je nach gespeicherten Daten setzen oder nicht
saveLogin.setChecked(SaveData.getSaveLoginData(getApplicationContext()));
 
//Bei jeder Änderung neu speichren, ob Login-Daten gespeichert werden sollen
saveLogin.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {	
	@Override
	public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
		SaveData.setSaveLoginData(getApplicationContext(), isChecked);
	}
});
 
//Wenn Nutzerdaten vorhanden: automatisch einloggen
if(SaveData.getSaveLoginData(getApplicationContext())){
	String username = SaveData.getUsername(getApplicationContext());
	String password = SaveData.getPassword(getApplicationContext());
	String serverIp = SaveData.getServerIp(getApplicationContext());
 
	if(username != null && password != null && serverIp != null){
		//Textfelder mit gespeicherten Daten füllen
		usernameField.setText(username);
		passwordField.setText(password);
		serverIpField.setText(serverIp);
 
		saveLogin.setChecked(true);
 
		login(username, password, serverIp);
	}
}

Erklärung des Codes

Als erstes wird die sogenannte Actionbar (die Titelleiste der App) im Login-Bildschirm ausgeblendet. die UI-Komponenten initialisiert und ihnen die entsprechenden Funktionen (OnClickListener, OnCheckedChangeListener) zugewiesen. Als letztes wird mit einer if-Abfrage geprüft, ob Nutzerdaten vorhanden sind und ob beim letzten Login angegeben wurde, dass sich die App automatisch einloggen soll. Ist dies der Fall, versucht die App, sich mit den vorhandenen Nutzerdaten einzuloggen.

Als nächstes fügst du einfach den folgenden Code unter der Methode “onCreate()” ein:

/**
* Versucht den Nutzer einzuloggen
* @param username
* @param password
* @param serverIp
*/
public void login(final String username, final String password, final String serverIp){
	loadingAnimation.setVisibility(View.VISIBLE);
	
	Map<String, String> requestData = new HashMap<>();
	requestData.put("action", "getrooms");
	requestData.put("username", username);
	requestData.put("password", password);
	
	HTTPRequest.sendRequest(getApplicationContext(), requestData, serverIp, new HTTPRequest.HTTPRequestCallback() {
		@Override
		public void onRequestResult(String result) {
			loadingAnimation.setVisibility(View.GONE);
			
			if(result.equals("wrongdata")){
				fehlermeldung("Anmeldung nicht möglich! Bitte überprüfe deine Eingaben");
			}
			else if(result.equals("unknownuser")){
				fehlermeldung("Dieser Nutzer existiert nicht");
			}
			else{
				//gegebenenfalls Login-Daten speichern
				if(saveLogin.isChecked()){
				SaveData.setLoginData(getApplicationContext(), username, password);
				SaveData.setServerIp(getApplicationContext(), serverIp);
			}
			
			Intent intent = new Intent(LoginActivity.this, MainActivity.class);
			intent.putExtra(MainActivity.EXTRA_ROOMS, result);
			startActivity(intent);
			}
		}
		
		@Override
		public void onError(String msg) {
			loadingAnimation.setVisibility(View.GONE);
			fehlermeldung(msg);
		}
	});
}
 
/**
* Zeigt die übergebene Nachricht an
* @param msg
*/
public void fehlermeldung(String msg){
	Snackbar.make(findViewById(R.id.frame), msg, Snackbar.LENGTH_SHORT).show();
}

Erklärung des Codes

Die Methode “login()” versucht, sich mit den angegebenen Nutzerdaten auf dem Server einzuloggen. Bei Erfolg wird zur Main-Actvity (sozusagen das Hauptmenü der App) gewechselt und die zurückgegebenen Daten des Servers (in diesem Fall eine Liste der vorhandenen Räume, damit die Menüpunkte im Hauptmenü erstellt werden können) an die Main-Activity übergeben. Bei Scheitern der Verbindung wird eine Fehlermeldung ausgegeben.
Die Methode “fehlermeldung()” gibt lediglich den übergebenen Text aus.

SaveData anlegen & vorläufig implementieren

Nun muss noch die Klasse SaveData angelegt werden. Dazu klickst du mit der rechten Maustaste auf den Ordner “de.smarthome_blogger.smarthome” oder eine darin enthaltene Klasse und wählst “New -> Java class”. Dort gibst du nun als Namen “SaveData” ein. Alles andere lässt du unverändert und klickst “Ok”.

So legst du eine neue Klasse an.

Jetzt öffnet sich die Klasse und du kannst sie bearbeiten. Vorerst werden nur Platzhalter-Methoden definiert, die beispielsweise vordefinierte Nutzerdaten zurückgeben. Diese Nutzerdaten solltest du noch entsprechend anpassen, indem du den Rückgabewert der Methode “getServerIp” auf die IP-Adresse deines Raspberry und den Nutzernamen und das Passwort in den Methoden “getUsername” und “getPassword” änderst.
Den folgenden Code fügst du nun in die Klasse SaveData ein (unter der Zeile “public class SaveData{“):

public static String getUsername(Context context){
	return "Testnutzer";
}
 
public static String getPassword(Context context){
	return "password";
}
 
public static String getServerIp(Context context){
	return "192.168.178.xyz";
}
 
public static void setLoginData(Context context, String username, String password){}
 
public static void setServerIp(Context context, String serverIp){}
 
public static void setSaveLoginData(Context context, boolean saveLogin){}
 
public static boolean getSaveLoginData(Context context){
	return true;
}

Der Login-Bildschirm ist vorerst fertig, das Design wird jedoch eventuell noch etwas überarbeitet. Im nächsten Teil der Tutorials kann dann mit dem Hauptmenü der APP begonnen werden.

Falls du Fragen oder Probleme hast, kannst du mir gerne einen Kommentar hinterlassen.