高仿Android QQ2012登陸界面和注冊界面是怎樣的

這篇文章給大家介紹高仿Android QQ2012登陸界面和注冊界面是怎樣的，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

漂亮的UI能給用戶帶來良好的體驗，在android應用中一直尤為重要，這次模仿的是QQ2012 Android版的的最新登陸界面以及部分注冊 的功能，簡潔漂亮的UI給人耳目一新的感覺，但看似簡單的布局要真的自己做起來還是會遇到很多的困難，尤其是木有什么美工的基礎，先上圖片看下做完后的效 果，有個別的地方還是與原版有出入的。

首先下載官方最新的QQ2012APK文件，然后將后綴名改為.rar打開后可以獲得全部鎖需要的圖片資源，嘿嘿，好多.9的圖片都不需要自己再做了~！，之后既要研究該如何去模仿這款應用的布局了。

究竟怎樣控制好各個控件之間的排布，如何確定各種布局的嵌套呢？既然是優秀的UI界面，我們來完全模仿，那就可以直接照搬QQ的設計排版，這里我用到了android中自帶的層級觀察器hierarchyviewer工具來分析UI的布局，hierarchyviewer是非常之實用的工具，即可以用來優化自己的布局，也可以用來參考別人優秀的布局，在\android-sdk-windows\tools目錄下雙擊即可以使用。

分成四個區域，左邊較大的工作區即是當前UI的整體布局，一層級的方式排列展示出來，右側的分三塊區域，上邊是左側的縮略圖，中間是當前選中布局的 屬性介紹，可以點擊查看具體的數值，很  方便，下邊是點擊當前布局的實際效果，通過這些就可以了解當前UI是怎樣的布局，具體用到了哪些布局方式和控件，一目了然。

點擊Inspect Scrrenshot進入，左側區域是當前布局的樹狀結構，這樣看起來布局更容易理解，右側是當前頁面的圖像，可以通過鼠標移動十字交叉處選中當前元素，而具體的信息就會在中 間顯示出來。包括所選地方的顏色值，坐標信息，也可以通過放大來進一步進行細微的操作。通過這個工具，怎么樣？是不是可以很輕松的把自己喜歡的UI模仿學 習下來呢~！

以下是部分布局的代碼，具體的java代碼可以自行下載研究，我也寫了比較幼稚的注釋嘿嘿：

登陸界面的布局：

[java]

<?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"       android:background="@drawable/login_bg"       android:orientation="vertical" >          <ImageView           android:id="@+id/image_logo"           android:layout_width="wrap_content"           android:layout_height="wrap_content"           android:layout_marginLeft="42dp"           android:layout_marginRight="42dp"           android:layout_marginTop="40dp"           android:src="@drawable/login_pic2" />          <LinearLayout           android:id="@+id/linearLayout01"           android:layout_width="fill_parent"           android:layout_height="wrap_content"           android:layout_below="@id/image_logo"           android:layout_marginLeft="42dp"           android:layout_marginRight="42dp"           android:background="@drawable/login_input"           android:orientation="vertical" >              <LinearLayout               android:layout_width="fill_parent"               android:layout_height="wrap_content"               android:orientation="horizontal" >                  <EditText                   android:id="@+id/et_qqNum"                   android:layout_width="220dp"                   android:layout_height="40dp"                   android:background="#00ffffff"                   android:hint="請輸入QQ號碼"                   android:inputType="number"                   android:paddingLeft="10dp" />                  <Button                   android:id="@+id/btn_more_pop"                   android:layout_width="10dp"                   android:layout_height="8dp"                   android:layout_gravity="center"                   android:layout_marginRight="10dp"                   android:layout_weight="1"                   android:background="@drawable/login_input_arrow" />           </LinearLayout>              <View               android:layout_width="fill_parent"               android:layout_height="1dp"               android:layout_marginLeft="1dp"               android:layout_marginRight="1dp"               android:background="@drawable/divider_horizontal_line" />              <EditText               android:id="@+id/et_qqPwd"               android:layout_width="fill_parent"               android:layout_height="40dp"               android:background="#00ffffff"               android:hint="請輸入密碼"               android:inputType="textPassword"               android:paddingLeft="10dp" />       </LinearLayout>          <Button           android:id="@+id/btn_login"           android:layout_width="fill_parent"           android:layout_height="wrap_content"           android:layout_below="@id/linearLayout01"           android:layout_marginLeft="42dp"           android:layout_marginRight="42dp"           android:layout_marginTop="10dp"           android:background="@drawable/login_button_select"           android:text="登陸" />          <RelativeLayout           android:layout_width="fill_parent"           android:layout_height="wrap_content"           android:layout_below="@id/btn_login"           android:layout_marginLeft="42dp"           android:layout_marginRight="42dp" >              <CheckBox               android:layout_width="wrap_content"               android:layout_height="wrap_content"               android:background="@null"               android:button="@null"               android:checked="true"               android:drawableLeft="@drawable/checkbox_bg"               android:paddingTop="2dp"               android:text="記住密碼"               android:textSize="12sp" />              <Button               android:id="@+id/btn_login_regist"               android:layout_width="wrap_content"               android:layout_height="wrap_content"               android:layout_alignParentRight="true"               android:background="@drawable/login_reg_button"               android:gravity="left|center"               android:paddingLeft="8dp"               android:paddingRight="25dp"               android:text="注冊新賬號"               android:textColor="#ffffffff"               android:textSize="12sp" />       </RelativeLayout>                                                      <LinearLayout           android:layout_width="fill_parent"           android:layout_height="wrap_content"           android:layout_alignParentBottom="true"           android:background="@drawable/login_moremenu_back"           android:orientation="vertical" >              <RelativeLayout               android:clickable="true"               android:id="@+id/view_more"               android:layout_width="fill_parent"               android:layout_height="40dp" >                  <TextView                   android:background="@null"                    android:id="@+id/tv_login_more"                   android:layout_width="wrap_content"                   android:layout_height="wrap_content"                   android:layout_centerInParent="true"                   android:gravity="center"                   android:text="更多登陸選項"                   android:textColor="#ffffffff" />                  <ImageView                   android:id="@+id/img_more_up"                   android:layout_width="wrap_content"                   android:layout_height="wrap_content"                   android:layout_centerVertical="true"                   android:layout_toLeftOf="@id/tv_login_more"                   android:clickable="false"                   android:src="@drawable/login_more_up" />           </RelativeLayout>              <LinearLayout               android:id="@+id/menu_more"               android:layout_width="fill_parent"               android:layout_height="wrap_content"               android:orientation="vertical"               android:visibility="gone" >                  <View                   android:layout_width="fill_parent"                   android:layout_height="1dp"                   android:background="#ffffffff" />                  <View                   android:layout_width="fill_parent"                   android:layout_height="1dp"                   android:background="#ffffffff" />                  <LinearLayout                   android:layout_width="fill_parent"                   android:layout_height="wrap_content"                   android:layout_marginLeft="35dp"                   android:layout_marginRight="35dp"                   android:layout_marginTop="17dp"                   android:orientation="horizontal" >                      <CheckBox                       android:layout_width="1dp"                       android:layout_height="wrap_content"                       android:layout_weight="2"                       android:background="@null"                       android:button="@null"                       android:drawableLeft="@drawable/checkbox_bg"                       android:drawablePadding="4dp"                       android:text="隱身登陸"                       android:textSize="12sp" />                      <CheckBox                       android:layout_width="1dp"                       android:layout_height="wrap_content"                       android:layout_weight="1"                       android:background="@null"                       android:button="@null"                       android:drawableLeft="@drawable/checkbox_bg"                       android:drawablePadding="4dp"                       android:text="靜音登陸"                       android:textSize="12sp" />               </LinearLayout>                  <LinearLayout                   android:layout_width="fill_parent"                   android:layout_height="wrap_content"                   android:layout_marginBottom="17dp"                   android:layout_marginLeft="35dp"                   android:layout_marginRight="35dp"                   android:layout_marginTop="17dp"                   android:orientation="horizontal" >                      <CheckBox                       android:layout_width="1dp"                       android:layout_height="wrap_content"                       android:layout_weight="2"                       android:background="@null"                       android:button="@null"                       android:drawableLeft="@drawable/checkbox_bg"                       android:drawablePadding="4dp"                       android:text="允許手機/電腦同時在線"                       android:textSize="12sp" />                      <CheckBox                       android:layout_width="1dp"                       android:layout_height="wrap_content"                       android:layout_weight="1"                       android:background="@null"                       android:button="@null"                       android:drawableLeft="@drawable/checkbox_bg"                       android:drawablePadding="4dp"                       android:text="接收群消息"                       android:textSize="12sp" />               </LinearLayout>           </LinearLayout>       </LinearLayout>      </RelativeLayout>

注冊界面的布局：

[java]

<?xml version="1.0" encoding="utf-8"?>   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"       android:layout_width="match_parent"       android:layout_height="match_parent"       android:background="#e8f0f0"       android:orientation="vertical" >          <include layout="@layout/title_bar" />          <FrameLayout           android:layout_width="fill_parent"           android:layout_height="wrap_content"           android:layout_weight="1.0" >              <LinearLayout               android:id="@+id/linearLayout01"               android:layout_width="fill_parent"               android:layout_height="fill_parent"               android:orientation="vertical" >                  <LinearLayout                   android:layout_width="fill_parent"                   android:layout_height="wrap_content"                   android:layout_margin="15dp"                   android:orientation="horizontal" >                      <LinearLayout                       android:layout_width="wrap_content"                       android:layout_height="wrap_content"                       android:layout_weight="1.0" >                          <TextView                           android:layout_width="wrap_content"                           android:layout_height="wrap_content"                           android:text="手機驗證"                           android:textColor="#000000"                           android:textSize="15sp" />                          <ImageView                           android:layout_width="wrap_content"                           android:layout_height="wrap_content"                           android:layout_gravity="center"                           android:paddingLeft="20dp"                           android:src="@drawable/group_fold_arrow" />                   </LinearLayout>                      <LinearLayout                       android:layout_width="wrap_content"                       android:layout_height="wrap_content"                       android:layout_weight="1.0" >                          <TextView                           android:layout_width="wrap_content"                           android:layout_height="wrap_content"                           android:text="密碼設置"                           android:textSize="15sp" />                          <ImageView                           android:layout_width="wrap_content"                           android:layout_height="wrap_content"                           android:layout_gravity="center"                           android:paddingLeft="20dp"                           android:src="@drawable/group_fold_arrow" />                   </LinearLayout>                      <LinearLayout                       android:layout_width="wrap_content"                       android:layout_height="wrap_content"                       android:layout_weight="1.0" >                          <TextView                           android:layout_width="wrap_content"                           android:layout_height="wrap_content"                           android:text="注冊完成"                           android:textSize="15sp" />                          <ImageView                           android:layout_width="wrap_content"                           android:layout_height="wrap_content"                           android:layout_gravity="center"                           android:paddingLeft="20dp"                           android:src="@drawable/group_fold_arrow" />                   </LinearLayout>               </LinearLayout>                  <View                   android:layout_width="fill_parent"                   android:layout_height="1dp"                   android:background="@drawable/prefresh_list_cutline" />                  <LinearLayout                   android:layout_width="fill_parent"                   android:layout_height="wrap_content"                   android:layout_marginBottom="14dp"                   android:layout_marginLeft="10dp"                   android:layout_marginRight="10dp"                   android:layout_marginTop="20dp"                   android:background="@drawable/input"                   android:orientation="vertical" >                      <LinearLayout                       android:layout_width="fill_parent"                       android:layout_height="wrap_content"                       android:layout_margin="10dp"                       android:orientation="horizontal" >                          <TextView                           android:layout_width="wrap_content"                           android:layout_height="wrap_content"                           android:text="所在地"                           android:textColor="#000000"                           android:textSize="19sp" />                          <TextView                           android:id="@+id/tv_region_show"                           android:layout_width="wrap_content"                           android:layout_height="wrap_content"                           android:layout_marginLeft="20dp"                           android:text="+86中國大陸 "                           android:textColor="#505050"                           android:textSize="19sp" />                          <TextView                           android:id="@+id/tv_region_modify"                           android:layout_width="wrap_content"                           android:layout_height="wrap_content"                           android:layout_weight="1.0"                           android:clickable="true"                           android:gravity="center_horizontal"                           android:text="修改"                           android:textColor="#50a8e0"                           android:textSize="19sp" />                   </LinearLayout>                      <View                       android:layout_width="fill_parent"                       android:layout_height="1dp"                       android:background="@drawable/prefresh_list_cutline" />                      <LinearLayout                       android:layout_width="fill_parent"                       android:layout_height="wrap_content"                       android:layout_margin="10dp" >                          <TextView                           android:layout_width="wrap_content"                           android:layout_height="wrap_content"                           android:text="手機號"                           android:textColor="#000000"                           android:textSize="19sp" />                          <EditText                           android:id="@+id/et_mobileNo"                           android:layout_width="wrap_content"                           android:layout_height="wrap_content"                           android:layout_marginLeft="20dp"                           android:background="@null"                           android:hint="請輸入手機號碼"                           android:textSize="17sp" />                   </LinearLayout>               </LinearLayout>                  <LinearLayout                   android:layout_width="fill_parent"                   android:layout_height="wrap_content"                   android:layout_marginLeft="20dp"                   android:orientation="horizontal" >                      <CheckBox                       android:id="@+id/chk_agree"                       android:layout_width="wrap_content"                       android:layout_height="wrap_content"                       android:background="@null"                       android:button="@null"                       android:checked="true"                       android:drawableLeft="@drawable/checkbox_bg"                       android:drawablePadding="4dp"                       android:padding="2dp"                       android:text="已閱讀并同意"                       android:textColor="#888888" />                      <TextView                       android:id="@+id/tv_QQ_Server"                       android:layout_width="wrap_content"                       android:layout_height="wrap_content"                       android:clickable="true"                       android:text="《騰訊QQ服務條款》"                       android:textColor="#5858f8" />               </LinearLayout>                  <Button                   android:id="@+id/btn_send_code"                   android:layout_width="fill_parent"                   android:layout_height="wrap_content"                   android:layout_marginLeft="20dp"                   android:layout_marginRight="20dp"                   android:layout_marginTop="24dp"                   android:background="@drawable/register_button_select"                   android:paddingBottom="14dp"                   android:paddingTop="14dp"                   android:text="向我發送驗證碼"                   android:textSize="19sp" />           </LinearLayout>       </FrameLayout>      </LinearLayout>

注冊驗證的布局：

[java] 

<?xml version="1.0" encoding="utf-8"?>   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"       android:layout_width="match_parent"       android:layout_height="match_parent"       android:background="#e8f0f0"       android:orientation="vertical" >          <include layout="@layout/title_bar" />          <LinearLayout           android:id="@+id/linearLayout01"           android:layout_width="fill_parent"           android:layout_height="fill_parent"           android:orientation="vertical" >              <LinearLayout               android:layout_width="fill_parent"               android:layout_height="wrap_content"               android:layout_margin="15dp"               android:orientation="horizontal" >                  <LinearLayout                   android:layout_width="wrap_content"                   android:layout_height="wrap_content"                   android:layout_weight="1.0" >                      <TextView                       android:layout_width="wrap_content"                       android:layout_height="wrap_content"                       android:text="手機驗證"                       android:textColor="#000000"                       android:textSize="15sp" />                      <ImageView                       android:layout_width="wrap_content"                       android:layout_height="wrap_content"                       android:layout_gravity="center"                       android:paddingLeft="20dp"                       android:src="@drawable/group_fold_arrow" />               </LinearLayout>                  <LinearLayout                   android:layout_width="wrap_content"                   android:layout_height="wrap_content"                   android:layout_weight="1.0" >                      <TextView                       android:layout_width="wrap_content"                       android:layout_height="wrap_content"                       android:text="密碼設置"                       android:textSize="15sp" />                      <ImageView                       android:layout_width="wrap_content"                       android:layout_height="wrap_content"                       android:layout_gravity="center"                       android:paddingLeft="20dp"                       android:src="@drawable/group_fold_arrow" />               </LinearLayout>                  <LinearLayout                   android:layout_width="wrap_content"                   android:layout_height="wrap_content"                   android:layout_weight="1.0" >                      <TextView                       android:layout_width="wrap_content"                       android:layout_height="wrap_content"                       android:text="注冊完成"                       android:textSize="15sp" />                      <ImageView                       android:layout_width="wrap_content"                       android:layout_height="wrap_content"                       android:layout_gravity="center"                       android:paddingLeft="20dp"                       android:src="@drawable/group_fold_arrow" />               </LinearLayout>           </LinearLayout>              <View               android:layout_width="fill_parent"               android:layout_height="1dp"               android:background="@drawable/prefresh_list_cutline" />              <LinearLayout               android:layout_width="fill_parent"               android:layout_height="50dp"               android:layout_marginBottom="20dp"               android:layout_marginLeft="10dp"               android:layout_marginRight="10dp"               android:layout_marginTop="20dp"               android:background="@drawable/input" >                  <TextView                   android:layout_width="wrap_content"                   android:layout_height="wrap_content"                   android:layout_gravity="center"                   android:layout_marginLeft="16dp"                   android:text="驗證碼"                   android:textColor="#000000"                   android:textSize="19sp" />                  <EditText                   android:layout_width="wrap_content"                   android:layout_height="wrap_content"                   android:layout_gravity="center"                   android:layout_marginLeft="22dp"                   android:background="@null"                   android:hint="請輸入收到的驗證碼" />           </LinearLayout>              <FrameLayout               android:layout_width="fill_parent"               android:layout_height="wrap_content" >                  <Button                   android:id="@+id/btn_reg_reget"                   android:layout_width="fill_parent"                   android:layout_height="wrap_content"                   android:layout_gravity="center_horizontal"                   android:layout_marginLeft="20dp"                   android:layout_marginRight="20dp"                   android:background="@drawable/register_button_select"                   android:text="重新獲取"                   android:visibility="gone" />                  <TextView                   android:id="@+id/tv_reg_reget"                   android:layout_width="fill_parent"                   android:layout_height="wrap_content"                   android:gravity="center"                   android:text="x秒后   可重新獲得驗證碼"                   android:textColor="#000000"                   android:textSize="15sp" />           </FrameLayout>              <Button               android:layout_width="fill_parent"               android:layout_height="wrap_content"               android:layout_marginLeft="22dp"               android:layout_marginRight="22dp"               android:layout_marginTop="22dp"               android:background="@drawable/register_button_select"               android:text="提交驗證碼" />       </LinearLayout>      </LinearLayout>

關于高仿Android QQ2012登陸界面和注冊界面是怎樣的就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。