ConstraintLayout - 按钮之间的均匀空间

时间:2017-05-03 19:24:10

标签: android button android-constraintlayout

我试图在两个按钮(发送和清除)之间留出空间。 它调整到屏幕中央的边框和垂直指南。 它在项目中似乎很好,但它在应用程序本身看起来并不像。 请查看以下截图。

Project

App



<?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"
    tools:context="com.example.f3nr1r.testkeyboard.MainActivity"
    tools:layout_editor_absoluteY="81dp"
    tools:layout_editor_absoluteX="0dp">


    <Button
        android:id="@+id/buttonClear"
        android:layout_width="90dp"
        android:layout_height="wrap_content"
        android:onClick="clearText"
        android:text="Clear"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@+id/editText"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="@+id/guideline2"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/guideline3"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent" />

    <Button
        android:id="@+id/button0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="sendInput"
        android:text="0"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@+id/button8"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent" />

    <Button
        android:id="@+id/button9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="sendInput"
        android:text="9"
        app:layout_constraintBaseline_toBaselineOf="@+id/button8"
        app:layout_constraintLeft_toRightOf="@+id/button8"
        android:layout_marginLeft="8dp" />

    <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="sendInput"
        android:text="7"
        app:layout_constraintRight_toLeftOf="@+id/button8"
        android:layout_marginRight="8dp"
        app:layout_constraintBaseline_toBaselineOf="@+id/button8" />

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="sendInput"
        android:text="6"
        app:layout_constraintLeft_toRightOf="@+id/button5"
        android:layout_marginLeft="8dp"
        app:layout_constraintBaseline_toBaselineOf="@+id/button5" />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="sendInput"
        android:text="5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@+id/button2"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp" />

    <Button
        android:id="@+id/button8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="sendInput"
        android:text="8"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@+id/button5"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="sendInput"
        android:text="4"
        app:layout_constraintRight_toLeftOf="@+id/button5"
        android:layout_marginRight="8dp"
        app:layout_constraintBaseline_toBaselineOf="@+id/button5" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:ems="10"
        android:hint="Type something here..."
        android:inputType="textPersonName"
        android:maxLines="1"
        android:selectAllOnFocus="false"
        android:textAlignment="center"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="sendInput"
        android:text="3"
        app:layout_constraintLeft_toRightOf="@+id/button2"
        android:layout_marginLeft="8dp"
        app:layout_constraintBaseline_toBaselineOf="@+id/button2" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="sendInput"
        android:text="2"
        app:layout_constraintTop_toTopOf="@+id/guideline3"
        android:layout_marginTop="60dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="sendInput"
        android:text="1"
        app:layout_constraintRight_toLeftOf="@+id/button2"
        android:layout_marginRight="8dp"
        app:layout_constraintBaseline_toBaselineOf="@+id/button2" />

    <Button
        android:id="@+id/buttonSend"
        android:layout_width="90dp"
        android:layout_height="wrap_content"
        android:onClick="sendText"
        android:text="Send"
        app:layout_constraintRight_toLeftOf="@+id/guideline2"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@+id/editText"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/guideline3"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent" />

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline2"
        android:orientation="vertical"
        app:layout_constraintGuide_end="192dp" />

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline3"
        app:layout_constraintGuide_begin="154dp"
        android:orientation="horizontal" />

</android.support.constraint.ConstraintLayout>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

我明白了。 应删除对中间指南的约束,您可以使用边距调整位置。 在XML中,应从这些按钮中删除下面的行(&#34; buttonSend&#34;和&#34; buttonClear&#34;)。

app:layout_constraintLeft_toLeftOf="@+id/guideline2"
app:layout_constraintRight_toLeftOf="@+id/guideline2"