圆角矩形背景editext，背景边框的左上角带有提示 [英] Rounded rectangle background editext with hint in left top of background border

问题描述

我陷入了创建UI的困境.请帮我创建它.

I got stuck in creating UI. please help me out creating that .

我有一个带有圆形矩形边框的EditText，可以，但是占位符在边框的顶部，离开边框.

I have a EditText having rounded rectangle border which is ok but placeholder is in the top of border leaving the border.

这是图片

谢谢.

推荐答案

您必须使用可绘制矢量，用于根据需要创建自定义形状.

You have to use Vector Drawable for creating custom shape as you need.

我为此创建了一个示例. 在 res/drawable/

I have created a sample for the same. Create custom_vector.xml file under res/drawable/

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="20dp"
    android:width="20dp"
    android:viewportWidth="400"
    android:viewportHeight="400">

    <group
        android:pivotX="10.0"
        android:pivotY="10.0">

        <!-- the outside box -->

        <!-- top line & top left corner -->
        <path android:pathData="M 30 60 H 40 c -40 0 -35 0 -35 35 "
            android:strokeColor="#000000" android:strokeWidth="10" />

        <!-- left line & bottom left corner -->
        <path android:pathData="M 5 64 v 271 c 0 40 0 35 35 35 "
            android:strokeColor="#000000" android:strokeWidth="10" />

        <!-- bottom line & bottom right corner -->
        <path android:pathData="M 30 370 h 330 c 40 0 35 -10 35 -35"
            android:strokeColor="#000000" android:strokeWidth="10" />

        <!-- right line & top right corner -->
        <path android:pathData="M 395 356 v -261 c0 -40 0 -35 -50 -35"
            android:strokeColor="#000000" android:strokeWidth="10" />

        <!-- top line till end-->
        <!-- 140 is the starting point of line after TEXT-->
        <path android:pathData="M 140 60 370 60"
            android:strokeColor="#000000" android:strokeWidth="10" />
    </group>
</vector>

您可能需要更改最后一个路径标签的值

You may have to change the value of last path tag

顶行到结束

top line till end

根据您在名称" 处的文字.您还可以根据需要修改形状或拐角.

as per your text at the place of 'Name'. You can also modify the shape or corners as you want.

在 res/layout/

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#faffd5">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/custom_vector"
        android:layout_margin="20dp"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="40dp"
            android:paddingLeft="5dp"
            android:textSize="20sp"
            android:paddingRight="5dp"
            android:text="Name"/>

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="40dp"
            android:layout_marginRight="20dp"
            android:layout_marginBottom="15dp"
            android:textSize="25sp"
            android:background="@android:color/transparent"
            android:text="Alex Smith"/>

    </LinearLayout>
</LinearLayout>

它看起来像这张屏幕截图

It appears like this screenshot

这篇关于圆角矩形背景editext，背景边框的左上角带有提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！