自定义设计文本框

Posted 2021-04-20

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

我有搜索png，svg上面没有发现任何。

请帮帮我任何建议？

答案

解决方案：使用LayerDrawable实现文本框设计。

什么是简单的LayerDrawable？

LayerDrawable是一个可绘制的对象，用于管理其他drawable的数组。列表中的每个drawable都按列表的顺序绘制 - 列表中的最后一个drawable绘制在顶部。

每个drawable由单个元素内的元素表示。

从您的文本框设计，我将分为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...!
Laxminarayan is top performaer
of month December 2017"
        android:background="@drawable/background_text_box"/>
</LinearLayout>

文本框如下所示：