Как сделать кнопки отзывчивыми в ConstraintLayout? - PullRequest
Новая
       34

Как сделать кнопки отзывчивыми в ConstraintLayout?

1 голос
/ 11 января 2020

Я новичок в Android и хочу построить 4 кнопки внизу, как на картинке. Одна кнопка посередине не возможна, потому что я попытался настроить ее на реагирование, и она исчезла. Можете ли вы объяснить мне, как я расположил эти кнопки рядом на одинаковом расстоянии и чтобы они правильно реагировали?

enter image description here

Вот мой 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>

Ответы [ 4 ]

1 голос
/ 11 января 2020

Попробуйте это 

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

ВЫХОД

enter image description here. enter image description here

0 голосов
/ 11 января 2020

Добавление к Nile sh 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", что делает их все одинакового размера.

А если вы хотите изменить размер кнопки, просто измените значение app:layout_constraintHeight_percent="0.1" на btnOne

Вот как это будет выглядеть

enter image description here

enter image description here

0 голосов
/ 11 января 2020

просто ограничьте каждую кнопку следующей кнопкой и ограничьте начало первой кнопки началом родительского элемента и конец последней кнопки концом родительского элемента, сделайте всю ширину 0dp, это сделает ваши кнопки развернутыми горизонтально как возможный. затем выберите все кнопки в режиме конструктора (с помощью ctrl + click) и щелкните правой кнопкой мыши, go для цепочек и выберите горизонтальную цепочку, это сделает расстояние между вашими кнопками равным и сгенерирует некоторый код, который нетрудно сделать, сами, но так проще. используйте этот код: 

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

    <Button
        android:id="@+id/button4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/button3" />

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/button4"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/button2" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/button3"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/button" />

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

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

enter image description here

0 голосов
/ 11 января 2020

Попробуйте добавить все кнопки в линейный макет с ориентацией по горизонтали, и кнопки получат равное расстояние. Чтобы кнопки реагировали, используйте onclicklistener();, чтобы получить ответ

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...