Constraint Layout - Views werden nicht richtig angeordnet

  • Antworten:4
2
FastFertig1337
  • Forum-Beiträge: 3

11.02.2019, 11:11:08 via Website

Hallo,

ich versuche mich seit 2 tagen mit Android Studio und wollte ein Registrations Formular als App erstellen, ich habe schon einige Erfahrungen mit Java, css, html und etwas js, meine Probleme mit den Layout hatte ich schon damals bei den GUIs in Eclipse daher habe ich sie bis her immer gemieden. Jetzt hab ich aber wieder Probleme, denn wenn ich das design über das Palette menü in der Prewiev erstelle steht erstmal man müsse das Layout quasi bestätigen:

"This view is not constrained vertically: at runtime it will jump to the top unless you add a vertical constraint more.."

Normalerweise ist die width 225dp und die height 30dp aber nachdem ich wie in anderen foren vorgeschrieben infern constrain angeklickt habe wandelt sich alles in 0 dp um aber die werte bleiben bei den oberen feldern immernoch bestehen und die unteren Felder verschieben sich wie auf dem Bildern zu sehen.

Ich hab auch bisschen manuell rumprobiert und es ist dadurch besser geworden, aber ich bin kein fan vom zufall und glück, kann mir einer
erklären wie dieses Layout funktioniert oder welches Layout das einfachste ist mit dem ich arbeiten kann.

Über das constraint Layout hab ich mich schon informiert aber zu den verschiebungen finde ich nix.

image

Hier die XML datei:

android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:layout_editor_absoluteY="56dp"
tools:showIn="@layout/activity_main">

<Button
    android:id="@+id/registrationButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="156dp"
    android:layout_marginBottom="176dp"
    android:onClick="registrationClick"
    android:text="Registrieren"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/birthYearField"
    app:layout_constraintVertical_bias="1.0" />

<EditText
    android:id="@+id/userField"
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:layout_marginStart="28dp"
    android:layout_marginTop="100dp"
    android:layout_marginEnd="1dp"
    android:background="@color/design_default_color_primary"
    android:ems="10"
    android:inputType="textPersonName"
    android:text=""
    app:layout_constraintEnd_toStartOf="@+id/userFieldCheck"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<EditText
    android:id="@+id/passwordField1"
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:layout_marginStart="28dp"
    android:layout_marginTop="40dp"
    android:layout_marginEnd="1dp"
    android:background="@color/design_default_color_primary"
    android:ems="10"
    android:inputType="textPassword"
    android:text=""
    app:layout_constraintEnd_toStartOf="@+id/passwordFieldCheck1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/userField" />


<TextView
    android:id="@+id/textView2"
    android:layout_width="168dp"
    android:layout_height="22dp"
    android:layout_marginStart="1dp"
    android:layout_marginTop="73dp"
    android:layout_marginBottom="74dp"
    android:text="Benutzername"
    app:layout_constraintBottom_toBottomOf="@+id/textView3"
    app:layout_constraintStart_toStartOf="@+id/userField"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/textView3"
    android:layout_width="136dp"
    android:layout_height="19dp"
    android:layout_marginTop="20dp"
    android:layout_marginBottom="31dp"
    android:text="Passwort"
    app:layout_constraintBottom_toBottomOf="@+id/passwordField1"
    app:layout_constraintStart_toStartOf="@+id/passwordField1"
    app:layout_constraintTop_toBottomOf="@+id/userField" />

<TextView
    android:id="@+id/textView4"
    android:layout_width="149dp"
    android:layout_height="20dp"
    android:layout_marginTop="43dp"
    android:layout_marginBottom="43dp"
    android:text="Passwort wiederholen"
    app:layout_constraintBottom_toTopOf="@+id/textView5"
    app:layout_constraintStart_toStartOf="@+id/passwordField2"
    app:layout_constraintTop_toTopOf="@+id/passwordField1" />

<EditText
    android:id="@+id/passwordField2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="29dp"
    android:layout_marginTop="233dp"
    android:layout_marginBottom="94dp"
    android:background="@color/design_default_color_primary"
    android:ems="10"
    android:inputType="textPassword"
    app:layout_constraintBottom_toTopOf="@+id/birthFieldCheck"
    app:layout_constraintEnd_toStartOf="@+id/passwordFieldCheck2"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="1.0" />

<EditText
    android:id="@+id/emailField"
    android:layout_width="226dp"
    android:layout_height="28dp"
    android:layout_marginStart="28dp"
    android:layout_marginTop="32dp"
    android:background="@color/design_default_color_primary"
    android:ems="10"
    android:inputType="textEmailAddress"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/passwordField2" />

<TextView
    android:id="@+id/textView5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="12dp"
    android:text="Email"
    app:layout_constraintStart_toStartOf="@+id/emailField"
    app:layout_constraintTop_toBottomOf="@+id/passwordField2" />


<CheckBox
    android:id="@+id/p.k.Check"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="44dp"
    android:layout_marginBottom="232dp"
    android:checked="false"
    android:text="P.K."
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<CheckBox
    android:id="@+id/userFieldCheck"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="125dp"
    app:layout_constraintBaseline_toBaselineOf="@+id/userField"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/userField" />

<CheckBox
    android:id="@+id/passwordFieldCheck1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="125dp"
    android:clickable="true"
    app:layout_constraintBaseline_toBaselineOf="@+id/passwordField1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/passwordField1" />

<CheckBox
    android:id="@+id/passwordFieldCheck2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="31dp"
    android:layout_marginEnd="125dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/passwordField2"
    app:layout_constraintTop_toBottomOf="@+id/passwordFieldCheck1" />

<CheckBox
    android:id="@+id/emailFieldCheck"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="28dp"
    android:layout_marginEnd="1dp"
    app:layout_constraintEnd_toEndOf="@+id/passwordFieldCheck2"
    app:layout_constraintTop_toBottomOf="@+id/passwordFieldCheck2" />

<CheckBox
    android:id="@+id/birthFieldCheck"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="34dp"
    android:layout_marginEnd="126dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/emailFieldCheck" />

<TextView
    android:id="@+id/registrationView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:text="Registration"
    android:textColor="@color/colorAccent"
    android:textSize="30dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/birthField"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    android:text="Geburtstag"
    app:layout_constraintStart_toStartOf="@+id/birthDayField"
    app:layout_constraintTop_toBottomOf="@+id/emailField" />

<EditText
    android:id="@+id/birthDayField"
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:layout_marginStart="28dp"
    android:layout_marginTop="62dp"
    android:layout_marginEnd="90dp"
    android:background="@color/design_default_color_primary"
    android:ems="10"
    android:inputType="date"
    app:layout_constraintEnd_toStartOf="@+id/birthYearField"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/emailField" />

<EditText
    android:id="@+id/birthMonthField"
    android:layout_width="50dp"
    android:layout_height="30dp"
    android:layout_marginTop="36dp"
    android:layout_marginEnd="20dp"
    android:background="@color/design_default_color_primary"
    android:ems="10"
    android:inputType="date"
    app:layout_constraintEnd_toStartOf="@+id/birthYearField"
    app:layout_constraintTop_toBottomOf="@+id/emailField" />

<EditText
    android:id="@+id/birthYearField"
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:layout_marginTop="36dp"
    android:layout_marginEnd="158dp"
    android:background="@color/design_default_color_primary"
    android:ems="10"
    android:inputType="date"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/birthDayField"
    app:layout_constraintTop_toBottomOf="@+id/emailFieldCheck" />

— geändert am 11.02.2019, 12:56:59 durch Moderator

Kommentieren
swa00 50
swa00
  • Forum-Beiträge: 3.704

11.02.2019, 11:28:21 via Website

Hallo,

Tipp :

grundsätzlich vermeide ich grundsätzlich Constraint und nehme das Altbewährte a la Relative /Linear.
Damit umgehst du (vermeidlichen) Automatismus und weist wirklich , was du selbst getan hast :-)

— geändert am 11.02.2019, 11:31:01

Liebe Grüße - Stefan
[ App - Entwicklung ]

Hilfreich?
Kommentieren
37
Jokel
  • Forum-Beiträge: 1.529

11.02.2019, 12:05:04 via Website

Hallo
Wo ist jetzt genau das Problem.
Das der Button sich verschiebt ligt daran das du die Ankerpukte richtigerweise unten, links, rechts am Layout ausgerichtet hast. Aber oben leider auch am Layout Rand und nicht an einen einer View vor dem Button.

Das mit der weite 0 ist meiner Meinung nicht so sinnvoll das ist nichts anderes als match_parent im costrain. Du regegest somit die Größe über das margin.

Wenn du ein genauere Aufteilung willst dann benutze doch hilfslinien die du am beste nach Prozent ein teilst. Und dann deine view daran ausrichtet.

Also eine senkrecht liene bei 80% etwa deine Edittext richtet du recht ander line aus die checkbox links an der liene.

Fur deine Button vielleicht auch eine Linie. Horizontal.

Hilfreich?
Kommentieren
37
Jokel
  • Forum-Beiträge: 1.529

11.02.2019, 19:40:58 via Website

image

<?xml version="1.0" encoding="utf-8"?>

xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="@layout/activity_main">

android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:layout_editor_absoluteY="56dp"
tools:showIn="@layout/activity_main">

<Button
    android:id="@+id/registrationButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="24dp"
    android:layout_marginBottom="16dp"
    android:onClick="registrationClick"
    android:text="Registrieren"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.245"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/p.k.Check"
    app:layout_constraintVertical_bias="0.491" />

<EditText
    android:id="@+id/userField"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="28dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="16dp"
    android:background="@color/design_default_color_primary"
    android:ems="10"
    android:inputType="textPersonName"
    android:text=""
    app:layout_constraintEnd_toStartOf="@+id/guideline3"
    app:layout_constraintHorizontal_bias="0.166"
    app:layout_constraintHorizontal_chainStyle="spread_inside"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView2" />

<EditText
    android:id="@+id/passwordField1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="28dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="16dp"
    android:background="@color/design_default_color_primary"
    android:ems="10"
    android:inputType="textPassword"
    android:text=""
    app:layout_constraintEnd_toStartOf="@+id/guideline3"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView3" />


<TextView
    android:id="@+id/textView2"
    android:layout_width="153dp"
    android:layout_height="22dp"
    android:layout_marginStart="28dp"
    android:layout_marginTop="32dp"
    android:layout_marginEnd="8dp"
    android:text="Benutzername"
    app:layout_constraintEnd_toStartOf="@+id/guideline3"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/registrationView" />

<TextView
    android:id="@+id/textView3"
    android:layout_width="149dp"
    android:layout_height="16dp"
    android:layout_marginStart="28dp"
    android:layout_marginTop="24dp"
    android:layout_marginEnd="8dp"
    android:text="Passwort"
    app:layout_constraintEnd_toStartOf="@+id/guideline3"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/userField" />

<TextView
    android:id="@+id/textView4"
    android:layout_width="149dp"
    android:layout_height="20dp"
    android:layout_marginStart="28dp"
    android:layout_marginTop="24dp"
    android:layout_marginEnd="8dp"
    android:text="Passwort wiederholen"
    app:layout_constraintEnd_toStartOf="@+id/guideline3"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/passwordField1" />

<EditText
    android:id="@+id/passwordField2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="28dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="16dp"
    android:background="@color/design_default_color_primary"
    android:ems="10"
    android:inputType="textPassword"
    app:layout_constraintEnd_toStartOf="@+id/guideline3"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView4" />

<EditText
    android:id="@+id/emailField"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="28dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="16dp"
    android:background="@color/design_default_color_primary"
    android:ems="10"
    android:inputType="textEmailAddress"
    app:layout_constraintEnd_toStartOf="@+id/guideline3"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView5" />

<TextView
    android:id="@+id/textView5"
    android:layout_width="145dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="28dp"
    android:layout_marginTop="24dp"
    android:layout_marginEnd="8dp"
    android:text="Email"
    app:layout_constraintEnd_toStartOf="@+id/guideline3"
    app:layout_constraintHorizontal_bias="0.008"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/passwordField2" />


<CheckBox
    android:id="@+id/p.k.Check"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="28dp"
    android:layout_marginTop="32dp"
    android:layout_marginEnd="8dp"
    android:checked="false"
    android:text="P.K."
    app:layout_constraintEnd_toStartOf="@+id/guideline3"
    app:layout_constraintHorizontal_bias="0.017"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/birthDayField" />

<CheckBox
    android:id="@+id/userFieldCheck"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="16dp"
    android:clickable="true"
    app:layout_constraintBottom_toBottomOf="@+id/userField"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@+id/guideline3"
    app:layout_constraintTop_toTopOf="@+id/userField" />

<CheckBox
    android:id="@+id/passwordFieldCheck1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="16dp"
    android:clickable="true"
    app:layout_constraintBottom_toBottomOf="@+id/passwordField1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@+id/guideline3"
    app:layout_constraintTop_toTopOf="@+id/passwordField1" />

<CheckBox
    android:id="@+id/passwordFieldCheck2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="16dp"
    app:layout_constraintBottom_toBottomOf="@+id/passwordField2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@+id/guideline3"
    app:layout_constraintTop_toTopOf="@+id/passwordField2" />

<CheckBox
    android:id="@+id/emailFieldCheck"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="16dp"
    app:layout_constraintBottom_toBottomOf="@+id/emailField"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@+id/guideline3"
    app:layout_constraintTop_toTopOf="@+id/emailField" />

<CheckBox
    android:id="@+id/birthFieldCheck"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="16dp"
    app:layout_constraintBottom_toBottomOf="@+id/birthDayField"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@+id/guideline3"
    app:layout_constraintTop_toTopOf="@+id/birthDayField" />

<TextView
    android:id="@+id/registrationView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="28dp"
    android:layout_marginTop="16dp"
    android:text="Registration"
    android:textColor="@color/colorAccent"
    android:textSize="30dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/birthField"
    android:layout_width="142dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="28dp"
    android:layout_marginTop="24dp"
    android:layout_marginEnd="8dp"
    android:text="Geburtstag"
    app:layout_constraintEnd_toStartOf="@+id/guideline3"
    app:layout_constraintHorizontal_bias="0.014"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/emailField" />

<EditText
    android:id="@+id/birthDayField"
    android:layout_width="71dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="28dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:background="@color/design_default_color_primary"
    android:ems="10"
    android:inputType="date"
    app:layout_constraintEnd_toStartOf="@+id/birthMonthField"
    app:layout_constraintHorizontal_bias="0.06"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/birthField" />

<EditText
    android:id="@+id/birthMonthField"
    android:layout_width="70dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="40dp"
    android:background="@color/design_default_color_primary"
    android:ems="10"
    android:inputType="date"
    app:layout_constraintEnd_toStartOf="@+id/birthYearField"
    app:layout_constraintTop_toBottomOf="@+id/birthField" />

<EditText
    android:id="@+id/birthYearField"
    android:layout_width="70dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="16dp"
    android:background="@color/design_default_color_primary"
    android:ems="10"
    android:inputType="date"
    app:layout_constraintEnd_toStartOf="@+id/guideline3"
    app:layout_constraintTop_toBottomOf="@+id/birthField" />

<android.support.constraint.Guideline
    android:id="@+id/guideline3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.79" />

Hilfreich?
Kommentieren
2
FastFertig1337
  • Forum-Beiträge: 3

13.02.2019, 15:35:08 via Website

Besten dank. Habs jetzt verstanden.

Hilfreich?
Kommentieren