圓角矩形背景editext與背景邊框左上角的提示

Question

我在創建用戶界面時遇到困難。請幫助我創建。

我有一個EditText有圓角的矩形邊框，但是佔位符在離開邊框的邊框的頂部。

這裏是圖像預先

感謝。

Answer 1

你必須使用Vector Drawable用於創建自定義形狀，因爲你需要。

我爲此創建了一個樣本。 創建custom_vector.xml下的文件RES /繪製/

<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> 

您可能需要更改的最後一個路徑變量的值

頂線，直到結束

爲根據您的文本在處'姓名'。您也可以根據需要修改形狀或角落。

下RES /佈局創建test_layout.xml文件/

<?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> 

看起來像這樣的屏幕截圖

Answer 2

試試下面...

你實現這個使用ConstraintLayout。

<?xml version="1.0" encoding="utf-8"?> 
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/linearLayout" 
    android:layout_width="match_parent" 
    android:background="@android:color/white" 
    android:layout_height="match_parent" 
    android:orientation="vertical"> 

    <EditText 
     android:id="@+id/edittext" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_margin="@dimen/_10sdp" 
     android:layout_marginBottom="8dp" 
     android:layout_marginEnd="8dp" 
     android:layout_marginStart="8dp" 
     android:layout_marginTop="8dp" 
     android:background="@drawable/round" 
     android:padding="@dimen/_10sdp" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintEnd_toEndOf="parent" 
     app:layout_constraintStart_toStartOf="parent" 
     app:layout_constraintTop_toTopOf="parent" /> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="@android:color/white" 
     android:padding="@dimen/_5sdp" 
     android:text="Name" 
     app:layout_constraintLeft_toLeftOf="@+id/edittext" 
     android:layout_marginLeft="@dimen/_15sdp" 
     app:layout_constraintTop_toTopOf="@+id/edittext" 
     app:layout_constraintBottom_toTopOf="@+id/edittext" 
     android:textColor="@android:color/black" 
     tools:layout_editor_absoluteX="107dp" 
     tools:layout_editor_absoluteY="90dp" /> 
</android.support.constraint.ConstraintLayout> 

round.xml

<?xml version="1.0" encoding="utf-8"?> 
<!-- res/drawable/rounded_edittext.xml --> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle" android:padding="10dp"> 
    <solid android:color="#FFFFFF"/> 
    <stroke android:color="@android:color/darker_gray" android:width="@dimen/_1sdp"/> 
    <corners 
     android:bottomRightRadius="15dp" 
     android:bottomLeftRadius="15dp" 
     android:topLeftRadius="15dp" 
     android:topRightRadius="15dp"/> 
</shape> 

輸出：see