#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
.