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

Question

请参阅下面的模型：

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

如何创建如上图所示的编辑文字？

Answer 1

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

• 容器持有：

  • 搜索图标图片/链接
  • 文字框
  • （也许是一个内嵌的管道字符或图像？）
  • 心形图标/链接

您可能必须使用对象来使它们正确排列，但这将是最简单的方法。

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

顺便说一句，如果你环顾四周，你可能会发现有心脏和“搜索”图标字符的字体，所以你根本不需要管理图像。如果你使用字体，你只需要一个带有两个或三个标签的容器和一个文本编辑框。

Answer 2

如果管道和心脏只有一个可绘制的话，你可以使用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>

我的自定义课程

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和听众来使其更具互动性。