约束布局-如何不使用链条连接所有视图

时间:2019-03-31 07:46:10

标签: android-constraintlayout

我是Android Studio的新手。我刚刚使用约束布局设计创建了一个简单的项目。

但是,我使用链将所有视图连接在一起,这对我来说很奇怪,但是我不知道如何使用其他功能(例如bais等)来连接视图。我已经阅读了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>

2 个答案:

答案 0 :(得分:0)

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 :(得分:0)

结帐SequenceLayout。与ConstraintLayout相比,它很容易理解,并为您提供了更多的布局控制方式。