2015-12-02 112 views
0

我正在嘗試創建登錄活動。所以,我選擇了登錄活動,但登錄頁面看起來很平面。這裏的佈局,我想在登錄頁面來實現自定義EditText:用於登錄頁面的輸入框類型

enter image description here

我使用的變化下面繪製佈局:

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:thickness="0dp" 
android:shape="rectangle"> 
<stroke 
    android:width="2dp" 
    android:color="#C8CAD0"/> 
<corners 
    android:radius="1dp" /> 
</shape> 

,給了我這樣的:

enter image description here

我想將兩個字段之間的公共邊界合併爲一個單一的粗線ss 1dp。

下面是這兩個領域的XML - 用戶名和密碼:

  <AutoCompleteTextView 
       android:id="@+id/email" 
       android:layout_width="match_parent" 
       android:layout_height="50dp" 
       android:hint=" Username or Email" 
       android:inputType="textEmailAddress" 
       android:background="@drawable/box_input_field"/> 

      <EditText 
       android:id="@+id/password" 
       android:layout_width="match_parent" 
       android:layout_height="50dp" 
       android:background="@drawable/box_input_field" 
       android:hint=" Password" 
       android:imeActionId="@+id/login" 
       android:imeActionLabel="@string/action_sign_in_short" 
       android:imeOptions="actionUnspecified" 
       android:inputType="textPassword" /> 
+0

謝謝,這工作得非常好! –

回答

1

我在這個方法做的。 爲電子郵件視圖和密碼視圖創建2個不同的可繪製對象。 顯示下面2個可繪製的, 我設置<item android:top="-1dp">edittext_bottom_curv_gray.xml用於使中線變薄。

這看起來像這樣=>

enter image description here的EditText style.xml

<style name="EditTextStyle"> 
     <item name="android:textColor">#000000</item> 
     <item name="android:gravity">center_vertical</item> 
     <item name="android:singleLine">true</item> 
     <item name="android:textSize">15sp</item> 
     <item name="android:padding">10dp</item> 
     <item name="android:textColorHint">#9A9A9A</item> 

繪製對象1電子郵件領域的

<EditText 
    android:id="@+id/edtTxtUserEmail" 
    style="@style/EditTextStyle" 
    android:layout_width="match_parent" 
    android:layout_height="42dp" 
    android:layout_marginLeft="10dp" 
    android:layout_marginRight="10dp" 
    android:background="@drawable/edittext_top_curv_gray" 
    android:hint="Email" 
    android:inputType="textEmailAddress" /> 

<EditText 
    android:id="@+id/edtTxtUserPassword" 
    style="@style/EditTextStyle" 
    android:layout_width="match_parent" 
    android:layout_height="42dp" 
    android:layout_marginBottom="10dp" 
    android:layout_marginLeft="10dp" 
    android:layout_marginRight="10dp" 
    android:layout_marginTop="-1dp" 
    android:background="@drawable/edittext_bottom_curv_gray" 
    android:hint="Password" 
    android:inputType="textPassword" /> 

風格。

edittext_top_curv_gray。XML

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item > 
     <shape 
      xmlns:android="http://schemas.android.com/apk/res/android" 
      android:shape="rectangle" > 
      <solid android:color="#FFFFFF" /> 
      <stroke 
       android:width="2dp" 
       android:color="#BBBBBB" > 
      </stroke> 
      <corners 
       android:topLeftRadius="3dp" 
       android:topRightRadius="3dp" /> 
     </shape> 
    </item> 
</layer-list> 

可繪製2密碼字段。

edittext_bottom_curv_gray.xml

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:top="-1dp"> 
     <shape 
      android:shape="rectangle" > 
      <solid android:color="#FFFFFF" /> 
      <stroke 
       android:width="2dp" 
       android:color="#BBBBBB" > 
      </stroke> 
      <corners 
       android:bottomLeftRadius="3dp" 
       android:bottomRightRadius="3dp" /> 
     </shape> 
    </item> 
</layer-list> 
+0

這很漂亮。可以做這項工作,但最好是我可以擁有1dp寬的共同邊界,而其他邊界是2dp。 –

+0

等待我會發布第二種方法來做到這一點。 –

0

檢查和修改根據您的需要:

<LinearLayout 
        android:layout_width="0dp" 
        android:layout_height="wrap_content" 
        android:layout_weight="3" 
        android:background="@drawable/rounded_linear" 
        android:orientation="vertical"> 

        <AutoCompleteTextView 
         android:id="@+id/org_editBox" 
         android:layout_width="match_parent" 
         android:layout_height="40dp" 
         android:background="@null" 
         android:hint="@string/hint_org" 
         android:paddingEnd="10dp" 
         android:paddingLeft="10dp" 
         android:paddingRight="10dp" 
         android:paddingStart="10dp" 
         android:textSize="14sp" /> 

        <View 
         android:id="@+id/view2" 
         android:layout_width="fill_parent" 
         android:layout_height="0.3dp" 
         android:background="#D3D3D3" /> 


        <AutoCompleteTextView 
         android:id="@+id/salesperson_editBox" 
         android:layout_width="match_parent" 
         android:layout_height="40dp" 
         android:background="@null" 
         android:hint="@string/hint_sales_person" 
         android:paddingEnd="10dp" 
         android:paddingLeft="10dp" 
         android:paddingRight="10dp" 
         android:paddingStart="10dp" 
         android:textSize="14sp" /> 

        <View 
         android:id="@+id/view3" 
         android:layout_width="fill_parent" 
         android:layout_height="0.3dp" 
         android:background="#D3D3D3" /> 

        <EditText 
         android:id="@+id/orgtype_editBox" 
         android:layout_width="match_parent" 
         android:layout_height="40dp" 
         android:background="@null" 
         android:hint="@string/hint_org_type" 
         android:paddingEnd="10dp" 
         android:paddingLeft="10dp" 
         android:paddingRight="10dp" 
         android:paddingStart="10dp" 
         android:textSize="14sp" /> 

       </LinearLayout> 

rounded_linear.xml:

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

    <solid android:color="#FFFFFF" /> 

    <stroke 
     android:width="0.3dp" 
     android:color="#D3D3D3" /> 

    <padding 
     android:bottom="1dp" 
     android:left="1dp" 
     android:right="1dp" 
     android:top="1dp" /> 

    <corners 
     android:bottomLeftRadius="5dp" 
     android:bottomRightRadius="5dp" 
     android:topLeftRadius="5dp" 
     android:topRightRadius="5dp" /> 

</shape> 
0

你可以將兩個EditText放在一個垂直LinearLayout中,並設置divider屬性來處理兩個領域之間的界限。然後,您可以將現有繪圖設置爲LinearLayout bg,而無需進行任何更改。

0

爲了使這個簡單,你可以:

  • 場所內的LinearLayout
  • 那些edittexts添加背景色(#C8CAD0),並用相同的值高度它們之間的簡單查看行程(2DP)
  • 集box_input_field爲背景的LinearLayout