如何在 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"
的值
这是它的样子
我是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"
的值
这是它的样子