如何创建包含两个图像的文本编辑器？

Question

请看下面的模型：

我想用两个可绘制对象创建这种编辑文本控件。左侧的一张图片仅显示搜索图标。另一张图片位于右侧，与搜索图标和搜索文本对齐。搜索文本编辑器位于两张图片之间。

我怎样才能像上图一样创建编辑文本？

Answer 1

您不需要任何特别的东西。只需使用包含三个对象的容器：

容器包含：
- 搜索图标 image/link
- 文本框
- （可能是内嵌管道字符或图像？）
- 心icon/link

您可能需要摆弄这些对象才能使它们正确排列，但这是最简单的方法。

我看到还有一个| （管道外观）character/image 在文本框和心脏之间。这可以是第四对象或心脏图像的一部分。由你决定。

顺便说一下，如果您环顾四周，您可能会发现带有心形和 "search" 图标字符的字体，因此您根本不必管理图像。如果您使用字体，您将只拥有一个包含两个或三个标签和一个文本编辑框的容器。

Answer 2

如果管道和心脏只有一个 drawable，你可以使用 android:drawableLeft 和 android:drawableRight

<EditText 
    android:id="@+id/buttonId"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableLeft="@drawable/search"
    android:drawableRight="@drawable/heart"
    android:drawablePadding="5dip"
    android:gravity="center" />

Answer 3

我可能会创建一个扩展 LinearLayout 的自定义视图。并使用这样的布局。

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

     <ImageView/> <!-- For search icon -->

     <EditText/> <!-- with custom background which has alpha 0 -->

     <View/> <!-- for the divider -->

     <ImageView/> <!-- for heart icon -->
</LinearLayout>

还有我的习惯class

public class CustomEditText extends LinearLayout {

    private EditText editText;
    // Other views if necessary        

    public CustomEditText(Context context) {
        LayoutInflater inflater = (LayoutInflater) context
                   .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        inflater.inflate(R.layout.custom_layout,
                   this, true);
        editText = (EditText)findViewById(R.id.my_edittext_id);
    }

    public String getText() {
        return editText.getText().toString();
    }

 }

您可以通过添加 TextWatcher 和听众使其更具交互性。

如何创建包含两个图像的文本编辑器？

How can I create a text editor that contains two image?

android

android-layout