Android：开发像Facebook这样的登录屏幕

Question

我试图在我的Android应用程序上开发一个像facebook登录（App iPhone / Android）的屏幕 App Facebook Screenshot

如何在这两个edittexts之间绘制这个分隔线：电子邮件和密码？

谢谢！

Answer 1

为了达到这样的效果，你只需制作自己的9-patch drawable。我已经在我的应用程序上完成了这样的事情，请参阅this

布局顶部可绘制未按下

布局顶部可绘制

布局底部可绘制的未压缩

布局底部可绘制

唯一剩下的就是为顶部编辑文本构建两个选择器，为底部edittext构建另一个选择器，并将它们设置为编辑文本的背景：

selector_top_editText.xml：

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

    <item android:drawable="@drawable/layout_top_pressed" android:state_pressed="true"/>
    <item android:drawable="@drawable/layout_top_normal"/>

</selector>

selector_bottom_editText.xml：

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

    <item android:drawable="@drawable/layout_bottom_pressed" android:state_pressed="true"/>
    <item android:drawable="@drawable/layout_bottom_normal"/>

</selector>

对于您的登录页面，您可以使用此布局

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


        <EditText
            android:id="@+id/editText1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:ems="10"
            android:inputType="textPersonName"
            android:background="@drawable/layout_top_selector" />

        <EditText
            android:id="@+id/editText2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:ems="10"
            android:inputType="textPassword" 
            android:background="@drawable/layout_bottom_selector"
            android:layout_below="@id/editText1"/>

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="46dp"
            android:text="Login" />

</RelativeLayout>

检查这一点，如果发现问题，请与我保持联系

干杯

Answer 2

如果您想在视图之间画一条线，这将有助于

<View
         android:layout_width="fill_parent"
         android:layout_height="2dip"
         android:background="#FF909090" />

如果您希望自定义EditText，这些链接here和here可能会对您有所帮助。