Views im ConstraintLayout mit Constraint-Ketten anordnen – Tutorial zu Android

In diesem Video zeige ich Ihnen nochmal im Detail, wie das ConstraintLayout genau funktioniert. Ja, wir haben es schon gelernt, dass es hier Ankerpunkte gibt, die wir setzen müssen. Die müssen wir natürlich nicht immer an allen vier Seiten machen, sondern die können wir uns so zurechtbiegen, wie wir das möchten. Wir sehen jetzt hier zum Beispiel, dass unser EditText-Feld hier oben an das entsprechende Feld mit Welcome dear user an das TextView gekoppelt ist. Wir sehen nun, auch unten haben wir jetzt hier kein Constraint mehr. Wenn ich hier jetzt nochmal setze, dann haben wir jetzt hier wieder unseren gewohnten Abstand. Da wird das hier minus den Margin, wird dann der Abstand gesetzt. Was ist jetzt aber, wenn ich nach oben hin diesen Constraint denn wegnehme? Da ist es oben nicht mehr geankert, das heißt, das Ganze rutscht automatisch nach unten. Was ist, wenn ich das jetzt oben ankere und unten nicht wegnehme? Dann sehen wir, dass sich die zwei Felder überlagern. Die Welcome-Message, unsere TextView steht vor dem EditText für den Username. Wenn ich jetzt hier unten den Anker wegnehme, dann rutscht mein Feld nach oben. Es ist an drei Punkten geankert - oben, links und rechts, und wenn ich jetzt nun den rechten Anker noch wegnehme, ist es auch gar kein Problem. Dann fasst er dann halt hier an dieser Stelle das EditText-Feld nochmal zusammen, nutzt die eingestellten Abstände, alles gut. Wie ist das, wenn ich jetzt aber mehrere Felder habe? Gehen wir einmal davon aus, ich möchte jetzt noch ein Passwortfeld mit dazu haben. Wie schaut das aus? Zuerst einmal setze ich mir jetzt hier nochmal rein aus Style-Gründen einfach nochmal das Feld unten drunter, das Eingabefeld unter Welcome dear user. Und jetzt möchte ich noch ein zweites Feld haben. Jetzt möchte ich aber nicht, dass dieses zweite Feld einfach nur unten drunter steht, dieses Passwortfeld, sondern nebendran. Unten drunter wäre hier kein Problem. Ich ziehe mir das hier hin, gebe dem Ding einen Namen txtUserPw und ankere das jetzt hier einfach nochmal an dieser Stelle, ankere das links und rechts oben und hier entsprechend nach unten. Und dann kann ich in der Breite jetzt auch nochmal sagen: Okay, setzen wir bitte auf 0 dp. Dann wird das komplett gestretcht. Das ist dieselbe Übung, die wir vorher auch gemacht haben. So, wie ist das aber, wenn ich entsprechend damit arbeiten möchte, wenn ich jetzt beide Felder nebeneinander stellen möchte. Dazu gehe ich jetzt erst mal hin und setze bei beiden hier nochmal die Eigenschaft auf wrap_content, damit die generell mal ein bisschen kleiner werden. Und hier bei meinem Passwortfeld, da steht natürlich jetzt im Moment noch kein Hint drin. Das können wir gern noch gerade definieren, damit wir auch sehen, was da entsprechend passiert, damit wir die Felder auseinanderhalten können, einfach hier drauf add New String Resource, new string, strUserPwHint, Password, zack, und dann setzen wir auch natürlich hier, um das ein bisschen gleich zu haben, die Gravity dann nochmal auf center, und dann ist das alles schön in der Mitte. So, nochmal zurück zu der Ausrichtung. Jetzt können wir die Felder auseinanderhalten. Wir sehen jetzt hier, da haben wir noch einen Constraint nach links, und ich möchte jetzt, dass dieser Constraint von oben verschwindet und ich möchte ganz gerne, dass der Constraint nach von links auch verschwindet. Ich möchte nämlich jetzt dafür Sorge tragen, dass der Constraint, den ich jetzt hier anordne, dass diese zwei zusammenstehen - Passwort und Username, das heißt, ich markiere die mir jetzt hier und dann drücke ich hier auf die Oberfläche und sage Rechtsklick > Chains > Create Horizontal Chain. Jetzt sind die horizontal entsprechend hier ausgerichtet. Was ich jetzt hier haben möchte, ist, wenn ich jetzt hier unten diesen Ankerpunkt wegnehme, ich kann jetzt beide hier, wenn ich möchte, als eine Einheit verschieben und kann aber auch beide jetzt hier oben ankern, wenn ich denn möchte. Wir sehen, hier ist immer noch so ein Ankerpunkt, das heißt, ich kann das nach oben ziehen, und da sehen wir auch, das ist nach oben gemacht. Diese beiden sind jetzt aber hier zusammengefasst. Natürlich kann ich auch hier, wenn ich dann möchte, meinen weiteren Margin setzen. Jetzt geht es aber nicht nur horizontal, ich kann das alles noch schön anpassen, sondern es geht natürlich auch vertikal. Ich drücke jetzt noch die Zurück-Taste an dieser Stelle. Sie sehen, Stück für Stück stellt sich da nochmal so ein bisschen der Ausgangszustand wieder her, den wir vorher hatten. Nochmal Strg+Z, so. Ich kann jetzt diese beiden auch entsprechend vertikal zusammenführen. Auch da nochmal Rechtsklick und einfach hier auf Chains > Create vertical Chain. Da kann ich jetzt aber auch hier die Welcome-Message mit dazunehmen, also muss ich die Welcome-Message hier nicht mehr bewusst ankern, sondern ich gehe jetzt einfach hin und markiere alle Felder hier und sage Rechtsklick > Create vertical Chain, und jetzt sind die alle zusammengefasst, zusammengekettet, das heißt, ich kann die an dieser Stelle dann auch entsprechend dennoch immer einzeln bearbeiten, rechts, links, hoch, runter. Rechts, links, kann ich sie ausrichten, wie ich möchte, aber ich kann natürlich auch hier dann wieder hingehen und sagen: Okay, pass mal auf, ich möchte ganz gerne alle drei auf einmal bearbeiten. Und somit kann ich Oberflächen wie im ConstraintLayout zusammenbauen, so wie ich das tatsächlich auch benötige. In diesem Video habe ich Ihnen nochmal die konkrete Ausrichtung von Widgets im ConstraintLayout nähergebracht. Sie haben die Constraint-Ketten kennengelernt, Sie wissen, wie die Constraints funktionieren, wie Sie sich verhalten, wenn wir verschiedene Constraints wegnehmen und dass wir definitiv Constraints setzen müssen.