约束布局文本,底部带有按钮

时间:2019-06-18 11:58:20

标签: android android-constraintlayout

我正在为屏幕做约束布局。并且在某些小屏幕上无法正确显示,因为该按钮位于文本上方。 在具有更大屏幕的其他设备上,则可以正确显示。

我不知道该怎么解决。

谢谢

这是我的布局(约束布局),内部具有线性布局。

    <?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>

我还要附上问题的照片。您可以在此处看到按钮在文本上方的方式,而用户则无法阅读文本。

enter image description here

2 个答案:

答案 0 :(得分:2)

您应该添加 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"

仅供参考

如果使用ScrollView(子级为 TextView ),这将是一个很好的方法。

答案 1 :(得分:0)

将ScrollView设置为父布局,并在其中设置ConstraintLayout。

ScrollView documentation