?

最近，有點空閑的時間就拿QQ登錄界面來模仿練手，做了個簡單的登錄界面。界面一般般吧，不算很漂亮，現在拿出來分享，希望大家一起學習與進步。有什么不足之處，請各位大俠多多賜教，謝謝。這個界面涉及到LinearLayout、TableLayout和RelativeLayout等等。話不多說，先把截圖弄出來先。

?1、320 * 480模擬器上運行的效果圖

?

2、480 * 800模擬器上運行的效果圖

?

3、在Eclipse下截的大綱視圖，這樣看起來比較直觀

　　　　　

4、XML代碼(各個布局的說明已經很清楚了)：?

1 <?xml version="1.0" encoding="utf-8"?> 2 <!-- 插入整個布局的背景圖片 --> 3 <LinearLayout 4 xmlns:android="http://schemas.android.com/apk/res/android" 5 android:layout_width="fill_parent" 6 android:layout_height="fill_parent" 7 android:orientation="vertical" 8 android:background="@drawable/back"> 9 <!-- QQ登錄界面最上面的圖片 --> 10 <ImageView 11 android:id="@+id/imageView1" 12 android:layout_width="wrap_content" 13 android:layout_height="wrap_content" 14 android:src="@drawable/qq" /> 15 <!-- 水平布局，包括QQ頭像和輸入信息的賬號和密碼 --> 16 <LinearLayout 17 android:orientation="horizontal" 18 android:layout_width="fill_parent" 19 android:layout_height="wrap_content" > 20 <!-- QQ頭像，插入圖片，重心垂直居中,四周擴充3個像素 --> 21 <ImageView 22 android:id="@+id/head" 23 android:layout_width="wrap_content" 24 android:layout_height="wrap_content" 25 android:padding="3dip" 26 android:layout_gravity="center_vertical" 27 android:src="@drawable/head" /> 28 <!-- 表格布局，包括賬號和密碼 --> 29 <TableLayout 30 android:id="@+id/tableLayout1" 31 android:layout_width="wrap_content" 32 android:layout_height="wrap_content" 33 android:stretchColumns="1"> 34 <!-- 表格的第一行，賬號文本和輸入框，黑色粗體字，重心靠右，四周擴充5個像素 --> 35 <TableRow> 36 <!-- "賬號"文本 --> 37 <TextView 38 android:text="賬號:" 39 android:textStyle="bold" 40 android:textColor="#000000" 41 android:gravity="right" 42 android:padding="5dip"/> 43 <!-- "賬號"輸入框，文本超出TextView的寬度的情況下，出現橫拉條 --> 44 <EditText 45 android:id="@+id/username" 46 android:scrollHorizontally="true"/> 47 </TableRow> 48 <!-- 表格的第二行，密碼和密碼輸入框，黑色粗體字，重心靠右，擴充5個像素 --> 49 <TableRow> 50 <!-- "密碼"文本 --> 51 <TextView 52 android:text="密碼:" 53 android:textStyle="bold" 54 android:textColor="#000000" 55 android:gravity="right" 56 android:padding="5dip"/> 57 <!-- "密碼"輸入框；文本超出TextView的寬度的情況下，出現橫拉條 --> 58 <EditText 59 android:id="@+id/password" 60 android:password="true" 61 android:scrollHorizontally="true"/> 62 </TableRow> 63 </TableLayout> 64 </LinearLayout> 65 <!-- 相對布局，"記住密碼"按鈕和"自動登錄"按鈕 --> 66 <RelativeLayout 67 android:layout_width="fill_parent" 68 android:layout_height="wrap_content"> 69 <!-- "記住密碼"多選框，黑體字，左縮進5個像素，選中狀態 --> 70 <CheckBox 71 android:id="@+id/rememberPassword" 72 android:layout_width="wrap_content" 73 android:layout_height="wrap_content" 74 android:text="記住密碼" 75 android:textColor="#000000" 76 android:checked="true" 77 android:layout_marginLeft="5dip"/> 78 <!-- "自動登錄"多選框，黑體字，右縮進5個像素，與"記住密碼"按鈕的頂部和右邊對齊 --> 79 <CheckBox 80 android:id="@+id/autoLogin" 81 android:layout_width="wrap_content" 82 android:layout_height="wrap_content" 83 android:text="自動登錄" 84 android:textColor="#000000" 85 android:layout_marginRight="5dip" 86 android:layout_alignParentTop="true" 87 android:layout_alignParentRight="true"/> 88 </RelativeLayout> 89 <!-- "登錄"按鈕，重心垂直居中，距頂部和底部3個像素，左右擴充80個像素 --> 90 <Button 91 android:id="@+id/login_bt" 92 android:text="登 錄 " 93 android:paddingTop="3dip" 94 android:paddingBottom="3dip" 95 android:paddingLeft="80dip" 96 android:paddingRight="80dip" 97 android:layout_width="wrap_content" 98 android:layout_height="wrap_content" 99 android:layout_gravity="center_horizontal"/> 100 <!-- 絕對布局，"隱身登錄"按鈕和"開機振動"按鈕以下部分，距頂部3個像素 --> 101 <RelativeLayout 102 android:id="@+id/relativeLayout1" 103 android:layout_width="fill_parent" 104 android:layout_height="fill_parent" 105 android:layout_marginTop="3dip" > 106 <!-- "隱身登錄"按鈕，左縮進5個像素，黑字體，選中狀態 --> 107 <CheckBox 108 android:id="@+id/hidingLogin" 109 android:layout_width="wrap_content" 110 android:layout_height="wrap_content" 111 android:layout_marginLeft="5dip" 112 android:text="隱身登錄" 113 android:textColor="#000000" 114 android:checked="true"/> 115 <!-- "開機振動"按鈕，右縮進5個像素，黑字體，選中狀態 ，與"隱身登錄"按鈕的頂部和右邊對齊--> 116 <CheckBox 117 android:id="@+id/startVibrate" 118 android:layout_width="wrap_content" 119 android:text="開機振動" 120 android:layout_marginRight="5dip" 121 android:textColor="#000000" 122 android:layout_height="wrap_content" 123 android:layout_alignParentTop="true" 124 android:layout_alignParentRight="true"/> 125 <!-- "接收群消息"按鈕，左縮進5個像素，黑字體，選中狀態 ，在"隱身登錄"按鈕的下面--> 126 <CheckBox 127 android:id="@+id/receiveGroupMessage" 128 android:layout_width="wrap_content" 129 android:text="接收群消息" 130 android:layout_marginLeft="5dip" 131 android:textColor="#000000" 132 android:layout_height="wrap_content" 133 android:layout_below="@id/hidingLogin" 134 android:checked="true"/> 135 <!-- "靜音登錄"按鈕，右縮進5個像素，黑體字，選中狀態，在"開機振動"按鈕的下面，靠右 --> 136 <CheckBox 137 android:id="@+id/silenceLogin" 138 android:textColor="#000000" 139 android:layout_width="wrap_content" 140 android:text="靜音登錄" 141 android:layout_marginRight="5dip" 142 android:layout_height="wrap_content" 143 android:layout_below="@+id/startVibrate" 144 android:layout_alignParentRight="true" 145 android:checked="true"/> 146 <!-- "菜單"按鈕，距離底部2個像素，上下擴充3個像素，左右擴充20個像素，與"接收群消息"按鈕左對齊，底部對齊 --> 147 <Button 148 android:id="@+id/menu" 149 android:layout_width="wrap_content" 150 android:layout_height="wrap_content" 151 android:text="菜 單" 152 android:paddingTop="3dip" 153 android:paddingBottom="3dip" 154 android:paddingLeft="10dip" 155 android:paddingRight="10dip" 156 android:layout_marginBottom="2dip" 157 android:layout_alignParentBottom="true" 158 android:layout_alignLeft="@+id/receiveGroupMessage"/> 159 </RelativeLayout> 160 </LinearLayout>

源碼下載地址：QQUiDemo.rar　

?

轉載于:https://www.cnblogs.com/yangyu20121220/archive/2012/08/19/2646736.html

總結

以上是生活随笔為你收集整理的Android UI布局—— 仿QQ登录界面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。