Android简单百分比布局?

时间:2017-07-03 09:56:56

标签: android android-layout

有没有办法在Android上拥有包含元素的全屏行? 我尝试用表格,GridView和线性来做,但我现在已经很久了,并且找不到帮助我的帖子。

我刚刚对我想做的事情做了一个小小的描述: http://i.imgur.com/W0oTyaC.png enter image description here

简而言之:

  • 标签和按钮应该与其内容一样大,并且适合列中最大的标签

  • 按钮应贴在右侧

  • 标签应贴在左侧

  • 文本框应该只填充标签/按钮之间的剩余空间,但在内容较大的情况下,它不应该被踢出"右边的按钮......

我的最后一次尝试是GridView,它看起来是一种可以接受的,但不是真的。

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <GridLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Add nutrition part"
                android:id="@+id/textView"
                android:layout_column="0"
                android:layout_row="0"
                android:layout_columnSpan="1"
                android:layout_rowSpan="1" />

            <TextView
                android:text="Selected part"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/textView15"
                android:layout_column="0"
                android:layout_row="1"
                android:layout_columnSpan="1"
                android:layout_rowSpan="1" />

            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:inputType="text"
                android:text=""
                android:enabled="false"
                android:id="@+id/dialogMakeMealPartNutrition"
                android:layout_column="1"
                android:layout_row="1"
                android:layout_columnSpan="1"
                android:layout_rowSpan="1"
                android:layout_gravity="fill_horizontal" />

            <Button
                android:text="Find nutrition"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/buttonMakeMealPartFindNutrition"
                android:layout_column="2"
                android:layout_row="1"
                android:layout_columnSpan="1"
                android:layout_rowSpan="1" />

            <TextView
                android:text="Gram"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/textView17"
                android:layout_column="0"
                android:layout_row="2"
                android:layout_columnSpan="1"
                android:layout_rowSpan="1" />

            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:inputType="numberDecimal"
                android:id="@+id/dialogMakeMealPartGram"
                android:layout_column="1"
                android:layout_row="2"
                android:layout_columnSpan="1"
                android:layout_rowSpan="1"
                android:layout_gravity="fill_horizontal" />

            <Button
                android:text="Abort"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/dialogMakeMealPartButtonAbort"
                android:layout_column="0"
                android:layout_row="3"
                android:layout_columnSpan="1"
                android:layout_rowSpan="1" />

            <Button
                android:text="Add"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/dialogMakeMealPartButtonAdd"
                android:layout_column="1"
                android:layout_row="3"
                android:layout_columnSpan="1"
                android:layout_rowSpan="1" />

        </GridLayout>

    </ScrollView>

</RelativeLayout>

修改

ConstraintLayout为我的目的做了很好的工作 - 感谢Luca的良好暗示:

Task description

代码现在看起来像这样:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="#FFFFFF">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="Add nutrition part"
                android:id="@+id/headline"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:text="Selected part"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/textView15"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="@+id/buttonMakeMealPartFindNutrition" />

            <EditText
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:inputType="text"
                android:text=""
                android:enabled="false"
                android:id="@+id/dialogMakeMealPartNutrition"
                app:layout_constraintStart_toEndOf="@+id/textView15"
                app:layout_constraintEnd_toStartOf="@+id/buttonMakeMealPartFindNutrition"
                app:layout_constraintTop_toTopOf="@+id/buttonMakeMealPartFindNutrition" />

            <Button
                android:text="Find nutrition"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/buttonMakeMealPartFindNutrition"
                app:layout_constraintTop_toBottomOf="@+id/headline"
                app:layout_constraintStart_toEndOf="@+id/dialogMakeMealPartNutrition"
                app:layout_constraintEnd_toEndOf="parent" />

            <TextView
                android:text="Gram"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/textView17"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/dialogMakeMealPartNutrition" />

            <EditText
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:inputType="numberDecimal"
                android:id="@+id/dialogMakeMealPartGram"
                app:layout_constraintStart_toStartOf="@+id/dialogMakeMealPartNutrition"
                app:layout_constraintEnd_toEndOf="@+id/dialogMakeMealPartNutrition"
                app:layout_constraintTop_toBottomOf="@+id/dialogMakeMealPartNutrition" />

            <Button
                android:text="Abort"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/dialogMakeMealPartButtonAbort"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/dialogMakeMealPartGram" />

            <Button
                android:text="Add"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/dialogMakeMealPartButtonAdd"
                app:layout_constraintStart_toEndOf="@+id/dialogMakeMealPartButtonAbort"
                app:layout_constraintTop_toBottomOf="@+id/dialogMakeMealPartGram" />

        </android.support.constraint.ConstraintLayout>

    </ScrollView>

</RelativeLayout>

1 个答案:

答案 0 :(得分:0)

您可以使用ConstraintLayout来实现此目的,here您可以找到它的解释。

您的布局文件应如下所示:

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Add nutrition part"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        android:id="@+id/textView15"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Selected part"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView"/>

    <EditText
        android:id="@+id/dialogMakeMealPartNutrition"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:enabled="false"
        android:inputType="text"
        app:layout_constraintStart_toEndOf="@+id/textView15"
        app:layout_constraintEnd_toStartOf="@+id/buttonMakeMealPartFindNutrition"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        android:text=""/>

    <Button
        android:id="@+id/buttonMakeMealPartFindNutrition"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        app:layout_constraintStart_toEndOf="@+id/dialogMakeMealPartNutrition"
        app:layout_constraintEnd_toEndOf="parent"
        android:text="Find nutrition"/>

    ...

</android.support.constraint.ConstraintLayout>