【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】高仿Android QQ2012登陸界面和注冊(cè)界面是怎樣的

【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】高仿AndroidQQ2012登陸界面和注冊(cè)界面是怎樣的

這篇文章給大家介紹高仿AndroidQQ2012登陸界面和注冊(cè)界面是怎樣的，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。漂亮的UI能給用戶帶來(lái)良好的體驗(yàn)，在android應(yīng)用中一直尤為重要，這次模仿的是QQ2012Android版的的最新登陸界面以及部分注冊(cè)的功能，簡(jiǎn)潔漂亮的UI給人耳目一新的感覺(jué)，但看似簡(jiǎn)單的布局要真的自己做起來(lái)還是會(huì)遇到很多的困難，尤其是木有什么美工的基礎(chǔ)，先上圖片看下做完后的效果，有個(gè)別的地方還是與原版有出入的。首先下載官方最新的QQ2012APK文件，然后將后綴名改為.rar打開(kāi)后可以獲得全部鎖需要的圖片資源，嘿嘿，好多.9的圖片都不需要自己再做了~！，之后既要研究該如何去模仿這款應(yīng)用的布局了。究竟怎樣控制好各個(gè)控件之間的排布，如何確定各種布局的嵌套呢？既然是優(yōu)秀的UI界面，我們來(lái)完全模仿，那就可以直接照搬QQ的設(shè)計(jì)排版，這里我用到了android中自帶的層級(jí)觀察器hierarchyviewer工具來(lái)分析UI的布局，hierarchyviewer是非常之實(shí)用的工具，即可以用來(lái)優(yōu)化自己的布局，也可以用來(lái)參考別人優(yōu)秀的布局，在\android-sdk-windows\tools目錄下雙擊即可以使用。分成四個(gè)區(qū)域，左邊較大的工作區(qū)即是當(dāng)前UI的整體布局，一層級(jí)的方式排列展示出來(lái)，右側(cè)的分三塊區(qū)域，上邊是左側(cè)的縮略圖，中間是當(dāng)前選中布局的屬性介紹，可以點(diǎn)擊查看具體的數(shù)值，很

方便，下邊是點(diǎn)擊當(dāng)前布局的實(shí)際效果，通過(guò)這些就可以了解當(dāng)前UI是怎樣的布局，具體用到了哪些布局方式和控件，一目了然。點(diǎn)擊InspectScrrenshot進(jìn)入，左側(cè)區(qū)域是當(dāng)前布局的樹(shù)狀結(jié)構(gòu)，這樣看起來(lái)布局更容易理解，右側(cè)是當(dāng)前頁(yè)面的圖像，可以通過(guò)鼠標(biāo)移動(dòng)十字交叉處選中當(dāng)前元素，而具體的信息就會(huì)在中間顯示出來(lái)。包括所選地方的顏色值，坐標(biāo)信息，也可以通過(guò)放大來(lái)進(jìn)一步進(jìn)行細(xì)微的操作。通過(guò)這個(gè)工具，怎么樣？是不是可以很輕松的把自己喜歡的UI模仿學(xué)習(xí)下來(lái)呢~！以下是部分布局的代碼，具體的java代碼可以自行下載研究，我也寫(xiě)了比較幼稚的注釋嘿嘿：登陸界面的布局：[java]<?xml

version="1.0"

encoding="utf-8"?>

<RelativeLayout

xmlns:android="/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="請(qǐng)輸入QQ號(hào)碼"

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="請(qǐng)輸入密碼"

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="注冊(cè)新賬號(hào)"

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="更多登陸選項(xiàng)"

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="允許手機(jī)/電腦同時(shí)在線"

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>注冊(cè)界面的布局：[java]<?xml

version="1.0"

encoding="utf-8"?>

<LinearLayout

xmlns:android="/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="手機(jī)驗(yàn)證"

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="密碼設(shè)置"

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="注冊(cè)完成"

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中國(guó)大陸

"

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="手機(jī)號(hào)"

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="請(qǐng)輸入手機(jī)號(hào)碼"

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服務(wù)條款》"

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="向我發(fā)送驗(yàn)證碼"

android:textSize="19sp"

/>

</LinearLayout>

</FrameLayout>

</LinearLayout>注冊(cè)驗(yàn)證的布局：[java]

<?xml

version="1.0"

encoding="utf-8"?>

<LinearLayout

xmlns:android="/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="手機(jī)驗(yàn)證"

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="密碼設(shè)置"

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="注冊(cè)完成"

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"

an