如何構建UI的登錄

Question

我想使我的UI與此類似。 作爲android新手，我想得到一些幫助，我應該如何解決這個問題。

我在想着listView持有2行（電子郵件/密碼）和一個頁腳（登錄按鈕）。

有經驗的android開發人員將如何構建此UI？

Answer 1

我想創建帶有灰色背景（Color.LTGRAY）一RelativeLayout，或使用9補丁，紋理圖像。隨着孩子們的看法，我會將標題圖像放在靠近頂部的位置，並且使用兩個ImageButton s以均勻間隔，水平居中，LinearLayout。登錄部分將是一個帶有白色（Color.WHITE）背景的LinearLayout，通過它我可以爲每個行分隔符添加一個圖像。 EditText s會有清晰的（android.R.color.transparent）背景，並且提示將分別設置爲「電子郵件地址」和「密碼」。下面是一個清晰的按鈕，黑色文字顯示「登錄」。最後，按鈕和ImageButtons之間的一個TextView（以佈局爲中心）將顯示文本「或使用登錄名」。

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>