自定义设计文本框

Question

我想设计上面的文本框，但不知道如何做。

我已经搜索了上面的 png,svg 没有找到。

有什么建议可以帮我吗？

Answer 1

解决方法：使用LayerDrawable实现你的文本框设计。

什么是简单的LayerDrawable？

A LayerDrawable is a drawable object that manages an array of other drawables. Each drawable in the list is drawn in the order of the list—the last drawable in the list is drawn on top.

Each drawable is represented by an element inside a single element.

根据你的文本框设计，我将分为4个元素。

顶部水平中心的箭头图标
矩形文本框内容
位图中的左上角图像
位图中的右上角

全部放入background_text_box.xml文件中：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- The arrow in triangle by rotate a rectangle 45 degrees -->
    <item
        android:width="10dp"
        android:height="10dp"
        android:gravity="center_horizontal"
        android:top="0dp">
        <rotate android:fromDegrees="45">
            <shape android:shape="rectangle">
                <solid android:color="#FFF1A4" />
            </shape>
        </rotate>

    </item>

    <!-- The content in rectangle -->
    <item
        android:width="300dp"
        android:height="100dp"
        android:gravity="fill"
        android:top="5dp">
        <shape android:shape="rectangle">
            <solid android:color="#FFF1A4" />
        </shape>
    </item>

    <!-- The left corner image in bitmap-->
    <item
        android:gravity="top|left"
        android:top="5dp">
        <bitmap android:src="@drawable/icon" />
    </item>

    <!-- The right corner image in bitmap -->
    <item
        android:gravity="top|right"
        android:top="5dp">
        <bitmap android:src="@drawable/icon" />
    </item>

</layer-list>

结果如下：

我们来测试一下：

activity_main.xml

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

    <TextView
        android:id="@+id/spinner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingStart="50dp"
        android:paddingEnd="50dp"
        android:gravity="center"
        android:text="Congratulation...!\nLaxminarayan is top performaer\nof month December 2017"
        android:background="@drawable/background_text_box"/>
</LinearLayout>

文本框如下所示：

自定义设计文本框

Custom design Text Box

android

textbox

textview

android-custom-view