我正在尝试创建具有三组小部件的布局。我希望一组约束在顶部,一组约束在底部,而另一组漂浮在两组之间的中间。该布局将被片段使用,因此可能会被压缩,尤其是在显示键盘时。我很难弄清楚如何防止两组重叠,同时将顶部和底部限制在布局的顶部和底部。
我想到了几种方法,但我不知道如何正确实施任何方法。
app:layout_constraintVertical_bias
或app:layout_constraintVertical_weight
将小部件拉在一起或散开。ScrollView
中,因此如果高度受到限制,它将起作用)还是有比这些更好的方法来获得我想要的?
注意:我希望顶部和底部组与父级布局不正确,但是我不知道如何使这些组与父级布局动态地保持距离而不会分散人群。我希望顶部和底部组靠近父级布局,但不一定与此相反。最好让它们紧靠父布局而不是靠近中间布局。理想情况下,我可以为此使用app:layout_constraintVertical_bias
或app:layout_constraintVertical_weight
。
代码
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto" >
<EditText
android:id="@+id/edit_text_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/edit_text_horizontal_margin"
android:layout_marginRight="@dimen/edit_text_horizontal_margin"
android:layout_marginTop="@dimen/edit_text_vertical_margin"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@id/edit_text_2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:hint="Edit Text 1"
android:selectAllOnFocus="true" />
<EditText
android:id="@+id/edit_text_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/edit_text_horizontal_margin"
android:layout_marginRight="@dimen/edit_text_horizontal_margin"
android:layout_marginTop="@dimen/edit_text_vertical_margin"
android:layout_marginBottom="@dimen/edit_text_vertical_margin"
app:layout_constraintTop_toBottomOf="@id/edit_text_1"
app:layout_constraintBottom_toTopOf="@id/button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:hint="Edit Text 2"
android:selectAllOnFocus="true" />
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/edit_text_2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:enabled="false"
android:text="Button" />
<ProgressBar
android:id="@+id/progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/progress_bar_margin"
app:layout_constraintTop_toBottomOf="@id/button"
app:layout_constraintBottom_toTopOf="@id/clickable_text_view"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:visibility="gone" />
<TextView
android:id="@+id/clickable_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/text_button_horizontal_margin"
android:layout_marginRight="@dimen/text_button_horizontal_margin"
android:layout_marginTop="@dimen/text_button_vertical_margin"
android:layout_marginBottom="@dimen/text_button_vertical_margin"
android:paddingLeft="@dimen/text_button_horizontal_margin"
android:paddingRight="@dimen/text_button_horizontal_margin"
android:paddingTop="@dimen/text_button_vertical_margin"
android:paddingBottom="@dimen/text_button_vertical_margin"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:text="Clickable Text View"
android:clickable="true"/>
</androidx.constraintlayout.widget.ConstraintLayout>
图片
这里是我所拥有的,以及我希望它看起来如何。 -----这是重叠的问题。
答案 0 :(得分:1)
对于textview,在按钮底部添加一个约束顶部,即app:layout_constraintTop_toBottomOf =“ @ + id / button”。海事组织总是尽可能地限制所有四个角度。从上到下开始。这样,当您的视图被“压缩”时,它仍将遵守约束集
答案 1 :(得分:0)
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
tools:context=".MainActivity">
<EditText
android:id="@+id/emailId"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="36dp"
android:hint="Enter email ID"
android:inputType="textEmailAddress"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="@+id/password"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="36dp"
android:hint="Enter password"
android:inputType="textPassword"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/emailId" />
<Button
android:id="@+id/signInBtn"
android:layout_width="240dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:background="@color/colorAccent"
android:text="Sign in"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/password" />
<TextView
android:id="@+id/analyticsLog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:text="Click me to create a log"
android:textColor="@android:color/holo_blue_dark"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
答案 2 :(得分:0)
我相信您可以将Guidelines与app:layout_constraintHeight_percent
一起使用来解决问题。
考虑此布局:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:enabled="false"
android:text="Button"
app:layout_constraintBottom_toTopOf="@+id/guideline3"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/edit_text_2" />
<EditText
android:id="@+id/edit_text_2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:hint="Edit Text 2"
android:selectAllOnFocus="true"
app:layout_constraintBottom_toTopOf="@id/button"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/edit_text_1" />
<EditText
android:id="@+id/edit_text_1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:hint="Edit Text 1"
android:selectAllOnFocus="true"
app:layout_constraintBottom_toTopOf="@id/edit_text_2"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ProgressBar
android:id="@+id/progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintBottom_toTopOf="@id/clickable_text_view"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/button" />
<TextView
android:id="@+id/clickable_text_view"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:clickable="true"
android:gravity="center"
android:text="Clickable Text View"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".35" />
每个视图的高度等于屏幕高度的10%
,这是因为具有app:layout_constraintHeight_percent="0.1"
属性。这将为您解决重叠的问题,因为您将能够告诉您的视图相对于屏幕尺寸的高度。
我也使用了带有app:layout_constraintGuide_percent=".35"
属性的准则来告诉准则将出现在屏幕上,这样我就可以将准则限制在不同的视图上,而您不必坚持使用您提到的屏幕底部顶部的视图(我宁愿顶部和底部组与父级布局不正确
您的布局将如下所示:(这是预览图片,可以更好地理解准则)