Текст макета ограничения с кнопкой внизу

Question

Я делаю макет ограничения для экрана.И на некоторых маленьких экранах отображается неправильно, потому что кнопка находится над текстом.В других устройствах с большим экраном отображается правильно.

И я не знаю, как я могу решить это.

Спасибо

Это мой макет (Constraint Layout) с линейным расположением внутри.

    <?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="@color/wf_white">

    <LinearLayout
            android:id="@+id/ly_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/form_margins"
            android:orientation="vertical"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="parent"
            android:background="@color/wf_light_grey">

        <TextView
                style="@style/wf_text_link"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textAllCaps="true"
                android:layout_marginTop="@dimen/form_margins"
                android:text="@string/_BIWC_your_agent"/>

        <ImageView
                android:id="@+id/broker_image"
                android:layout_width="@dimen/broker_image_size"
                android:layout_height="@dimen/broker_image_size"
                android:layout_gravity="center"
                android:layout_marginTop="@dimen/text_margin_sides"
                android:src="@drawable/img_broker_without_image"
                tools:ignore="ContentDescription"/>

        <TextView
                android:id="@+id/broker_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="@dimen/form_margins_mini"/>

        <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_marginTop="@dimen/form_margins_mini"
                android:orientation="horizontal">

            <ImageView
                    android:id="@+id/broker_icon_phone"
                    android:layout_width="@dimen/icons_size_broker"
                    android:layout_height="@dimen/icons_size_broker"
                    android:layout_marginTop="@dimen/form_margins_small"
                    android:layout_marginBottom="@dimen/text_margin_sides"
                    android:visibility="gone"
                    android:src="@drawable/icon_action_phone"
                    tools:ignore="ContentDescription"/>

            <ImageView
                    android:id="@+id/broker_icon_email"
                    android:layout_width="@dimen/icons_size_broker"
                    android:layout_height="@dimen/icons_size_broker"
                    android:layout_marginTop="@dimen/form_margins_small"
                    android:layout_marginStart="@dimen/icons_margin_broker"
                    android:layout_marginBottom="@dimen/text_margin_sides"
                    android:src="@drawable/ic_email"
                    tools:ignore="ContentDescription"/>

            <ImageView
                    android:id="@+id/broker_icon_location"
                    android:layout_width="@dimen/icons_size_broker"
                    android:layout_height="@dimen/icons_size_broker"
                    android:layout_marginTop="@dimen/form_margins_small"
                    android:layout_marginStart="@dimen/icons_margin_broker"
                    android:layout_marginBottom="@dimen/text_margin_sides"
                    android:visibility="gone"
                    android:src="@drawable/ic_location"
                    tools:ignore="ContentDescription"/>

        </LinearLayout>

    </LinearLayout>

    <TextView
            android:id="@+id/broker_introduction_title"
            style="@style/wf_text_copy"
            android:layout_width="match_parent"
            android:gravity="start"
            android:layout_marginBottom="20dp"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="20dp"
            android:layout_marginRight="20dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/ly_container"
            android:text="@string/_SR_head"/>

    <TextView
            android:id="@+id/access_code_description"
            style="@style/wf_text_hero_copy"
            android:layout_width="match_parent"
            android:layout_below="@+id/broker_introduction_title"
            android:layout_marginLeft=“20dp”
            android:layout_marginRight="20dp"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="20dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/broker_introduction_title"
            android:gravity="start"
            android:text="@string/_BIWC_welcome_message"/>

    <Button
            android:id="@+id/btn_go_to_register"
            style="@style/wf_button_primary"
            android:layout_width="match_parent"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="20dp"
            android:descendantFocusability="beforeDescendants"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:text="@string/_BIWC_create_account"/>

</android.support.constraint.ConstraintLayout>

А также я прилагаю фото проблемы.Где вы можете видеть, как кнопка находится над текстом, и пользователь не может прочитать текст.

Answer 1

Вы должны добавить layout_constraintBottom_toTopOf & layout_constraintTop_toBottomOf.

layout_constraintBottom_toTopOf -> Выровнять нижнюю часть желаемого вида на вершину другого.

layout_constraintTop_toBottomOf -> Выровнять верх желаемого вида по дно другого.

           <TextView
            android:id="@+id/access_code_description"
            app:layout_constraintBottom_toTopOf"@+id/btn_go_to_register"
            android:layout_marginBottom="20dp" //Remove this line

И

          <Button
            android:id="@+id/btn_go_to_register"
            app:layout_constraintTop_toBottomOf="@+id/access_code_description"

FYI

Это будет хороший подход, если вы используете ScrollView (где child TextView ).

Answer 2

Установить ScrollView в качестве родительского макета и ConstraintLayoutin.

Документация ScrollView