如何在 ConstraintLayout 中使按钮响应?

How to make buttons responsive in ConstraintLayout?

我是Android的初学者,想像图片一样在底部制作4个按钮。中间的一个按钮是不可能的,因为我试图将它设置为响应式,但它消失了。你能向我解释一下我是如何将这些按钮设置为彼此相邻且距离相同并使其以正确的方式响应的吗?

这是我的 xml:

<?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"
android:background="#f4f4f4"
tools:context=".MainActivity">

<TextView
    android:id="@+id/textView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginBottom="0dp"
    android:gravity="center_horizontal"
    android:shadowColor="#000000"
    android:text="This app has 50000 downloads!"
    android:textColor="#eadca6"
    android:textSize="60sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toTopOf="@+id/guideline"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent="0.70"
    app:layout_constraintHorizontal_bias="0.50"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintWidth_percent="0.9" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline2"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.86" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.77" />

<Button
    android:id="@+id/button12"
    app:layout_constraintWidth_percent="0.2"
    android:layout_height="wrap_content"
    android:layout_width="0dp"
    android:text="Button"
    app:layout_constraintEnd_toStartOf="@+id/button13"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/button13" />

<Button
    android:id="@+id/button13"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="Button"
    android:textSize="20sp"
    app:layout_constraintEnd_toStartOf="@+id/button14"
    app:layout_constraintTop_toTopOf="@+id/guideline2"
    app:layout_constraintHeigth_percent="0.1"
    app:layout_constraintWidth_percent="0.2" />

<Button
    android:id="@+id/button14"
    app:layout_constraintWidth_percent="0.2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintEnd_toStartOf="@+id/button15"
    app:layout_constraintTop_toTopOf="@+id/button13" />

<Button
    android:id="@+id/button15"
    app:layout_constraintWidth_percent="0.2"
    android:layout_height="wrap_content"
    android:text="Button"
    android:layout_width="0dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="@+id/button13" />


</androidx.constraintlayout.widget.ConstraintLayout>

试试这个

<?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"
    android:background="#f4f4f4"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="0dp"
        android:gravity="center_horizontal"
        android:shadowColor="#000000"
        android:text="This app has 50000 downloads!"
        android:textColor="#eadca6"
        android:textSize="60sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.70"
        app:layout_constraintHorizontal_bias="0.50"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintWidth_percent="0.9" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.86" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.77" />


    <Button
        android:id="@+id/btnOne"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="One"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/btnTwo"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/btnTwo"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="Two"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/btnThree"
        app:layout_constraintStart_toEndOf="@id/btnOne" />

    <Button
        android:id="@+id/btnThree"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="Three"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/btnFour"
        app:layout_constraintStart_toEndOf="@id/btnTwo" />

    <Button
        android:id="@+id/btnFour"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="Four"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/btnThree" />


</androidx.constraintlayout.widget.ConstraintLayout>

输出

.

尝试将所有按钮添加到线性布局中,并将其方向设置为水平,按钮将占用我 距离相等。要使按钮响应,请使用 onclicklistener(); 获得响应

添加到 Nilesh Rathod 答案,如果您想控制按钮高度,您可以这样做:

<?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"
  android:background="#f4f4f4"
  tools:context="MainActivity">

<TextView
    android:id="@+id/textView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginBottom="0dp"
    android:gravity="center_horizontal"
    android:shadowColor="#000000"
    android:text="This app has 50000 downloads!"
    android:textColor="#eadca6"
    android:textSize="60sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toTopOf="@+id/guideline"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent="0.70"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintWidth_percent="0.9" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.77" />


<Button
    android:id="@+id/btnOne"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="One"
    android:layout_marginBottom="10dp"
    android:layout_margin="10dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/btnTwo"
    app:layout_constraintHeight_percent="0.1"
    app:layout_constraintStart_toStartOf="parent" />

<Button
    android:id="@+id/btnTwo"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="Two"

    app:layout_constraintBottom_toBottomOf="@+id/btnOne"
    app:layout_constraintEnd_toStartOf="@+id/btnThree"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/btnOne"
    app:layout_constraintTop_toTopOf="@+id/btnOne" />

<Button
    android:id="@+id/btnThree"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="Three"
    android:layout_margin="10dp"
    app:layout_constraintBottom_toBottomOf="@+id/btnOne"
    app:layout_constraintEnd_toStartOf="@+id/btnFour"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/btnTwo"
    app:layout_constraintTop_toTopOf="@+id/btnOne" />

<Button
    android:id="@+id/btnFour"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="Four"
    android:layout_margin="10dp"
    app:layout_constraintBottom_toBottomOf="@+id/btnOne"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/btnThree"
    app:layout_constraintTop_toTopOf="@+id/btnOne" />


</androidx.constraintlayout.widget.ConstraintLayout>

现在btnOne得到了屏幕高度的10%,所有其他按钮都被限制在btnOne的顶部并且有android:layout_height="0dp"属性,使它们都一样尺寸。

如果您想更改按钮大小,只需更改 btnOne

app:layout_constraintHeight_percent="0.1" 的值

这是它的样子