Android EditText和Button在同一行上

Question

Android EditText和Button在同一行上

androidlayoutandroid-edittextandroid-button

39

我需要在一个搜索按钮旁边放置一个Edittext。 EditText 应该尽可能地填满宽度，按钮应该在右侧，并且足够大以容纳其文本。

现在的样子是这样的:

[EDIT TEXT][Search]

但应该看起来像这样：

[.......EDIT TEXT.......][Search]

这里是XML：

<RelativeLayout android:id="@+id/RelativeLayout01" android:layout_width="fill_parent" android:layout_height="wrap_content">
        <EditText android:id="@+id/search_box" 
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="type to filter"
            android:inputType="text"
            android:maxLines="1" />
        <Button android:id="@+id/search_text"
            android:layout_toRightOf="@id/search_box"
            android:text="Search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
  </RelativeLayout>

- Ian Vink

这里回答了 https://es.stackoverflow.com/questions/172714/button-encima-de-un-edittext/173975#173975 - San Juan

6个回答

10

在这种情况下，EditText 的宽度必须设置为 fill_parent（而不是 wrap_content）：

<RelativeLayout android:id="@+id/RelativeLayout01" android:layout_width="fill_parent" android:layout_height="wrap_content">
        <EditText android:id="@+id/search_box" 
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:hint="type to filter"
            android:inputType="text"
            android:maxLines="1" />
        <Button android:id="@+id/search_text"
            android:layout_toRightOf="@id/search_box"
            android:text="Search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
  </RelativeLayout>

编辑

正如你所说，它隐藏了按钮。那么，只需要颠倒顺序：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:id="@+id/RelativeLayout01" android:layout_width="fill_parent"
    android:layout_height="wrap_content">
        <Button android:id="@+id/search_text"
            android:layout_alignParentRight="true"
            android:text="Search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <EditText android:id="@+id/search_box" 
            android:layout_alignParentLeft="true"
            android:layout_toLeftOf="@id/search_text"
            android:layout_centerVertical="true"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:hint="type to filter"
            android:inputType="text"
            android:maxLines="1" />
</RelativeLayout>

- Cristian

3

我相信Cristian的回答适用于更高版本的SDK，但是对于早期版本，您需要先定义按钮，然后将EditText放置在layout_toLeftOf="@id/search_box"位置上，而且这两个对象都应该有不同的ID。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relative_layout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <Button
        android:id="@+id/search_button"
        android:text="Search"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        />
    <EditText
        android:id="@+id/search_text"
        android:layout_toLeftOf="@+id/search_button"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="type to filter"
        android:inputType="text"
        android:maxLines="1"
        />
</RelativeLayout>

- Kevin Coppock

1

试试这个，我已经修复了一点。它会在编辑文本的右侧显示按钮，并且允许增加编辑文本的宽度。

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
       android:padding="10dip">

    <TextView
        android:id="@+id/label"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="instructions"/>
    <EditText
        android:id="@+id/entry"
        android:layout_width="250dip"
        android:layout_height="wrap_content"
        android:background="@android:drawable/editbox_background"
        android:layout_below="@id/label"/>

    <Button
        android:id="@+id/ok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:layout_alignRight="@id/entry"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="1dip"
        android:text="ok" />

</RelativeLayout>

- ud_an

0

对于那些想要解决相对布局问题的人，请尝试这个方法。我的目标是在手机旋转到横屏模式或不同的手机屏幕尺寸时保持按钮大小不变，但调整EditText字段。

因此，诀窍是使用边距和将父元素对齐到开头的组合。以下是您可以尝试的内容，我直接从我的应用程序中提取了这些内容。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="@color/mainBackground"
    android:orientation="vertical"
    android:paddingLeft="3dp"
    android:paddingRight="1dp"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/itemEntry"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="14dp"
        android:layout_marginEnd="100dp"
        android:layout_marginBottom="17dp"
        android:imeOptions="actionDone"
        android:inputType="text"
        android:textColor="@color/textColor" />

    <Button
        android:id="@+id/button_insert"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/itemEntry"
        android:layout_marginStart="9dp"
        android:layout_marginTop="-4dp"
        android:layout_marginEnd="9dp"
        android:layout_alignParentEnd="true"
        android:background="@drawable/round_button"
        android:text="+"
        android:textColor="#ffffff"
        android:textSize="20dp"
        android:layout_alignParentRight="true"/>
</RelativeLayout>

您将获得的是EditText将根据屏幕宽度改变大小，而按钮将保持固定在末尾。按钮之所以固定在末尾，是因为使用了android:layout_alignParentEnd="true"。为了防止EditText超过按钮，使用了android:layout_marginEnd="100dp"。希望这可以帮助到您！

- berkcodes

与其他帖子有何不同？ - TemaTre

它使用RelativeLayout，并提供了更多关于它如何工作的解释。 - berkcodes

0

现在更好的答案是将EditText的layout_width设置为0dp。

<LinearLayout 
     android:layout_height="wrap_content" 
     android:orientation="horizontal"
     android:layout_width="fill_parent">
<EditText
     android:layout_height="wrap_content" 
     android:layout_weight="1"
     android:layout_width="0dp"/>
 <Button
    android:text="Button"
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content"/>
 </LinearLayout>

- ZBorkala

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Asahi · Accepted Answer

它一定要用相对布局吗？
我建议将EditText的layout_width设置为fill_parent，将其layout_weight设置为1，就像这样：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content" android:orientation="horizontal"
android:layout_width="fill_parent">
<EditText android:text="@+id/EditText01" 
    android:id="@+id/EditText01"
    android:layout_height="wrap_content" 
    android:layout_weight="1"
    android:layout_width="fill_parent">
</EditText>
<Button android:text="@+id/Button01" 
    android:id="@+id/Button01"
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content">
</Button>

</LinearLayout>