Макет ограничения — Как НЕ использовать цепочки для соединения всех представлений

#android-constraintlayout

#android-constraintlayout

Вопрос:

Я новичок в Android Studio. Я только что создал простой проект, используя макет ограничения для дизайна.

Тем не менее, я использую цепочки для соединения всех представлений вместе, и это выглядит для меня очень странно, но я не знаю, как использовать другие функции, такие как guidelines baiи т.д. Для подключения представлений. Я уже прочитал официальную страницу Android или другие страницы в Интернете, чтобы попытаться понять концепции каждой функции, но я не знаю, как применить их на практике. Использование.

Мы будем очень признательны, если кто-нибудь сможет внести изменения в коды в activity_main.xml файл, использующий профессиональный код проектирования вместо простого использования цепочек для соединения всех представлений от начала до конца.

Большое спасибо!!!!

Вот мой код:https://github.com/marco-c1/PlanetEarthQuiz

 <?xml version="1.0" encoding="utf-8"?>
<ScrollView 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/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <Button
        android:id="@ id/button4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:onClick="submit"
        android:text="@string/submit"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@ id/question10Spinner"
        app:layout_constraintStart_toStartOf="@ id/editText_Question10" />

    <EditText
        android:id="@ id/name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:ems="10"
        android:hint="@string/name"
        android:inputType="textPersonName"
        app:layout_constraintBottom_toTopOf="@ id/earth_photo"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@ id/earth_photo"
        android:layout_width="0dp"
        android:layout_height="173dp"
        android:layout_marginTop="16dp"
        android:scaleType="centerInside"
        app:layout_constraintBottom_toTopOf="@ id/question1"
        app:layout_constraintEnd_toEndOf="@ id/name"
        app:layout_constraintStart_toStartOf="@ id/name"
        app:layout_constraintTop_toBottomOf="@ id/name"
        app:srcCompat="@drawable/earth_photo" />

    <TextView
        android:id="@ id/question1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="@string/question1"
        android:textSize="18sp"
        app:layout_constraintBottom_toTopOf="@ id/question1RadioButton"
        app:layout_constraintEnd_toEndOf="@ id/earth_photo"
        app:layout_constraintStart_toStartOf="@ id/earth_photo"
        app:layout_constraintTop_toBottomOf="@ id/earth_photo"
        android:textColor="#0D47A1"/>

    <RadioGroup
        android:id="@ id/question1RadioButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:orientation="horizontal"
        app:layout_constraintBottom_toTopOf="@ id/question2"
        app:layout_constraintEnd_toEndOf="@ id/question1"
        app:layout_constraintStart_toStartOf="@ id/question1"
        app:layout_constraintTop_toBottomOf="@ id/question1">

        <RadioButton
            android:id="@ id/yes_Q1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/yes"
            tools:layout_editor_absoluteX="35dp"
            tools:layout_editor_absoluteY="702dp" />

        <RadioButton
            android:id="@ id/no_Q1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/no" />
    </RadioGroup>

    <TextView
        android:id="@ id/question2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="@string/question2"
        android:textColor="#0D47A1"
        android:textSize="18sp"
        app:layout_constraintBottom_toTopOf="@ id/question2RadioButton"
        app:layout_constraintEnd_toEndOf="@ id/question1RadioButton"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="@ id/question1RadioButton"
        app:layout_constraintTop_toBottomOf="@ id/question1RadioButton" />

    <RadioGroup
        android:id="@ id/question2RadioButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:orientation="horizontal"
        app:layout_constraintBottom_toTopOf="@ id/question3"
        app:layout_constraintEnd_toEndOf="@ id/question2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="@ id/question2"
        app:layout_constraintTop_toBottomOf="@ id/question2">

        <RadioButton
            android:id="@ id/yes_Q2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="@string/yes" />

        <RadioButton
            android:id="@ id/no_Q2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="@string/no"
            tools:layout_editor_absoluteX="249dp"
            tools:layout_editor_absoluteY="530dp" />

    </RadioGroup>

    <TextView
        android:id="@ id/question3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="@string/question3"
        android:textColor="#0D47A1"
        android:textSize="18sp"
        app:layout_constraintBottom_toTopOf="@ id/question3RadioButton"
        app:layout_constraintEnd_toEndOf="@ id/question2RadioButton"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="@ id/question2RadioButton"
        app:layout_constraintTop_toBottomOf="@ id/question2RadioButton" />

    <RadioGroup
        android:id="@ id/question3RadioButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:orientation="horizontal"
        app:layout_constraintBottom_toTopOf="@ id/question4"
        app:layout_constraintEnd_toEndOf="@ id/question3"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="@ id/question3"
        app:layout_constraintTop_toBottomOf="@ id/question3">

        <RadioButton
            android:id="@ id/yes_Q3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/yes" />

        <RadioButton
            android:id="@ id/no_Q3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/no" />
    </RadioGroup>

    <TextView
        android:id="@ id/question4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="@string/question4"
        android:textColor="#0D47A1"
        android:textSize="18sp"
        app:layout_constraintBottom_toTopOf="@ id/editText_Question4"
        app:layout_constraintEnd_toEndOf="@ id/question3RadioButton"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="@ id/question3RadioButton"
        app:layout_constraintTop_toBottomOf="@ id/question3RadioButton" />

    <EditText
        android:id="@ id/editText_Question4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:ems="10"
        android:hint="@string/hintForAnswer"
        android:inputType="textShortMessage"
        android:singleLine="false"
        app:layout_constraintBottom_toTopOf="@ id/question5"
        app:layout_constraintEnd_toEndOf="@ id/question4"
        app:layout_constraintStart_toStartOf="@ id/question4"
        app:layout_constraintTop_toBottomOf="@ id/question4" />

    <TextView
        android:id="@ id/question5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="@string/question5"
        android:textColor="#0D47A1"
        android:textSize="18sp"
        app:layout_constraintBottom_toTopOf="@ id/editText_Question5"
        app:layout_constraintEnd_toEndOf="@ id/editText_Question4"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="@ id/editText_Question4"
        app:layout_constraintTop_toBottomOf="@ id/editText_Question4" />

    <EditText
        android:id="@ id/editText_Question5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:hint="@string/hintForAnswer"
        android:inputType="textShortMessage"
        android:textSize="18sp"
        app:layout_constraintBottom_toTopOf="@ id/Question6"
        app:layout_constraintEnd_toEndOf="@ id/question5"
        app:layout_constraintStart_toStartOf="@ id/question5"
        app:layout_constraintTop_toBottomOf="@ id/question5" />

    <TextView
        android:id="@ id/Question6"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="@string/question6"
        android:textColor="#0D47A1"
        android:textSize="18sp"
        app:layout_constraintBottom_toTopOf="@ id/question6RadioGroup"
        app:layout_constraintEnd_toEndOf="@ id/editText_Question5"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="@ id/editText_Question5"
        app:layout_constraintTop_toBottomOf="@ id/editText_Question5" />

    <RadioGroup
        android:id="@ id/question6RadioGroup"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_weight="1"
        android:orientation="horizontal"
        app:layout_constraintBottom_toTopOf="@ id/question7"
        app:layout_constraintEnd_toEndOf="@ id/Question6"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="@ id/Question6"
        app:layout_constraintTop_toBottomOf="@ id/Question6">

        <RadioButton
            android:id="@ id/radioButton4"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="@string/question6RadioButton"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@ id/earth_photo" />

        <RadioButton
            android:id="@ id/radioButton3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="@string/question6SecondRadioButton" />

        <RadioButton
            android:id="@ id/radioButton2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="@string/question6ThirdRadioButton"
            app:layout_constraintEnd_toStartOf="@ id/radioButton1"
            app:layout_constraintTop_toBottomOf="@ id/earth_photo" />

        <RadioButton
            android:id="@ id/radioButton1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginStart="8dp"
            android:layout_marginLeft="8dp"
            android:layout_weight="1"
            android:text="@string/question6FourthRadioButton"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@ id/earth_photo" />
    </RadioGroup>

    <TextView
        android:id="@ id/question7"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="@string/question7"
        android:textColor="#0D47A1"
        android:textSize="18sp"
        app:layout_constraintBottom_toTopOf="@ id/question7Spinner"
        app:layout_constraintEnd_toEndOf="@ id/question6RadioGroup"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="@ id/question6RadioGroup"
        app:layout_constraintTop_toBottomOf="@ id/question6RadioGroup" />

    <Spinner
        android:id="@ id/question7Spinner"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:dropDownWidth="wrap_content"
        android:spinnerMode="dropdown"
        app:layout_constraintBottom_toTopOf="@ id/question8"
        app:layout_constraintEnd_toEndOf="@ id/question7"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="@ id/question7"
        app:layout_constraintTop_toBottomOf="@ id/question7" />

    <TextView
        android:id="@ id/question8"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="@string/question8"
        android:textColor="#0D47A1"
        android:textSize="18sp"
        app:layout_constraintBottom_toTopOf="@ id/question8Hint"
        app:layout_constraintEnd_toEndOf="@ id/question7Spinner"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="@ id/question7Spinner"
        app:layout_constraintTop_toBottomOf="@ id/question7Spinner" />

    <TextView
        android:id="@ id/question8Hint"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="@string/hintForQuestion8"
        android:textColor="#0D47A1"
        app:layout_constraintBottom_toTopOf="@ id/water"
        app:layout_constraintEnd_toEndOf="@ id/question8"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="@ id/question8"
        app:layout_constraintTop_toBottomOf="@ id/question8" />

    <CheckBox
        android:id="@ id/oxygen"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/oxygen"
        app:layout_constraintBaseline_toBaselineOf="@ id/fire"
        app:layout_constraintEnd_toStartOf="@ id/fire"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="@ id/question8Hint" />

    <CheckBox
        android:id="@ id/fire"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/fire"
        app:layout_constraintBaseline_toBaselineOf="@ id/water"
        app:layout_constraintEnd_toStartOf="@ id/water"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@ id/oxygen" />

    <CheckBox
        android:id="@ id/water"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/water"
        app:layout_constraintBottom_toTopOf="@ id/question9"
        app:layout_constraintEnd_toStartOf="@ id/sunlight"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@ id/fire"
        app:layout_constraintTop_toBottomOf="@ id/question8Hint" />

    <CheckBox
        android:id="@ id/sunlight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/sunlight"
        app:layout_constraintBaseline_toBaselineOf="@ id/water"
        app:layout_constraintEnd_toEndOf="@ id/question8Hint"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@ id/water" />

    <TextView
        android:id="@ id/question9"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="@string/question9"
        android:textColor="#0D47A1"
        android:textSize="18sp"
        app:layout_constraintBottom_toTopOf="@ id/iron"
        app:layout_constraintStart_toStartOf="@ id/oxygen"
        app:layout_constraintTop_toBottomOf="@ id/oxygen" />

    <CheckBox
        android:id="@ id/francium"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/francium"
        app:layout_constraintBaseline_toBaselineOf="@ id/checkBox5"
        app:layout_constraintEnd_toStartOf="@ id/checkBox5"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="@ id/question9" />

    <CheckBox
        android:id="@ id/checkBox5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/oxygen"
        app:layout_constraintBaseline_toBaselineOf="@ id/iron"
        app:layout_constraintEnd_toStartOf="@ id/iron"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@ id/francium" />

    <CheckBox
        android:id="@ id/iron"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="@string/iron"
        app:layout_constraintEnd_toStartOf="@ id/silicon"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@ id/checkBox5"
        app:layout_constraintTop_toBottomOf="@ id/question9" />

    <CheckBox
        android:id="@ id/silicon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/silicon"
        app:layout_constraintBaseline_toBaselineOf="@ id/iron"
        app:layout_constraintEnd_toEndOf="@ id/sunlight"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@ id/iron" />

    <TextView
        android:id="@ id/question10"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="@string/question10"
        android:textColor="#0D47A1"
        android:textSize="18sp"
        app:layout_constraintBottom_toTopOf="@ id/editText_Question10"
        app:layout_constraintEnd_toEndOf="@ id/silicon"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="@ id/francium"
        app:layout_constraintTop_toBottomOf="@ id/checkBox5"
        app:layout_constraintVertical_chainStyle="packed" />

    <EditText
        android:id="@ id/editText_Question10"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="64dp"
        android:ems="10"
        android:hint="@string/hintForQuestion10"
        android:inputType="number"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@ id/question10Spinner"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toStartOf="@ id/question10"
        app:layout_constraintTop_toBottomOf="@ id/question10" />

    <Spinner
        android:id="@ id/question10Spinner"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:dropDownWidth="wrap_content"
        android:spinnerMode="dropdown"
        app:layout_constraintBottom_toBottomOf="@ id/editText_Question10"
        app:layout_constraintEnd_toEndOf="@ id/question10"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_weight="1.1"
        app:layout_constraintStart_toEndOf="@ id/editText_Question10"
        app:layout_constraintTop_toTopOf="@ id/editText_Question10" />

</android.support.constraint.ConstraintLayout>
</ScrollView>
  

Ответ №1:

Все представления в вашем XML просто расположены одно под другим, поэтому вы можете использовать LinearLayout вместо ConstraintLayout .

замените эту часть

 <android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
             <!-- views-->
</android.support.constraint.ConstraintLayout>
  

с

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
             <!-- views-->
</LinearLayout>
  

затем удалите все атрибуты компоновки ограничений ( app:layout_constraintXXXXXXXXXXXX ).
и замените каждый android:layout_width="0dp" на android:layout_width="match_parent" .

Комментарии:

1. Спасибо. Как насчет продолжения использования компоновки ограничений для создания дизайна, как сделать его лучше?

Ответ №2:

Оформить SequenceLayout. Это очень легко понять и дает вам гораздо больше контроля над вашим макетом, чем ConstraintLayout .