【问题标题】:Android: align labels and buttons in multiple linesAndroid:在多行中对齐标签和按钮
【发布时间】:2015-07-05 14:40:37
【问题描述】:

我对那个布局发疯了。所以这就是我想要实现的目标。一个简单的布局,左侧有一个标签(TextView)或编辑字段(EditText),右侧有一个按钮。我想要垂直调整所有标签和所有按钮 - 这意味着所有相同宽度的按钮和所有标签。

但是如何做到这一点呢?我尝试了一个具有垂直方向的LinearLayout,每行都作为另一个具有水平方向的LinearLayout,其中标签的layout_weight为8,按钮为1。但这仍然不能保证我想要什么!

这是当前结果。您可以看到按钮没有很好地对齐。

这是我的布局:

这是 XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

        <EditText
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:hint="test_test_blabla"
                android:layout_weight="8"
                android:textSize="24sp"
                android:fontFamily="sans-serif-thin"
                android:layout_gravity="left"
                />

        <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:hint="@string/action_scan"
                android:textSize="24sp"
                android:fontFamily="sans-serif-thin"
                android:layout_weight="1"
                android:layout_gravity="right"
                />

    </LinearLayout>

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:text="17:35"
                android:layout_weight="8"
                android:textSize="24sp"
                android:fontFamily="sans-serif-thin"
                android:layout_gravity="left"
                />

        <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:hint="@string/action_pick_time"
                android:textSize="24sp"
                android:fontFamily="sans-serif-thin"
                android:layout_weight="1"
                android:layout_gravity="right"
                />

    </LinearLayout>

</LinearLayout>

【问题讨论】:

  • 使用表格布局.....
  • 啊,太容易了。有效,但是如何强制第一列中的 EditText 使用完整的可用空间?目前它与文本提示一样长/宽。
  • 你能给我举个例子吗..不关注...
  • 你能解释一下你到底想做什么吗?如果你能给我更多的细节,我可能会帮忙。另外,请告诉我,这是你想要添加一次的东西吗?或者你想拥有它的实例?
  • 请不要使用 tableLayout...这是一个“愚蠢”的解决方法...

标签: android android-layout android-xml


【解决方案1】:

使用RelativeLayout,您可以实现所需的布局:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/textView"
        android:layout_toLeftOf="@+id/button"
        android:fontFamily="sans-serif-thin"
        android:hint="test_test_blabla"
        android:textSize="24sp"/>

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_toRightOf="@+id/textView"
        android:fontFamily="sans-serif-thin"
        android:hint="Scan"
        android:textSize="24sp"/>

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button2"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/editText"
        android:layout_toLeftOf="@+id/button2"
        android:fontFamily="sans-serif-thin"
        android:text="17:35"
        android:textSize="24sp"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/button"
        android:fontFamily="sans-serif-thin"
        android:hint="Pick Time"
        android:textSize="24sp"/>

</RelativeLayout>

用于匹配大小的键布局属性是第一个EditText 上的android:layout_alignRight="@+id/textView",引用了下面的TextView

结果:

【讨论】:

  • 我知道你的意思,但无法在我的布局中正确设置:(
  • 现在知道了。但它非常复杂。
  • 这不是正确的答案...这只是解决问题的一种方法。我很确定有更好、更有效的方法来处理它,我现在想到了一个但是它看起来人们真的不在乎优化的答案,一个简单的解决方法就足够了。
  • @Vlad 你误以为像上面那样平坦的RelativeLayout 是一种黑客行为,不会像OP 那样在LinearLayout 上执行。如果在像ListView 这样的重复小部件中使用,它实际上会好很多倍。请阅读优化 Android 布局性能,您会知道布局越深,其性能就会越差。
  • 我很抱歉,这实际上是我想到的方法。我虽然检查了他自己的答案,也就是 tableLayout 的答案。是的,显然这是一个好方法。很抱歉没有注意。顺便说一句,你有没有机会知道我最后一个问题(UDP 连接问题)的答案?它让我的#### 困扰了很长一段时间......
【解决方案2】:

根据人们的建议,我使用了 TableLayout。但是标签(EditText)仍然没有使用整个空间直到按钮。

这就是 XML:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:stretchColumns="1">

    <TableRow>

        <EditText
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:hint="test_test_blabla"
                android:textSize="24sp"
                android:fontFamily="sans-serif-thin"
                android:layout_gravity="left"
                />

        <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:hint="@string/action_scan"
                android:textSize="24sp"
                android:fontFamily="sans-serif-thin"
                android:layout_gravity="right"
                />

    </TableRow>

    <TableRow>

        <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:text="17:35"
                android:textSize="24sp"
                android:fontFamily="sans-serif-thin"
                android:layout_gravity="left"
                />

        <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:hint="@string/action_pick_time"
                android:textSize="24sp"
                android:fontFamily="sans-serif-thin"
                android:layout_gravity="right"
                />

    </TableRow>

    <TableRow>

        <EditText
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:hint="@string/hint_car_location_address"
                android:textSize="24sp"
                android:fontFamily="sans-serif-thin"
                android:layout_gravity="left"
                />

        <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:hint="@string/action_gps"
                android:textSize="24sp"
                android:fontFamily="sans-serif-thin"
                android:layout_gravity="right"
                />

    </TableRow>

</TableLayout>

【讨论】:

  • 不是正确的方式先生。请回答我的第一条评论,我会尽快回来提供信息。
  • 您缺少哪些详细信息?我已经说过,我希望左右 EditText 字段中所有大小相同的按钮都可以使用可用空间。所以基本上 TableLayout 就是这样做的。
【解决方案3】:

编辑:
尝试相对布局
像这样:

 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:columnCount="2">
    <EditText
        android:id="@android:id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@android:id/button1"
        android:text="test"/>
    <Button
        android:id="@android:id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:paddingLeft="28dp"
        android:paddingRight="28dp"
        android:text="set"
        />

    <TextView
        android:id="@android:id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@android:id/button1"
        android:layout_alignBottom="@android:id/button2"
        android:layout_below="@android:id/button1"
        android:gravity="center_vertical"
        android:text="some test"/>

    <Button
        android:id="@android:id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@android:id/button1"
        android:layout_alignLeft="@android:id/button1"
        android:layout_alignRight="@android:id/button1"
        android:text="Scan"
        />
</RelativeLayout>  

【讨论】:

  • 不,不起作用。但现在我看到 TableLayout 只是将宽度除以相同大小的两(2 列):(
  • @Matthias 好的,我已经编辑了我的答案,检查新的解决方案。
【解决方案4】:

5 年多后...OP 现在可能是 android xml 方面的专家。然而,为了帮助解决这个问题,线性布局是可行的。我添加了另一个线性布局来包含所有行,以便可以在这个附加布局中调整边距。

当使用权重总和时,对应的变量(宽度/高度)必须为0dp,以便进行相应的调整。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="left"
        android:orientation="vertical"
        android:weightSum="2">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="horizontal"
            android:weightSum="9">

            <EditText
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="8"
                android:fontFamily="sans-serif-thin"
                android:hint="test_test_blabla"
                android:textSize="24sp" />

            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:fontFamily="sans-serif-thin"
                android:hint="@string/action_scan"
                android:textSize="24sp" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="left"
            android:orientation="horizontal"
            android:weightSum="9">

            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="8"
                android:fontFamily="sans-serif-thin"
                android:text="17:35"
                android:textSize="24sp" />

            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:fontFamily="sans-serif-thin"
                android:hint="@string/action_pick_time"
                android:textSize="24sp" />

        </LinearLayout>
    </LinearLayout>

</LinearLayout>

【讨论】:

    猜你喜欢
    • 2016-02-03
    • 2014-02-27
    • 1970-01-01
    • 2015-01-25
    • 2021-03-09
    • 1970-01-01
    • 1970-01-01
    • 2017-08-29
    • 2021-08-05
    相关资源
    最近更新 更多