android - ログイン用の UI を構築する方法

Question

これに似たUIを作りたいです。Android を初めて使用するので、これにどのようにアプローチするべきかについて助けを求めたいと思います。

2 行 (電子メール/パスワード) と 1 つのフッター (ログイン ボタン) を保持する listView を考えています。

経験豊富な Android 開発者は、この UI をどのように構築しますか?

Answer 1

RelativeLayoutグレーの背景 (Color.LTGRAY) を作成するか、9 パッチのテクスチャ イメージを使用します。子供たちが見るように、タイトル画像を上部の中央に配置し、2 つImageButtonの を等間隔で水平方向に中央に配置しLinearLayoutます。ログイン部分はLinearLayout白 (Color.WHITE) の背景で、その上に各行区切りの画像を追加します。sのEditText背景はクリア (android.R.color.transparent) になり、ヒントはそれぞれ「メール アドレス」と「パスワード」に設定されます。以下は、「ログイン」を表示する黒いテキストのクリア ボタンです。最後にTextView、レイアウトの中央に配置されたボタンと ImageButtons の間の に、「or login using」というテキストが表示されます。

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>