Активность Android не создается должным образом с помощью Constraint Layout - PullRequest
Новая
       12

Активность Android не создается должным образом с помощью Constraint Layout

2 голосов
/ 08 июля 2019

Я создал XML-файл макета активности с ConstraintLayout. Это было приятно смотреть и чувствовать, когда это проектировало. Но когда я запускаю его на устройстве, оно пропускает свою структуру, как на этапе проектирования.

Это мой файл макета xml, 

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#DCDCDC"
tools:context=".ui.AdMenuActivity">

<View
    android:id="@+id/bg_gradient"
    android:layout_width="match_parent"
    android:layout_height="@dimen/_225sdp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:background="@drawable/ic_bg_gradient_next"
    tools:layout_editor_absoluteX="0dp"
    tools:layout_editor_absoluteY="0dp" />

<ImageView
    android:layout_width="@dimen/_50sdp"
    android:layout_height="50dp"
    android:src="@mipmap/image_ssb_main"
    tools:layout_editor_absoluteX="@dimen/_23sdp"
    tools:layout_editor_absoluteY="@dimen/_15sdp"
    android:layout_marginTop="@dimen/_10sdp" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Login"
    android:textColor="@color/white"
    android:textSize="@dimen/_24sdp"
    tools:layout_editor_absoluteX="@dimen/_23sdp"
    tools:layout_editor_absoluteY="@dimen/_55sdp"
    android:textStyle="bold" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Login to your account"
    android:textColor="@color/white"
    android:textSize="@dimen/_12sdp"
    tools:layout_editor_absoluteX="@dimen/_23sdp"
    tools:layout_editor_absoluteY="@dimen/_90sdp" />

<LinearLayout
    android:layout_width="@dimen/_280sdp"
    android:layout_height="340dp"
    android:background="@color/white"
    android:orientation="vertical"
    tools:layout_editor_absoluteX="@dimen/_23sdp"
    tools:layout_editor_absoluteY="@dimen/_120sdp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/_4sdp"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/_8sdp"
            android:layout_marginRight="@dimen/_8sdp"
            android:layout_marginTop="@dimen/_10sdp"
            android:text="Email"
            android:textColor="@color/black"
            android:textSize="@dimen/_14sdp" />

        <EditText
            style="@style/editText"
            android:layout_width="match_parent"
            android:layout_height="@dimen/_25sdp"
            android:layout_gravity="center"
            android:layout_margin="@dimen/_8sdp"
            android:background="@drawable/edit_text_background"
            android:hint="Your Email"
            android:inputType="textEmailAddress"
            android:maxLines="1"
            android:paddingLeft="@dimen/_8sdp"
            android:singleLine="true"
            android:textAppearance="@style/editText"
            android:textColor="#2C2C2C"
            android:textSize="@dimen/_14sdp" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/_4sdp"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/_8sdp"
            android:layout_marginRight="@dimen/_8sdp"
            android:layout_marginTop="@dimen/_10sdp"
            android:text="Password"
            android:textColor="@color/black"
            android:textSize="@dimen/_14sdp" />

        <EditText
            style="@style/editText"
            android:layout_width="match_parent"
            android:layout_height="@dimen/_25sdp"
            android:layout_gravity="center"
            android:layout_margin="@dimen/_8sdp"
            android:background="@drawable/edit_text_background"
            android:hint="Your Password"
            android:inputType="textEmailAddress"
            android:maxLines="1"
            android:paddingLeft="@dimen/_8sdp"
            android:singleLine="true"
            android:textAppearance="@style/editText"
            android:textColor="#2C2C2C"
            android:textSize="@dimen/_14sdp" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/_4sdp"
        android:orientation="vertical">

        <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/_8sdp"
            android:layout_marginRight="@dimen/_8sdp"
            android:layout_marginTop="@dimen/_10sdp"
            android:background="#009688"
            android:text="Login"
            android:textAllCaps="false"
            android:textColor="@color/white"
            android:textSize="@dimen/_14sdp" />

        <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/_8sdp"
            android:layout_marginRight="@dimen/_8sdp"
            android:layout_marginTop="@dimen/_10sdp"
            android:background="@color/white_greyish"
            android:text="Sign up"
            android:textAllCaps="false"
            android:textColor="@color/black"
            android:textSize="@dimen/_14sdp" />

    </LinearLayout>

</LinearLayout>

А это образы его стадии проектирования и фазы выполнения,

Этап проектирования

enter image description here

Рабочая фаза enter image description here

Можно ли спроектировать этот макет так же, как на этапе проектирования?

Ответы [ 4 ]

2 голосов
/ 08 июля 2019

Хотя приведенный ниже ответ не является решением вашей проблемы, но вы можете попробовать его без constraintlayout, поскольку constraintlayout используется для создания сложных макетов, а дизайн, который вы хотите достичь, может быть легко достигнут с помощью linearlayout. 

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

<LinearLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/ic_bg_gradient_next"
    android:orientation="vertical">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:src="@mipmap/image_ssb_main" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Login"
        android:textColor="@color/white"
        android:textSize="@dimen/_24sdp"
        android:textStyle="bold" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Login to your account"
        android:textColor="@color/white"
        android:textSize="@dimen/_12sdp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/_8sdp"
                android:layout_marginTop="@dimen/_10sdp"
                android:layout_marginRight="@dimen/_8sdp"
                android:text="Email"
                android:textColor="@color/black"
                android:textSize="@dimen/_14sdp" />

            <EditText
                style="@style/editText"
                android:layout_width="match_parent"
                android:layout_height="@dimen/_25sdp"
                android:layout_gravity="center"
                android:layout_margin="@dimen/_8sdp"
                android:background="@drawable/edit_text_background"
                android:hint="Your Email"
                android:inputType="textEmailAddress"
                android:maxLines="1"
                android:paddingLeft="@dimen/_8sdp"
                android:singleLine="true"
                android:textAppearance="@style/editText"
                android:textColor="#2C2C2C"
                android:textSize="@dimen/_14sdp" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/_4sdp"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/_10sdp"
                android:text="Password"
                android:textColor="@color/black"
                android:textSize="@dimen/_14sdp" />

            <EditText
                style="@style/editText"
                android:layout_width="match_parent"
                android:layout_height="@dimen/_25sdp"
                android:layout_gravity="center"
                android:layout_margin="@dimen/_8sdp"
                android:background="@drawable/edit_text_background"
                android:hint="Your Password"
                android:inputType="textEmailAddress"
                android:maxLines="1"
                android:singleLine="true"
                android:textAppearance="@style/editText"
                android:textColor="#2C2C2C"
                android:textSize="@dimen/_14sdp" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/_4sdp"
            android:orientation="vertical">

            <Button
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="#009688"
                android:text="Login"
                android:textAllCaps="false"
                android:textColor="@color/white"
                android:textSize="@dimen/_14sdp" />

            <Button
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/_10sdp"
                android:background="@color/white_greyish"
                android:text="Sign up"
                android:textAllCaps="false"
                android:textColor="@color/black"
                android:textSize="@dimen/_14sdp" />

        </LinearLayout>

    </LinearLayout>
2 голосов
/ 08 июля 2019

Вы неправильно использовали ограничения в макете.

  1. Отсутствует закрывающий тег, добавьте 
</android.support.constraint.ConstraintLayout>

в конце макета

То, что сказал Везели, абсолютно правильно, избегайте использования 
tools:layout_editor_absoluteY 

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent

. Хорошо использовать ограничения, такие как это, поместит вид в центр экрана

Вы должны ограничить
i) Просмотр
ii) ImageView
iii) TextView, где вы написали Логин и Вход в свою учетную запись
iv) Линейный макет

Надеюсь, это поможет вам Счастливого кодирования!

1 голос
/ 08 июля 2019

Как я заметил, ваш верхний макет - это макет ограничения, и вы закрываете его тегом </LinearLayout> (последняя строка в xml)

А в макете ограничений каждый дочерний элемент должен иметь как минимум одно горизонтальное ограничение и одно вертикальное ограничение. В противном случае дети не будут правильно размещены в родительском.

Ваш макет может быть заменен следующим. Дайте правильный идентификатор каждому ребенку 

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#DCDCDC"
tools:context=".ui.AdMenuActivity">

<View
    android:id="@+id/bg_gradient"
    android:layout_width="match_parent"
    android:layout_height="@dimen/_225sdp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:background="@drawable/ic_bg_gradient_next"
    tools:layout_editor_absoluteX="0dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:layout_editor_absoluteY="0dp" />

<ImageView
    android:layout_width="@dimen/_50sdp"
    android:layout_height="50dp"
    android:id="@+id/imgView"
    android:src="@mipmap/image_ssb_main"
    tools:layout_editor_absoluteX="@dimen/_23sdp"
    tools:layout_editor_absoluteY="@dimen/_15sdp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/bg_gradient"
    android:layout_marginTop="@dimen/_10sdp" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Login"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/imgView"
    android:textColor="@color/white"
    android:textSize="@dimen/_24sdp"
    tools:layout_editor_absoluteX="@dimen/_23sdp"
    tools:layout_editor_absoluteY="@dimen/_55sdp"
    android:textStyle="bold" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Login to your account"
    android:textColor="@color/white"
    android:textSize="@dimen/_12sdp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/textView1"
    tools:layout_editor_absoluteX="@dimen/_23sdp"
    tools:layout_editor_absoluteY="@dimen/_90sdp" />

<LinearLayout
    android:layout_width="@dimen/_280sdp"
    android:layout_height="340dp"
    android:background="@color/white"
    android:orientation="vertical"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/textView2"
    tools:layout_editor_absoluteX="@dimen/_23sdp"
    tools:layout_editor_absoluteY="@dimen/_120sdp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/_4sdp"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/_8sdp"
            android:layout_marginRight="@dimen/_8sdp"
            android:layout_marginTop="@dimen/_10sdp"
            android:text="Email"
            android:textColor="@color/black"
            android:textSize="@dimen/_14sdp" />

        <EditText
            style="@style/editText"
            android:layout_width="match_parent"
            android:layout_height="@dimen/_25sdp"
            android:layout_gravity="center"
            android:layout_margin="@dimen/_8sdp"
            android:background="@drawable/edit_text_background"
            android:hint="Your Email"
            android:inputType="textEmailAddress"
            android:maxLines="1"
            android:paddingLeft="@dimen/_8sdp"
            android:singleLine="true"
            android:textAppearance="@style/editText"
            android:textColor="#2C2C2C"
            android:textSize="@dimen/_14sdp" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/_4sdp"
        app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/linearLt1"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/_8sdp"
            android:layout_marginRight="@dimen/_8sdp"
            android:layout_marginTop="@dimen/_10sdp"
            android:text="Password"
            android:textColor="@color/black"
            android:textSize="@dimen/_14sdp" />

        <EditText
            style="@style/editText"
            android:layout_width="match_parent"
            android:layout_height="@dimen/_25sdp"
            android:layout_gravity="center"
            android:layout_margin="@dimen/_8sdp"
            android:background="@drawable/edit_text_background"
            android:hint="Your Password"
            android:inputType="textEmailAddress"
            android:maxLines="1"
            android:paddingLeft="@dimen/_8sdp"
            android:singleLine="true"
            android:textAppearance="@style/editText"
            android:textColor="#2C2C2C"
            android:textSize="@dimen/_14sdp" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/_4sdp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/linearLt2"
        android:orientation="vertical">

        <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/_8sdp"
            android:layout_marginRight="@dimen/_8sdp"
            android:layout_marginTop="@dimen/_10sdp"
            android:background="#009688"
            android:text="Login"
            android:textAllCaps="false"
            android:textColor="@color/white"
            android:textSize="@dimen/_14sdp" />

        <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/_8sdp"
            android:layout_marginRight="@dimen/_8sdp"
            android:layout_marginTop="@dimen/_10sdp"
            android:background="@color/white_greyish"
            android:text="Sign up"
            android:textAllCaps="false"
            android:textColor="@color/black"
            android:textSize="@dimen/_14sdp" />

    </LinearLayout>

</ConstraintLayout>
1 голос
/ 08 июля 2019

Вы можете использовать AndroidStudio, чтобы помочь вам установить эти ограничения.

И вы должны избегать использования абсолютного запаса, такого как tools:layout_editor_absoluteX

Используйте эти виды ограничений вместо этого. 

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/someView"
app:layout_constraintStart_toStartOf="parent"

например, если вы хотите установить View в горизонтальном центре и выровнять верхнюю часть родительского элемента: 

android:layout_margin="16dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"

Совет - установить ограничение View для других представлений.Не все представления ограничены своим родителем.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...