android - 如何构建用于登录的 UI

Question

我想让我的用户界面与此类似。作为android的新手，我想获得一些帮助，我应该如何解决这个问题。

我正在考虑 listView 持有 2 行（电子邮件/密码）和一个页脚（登录按钮）。

一个有经验的安卓开发者将如何构建这个 UI？

Answer 1

我会创建一个RelativeLayout灰色背景（Color.LTGRAY），或者使用一个 9-patch 纹理图像。作为孩子们的观点，我会在顶部附近居中放置一个标题图像，并ImageButton在一个均匀间隔的水平居中使用两个 s LinearLayout，. 登录部分将是LinearLayout一个白色（Color.WHITE）背景，我会在上面为每个行分隔符添加一个图像。s将EditText具有清晰的 (android.R.color.transparent) 背景，并且提示将分别设置为“电子邮件地址”和“密码”。下面将是一个带有黑色文本的清除按钮，显示“登录”。最后，TextView位于布局中心的按钮和 ImageButtons 之间的 a 将显示文本“或登录使用”。

Answer 2

这是您需要的 XML 代码。根据您的需要更改它

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

    <LinearLayout 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="10dp">

        <TextView 
            android:layout_width="match_parent"
            android:layout_height="wrap_content" 
            android:gravity="center" 
            android:id="@+id/name" 
                android:text="Your company name"/>

        <TextView 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:gravity="center" 
            android:id="@+id/tv_login_info" 
            android:text="Login" />

        <TableLayout 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content">

            <TableRow 
                android:layout_marginBottom="15dp"
                android:layout_marginTop="15dp">
                <TextView 
                    android:layout_width="0dp" 
                    android:layout_height="wrap_content" 
                    android:layout_weight="0.25"
                    android:gravity="right" 
                    android:id="@+id/tv_user" 
                    android:text="User" 
                     />

                <EditText  
                    android:layout_width="0dp"
                                android:layout_weight="0.75"
                    android:id="@+id/et_user"
                    android:singleLine="true">
                    <requestFocus/>
                </EditText >    
            </TableRow>

            <TableRow>
                <TextView 
                    android:layout_width="0dp" 
                    android:layout_height="wrap_content"
                    android:layout_weight="0.25" 
                    android:gravity="right" 
                    android:id="@+id/tv_password" 
                    android:text="Password" 
                />

                <EditText  
                    android:layout_width="0dp" 
                    android:layout_weight="0.75"
                    android:id="@+id/et_password"           
                    android:password="true"
                    android:singleLine="true"/>
             </TableRow>
        </TableLayout>

        <LinearLayout 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:layout_marginTop="20dp"
            android:gravity="center">
                <Button
                    android:id="@+id/btn_fb" 
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content" 
                    android:text="Facebook"/>
                <Button
                    android:id="@+id/btn_twitter" 
                    android:layout_width="wrap_content" 
                    android:layout_height="wrap_content" 
                    android:text="Twitter"  />            

        </LinearLayout>

        <TextView
            android:id="@+id/tv_filler" 
            android:layout_height="0dp"            
            android:layout_width="fill_parent"           
            android:layout_weight="1"/> 


    </LinearLayout>
</ScrollView>