Android EditText 和 Button 在同一行

Android EditText and Button on same line

提问by Ian Vink

I need to have a Edittextbeside a Search button. The EditTextshould fill as much of the width as possible, the button should be to the right and be just big enough to have it's text.

我需要在Edittext旁边有一个Search button. 本EditText应填写尽可能多的宽度尽可能的按钮应该是正确的，并正好足够大到有它的文本。

It looks like this now:

现在看起来像这样：

[EDIT TEXT][Search]

but should look like this:

但应该是这样的：

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

Here is the XML:

这是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>

回答by Asahi

Does it have to be Relative Layout?
I would suggest the following: set EditTextlayout_widthto fill_parentand its layout_weightto 1, something like this:

它必须是相对布局吗？
我建议如下：设置EditTextlayout_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>

回答by Cristian

In that case, the width for the EditTextmust be set to fill_parent(instead of wrap_content):

在这种情况下，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>

Edit

编辑

As you said, it hides the button. Then, just invert the order:

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

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

回答by Kevin Coppock

I believe Cristian's answer works on later versions of the SDK, but for prior versions what you'll need to do is define the Button first, and place the EditText to layout_toLeftOf="@id/search_box", which, by the way, both objects should have different IDs.

我相信 Cristian 的答案适用于更高版本的 SDK，但对于以前的版本，您需要先定义 Button，然后将 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>

回答by ud_an

try this i have fixed little. it shows button right of edit text and also edit text width allowed to increase.

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

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

回答by berkcodes

For those who want a solution for a Relative Layout, try this. My goals was to keep the button size the same but adjust the EditText field when the phone was rotated to landscape mode or on different phone screen sizes.

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

So the trick is to use a combination of margins and aligning the parent to the start. Here is something you can try, I pulled this directly from my app.

所以诀窍是使用边距的组合并将父级与开头对齐。这是您可以尝试的东西，我直接从我的应用程序中提取了它。

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

What you'll get is the EditText will change in size depending on screen-width while the button will remain fixed at the end. The button sticks at the end because of android:layout_alignParentEnd="true". And to stop the EditText from overrunning the Button, android:layout_marginEnd="100dp"is used. Hope this helps!

您将得到的是 EditText 将根据屏幕宽度更改大小，而按钮将在最后保持固定。由于 ，按钮卡在最后android:layout_alignParentEnd="true"。并阻止 EditText 超出 Button，android:layout_marginEnd="100dp"使用。希望这可以帮助！