您好,登錄后才能下訂單哦!
這篇文章給大家介紹高仿Android QQ2012登陸界面和注冊(cè)界面是怎樣的,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對(duì)大家能有所幫助。
漂亮的UI能給用戶帶來(lái)良好的體驗(yàn),在android應(yīng)用中一直尤為重要,這次模仿的是QQ2012 Android版的的最新登陸界面以及部分注冊(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)擊Inspect Scrrenshot進(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代碼可以自行下載研究,我也寫了比較幼稚的注釋嘿嘿:
登陸界面的布局:
[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="請(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="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="手機(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="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="手機(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" 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="驗(yàn)證碼" 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="請(qǐng)輸入收到的驗(yàn)證碼" /> </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秒后 可重新獲得驗(yàn)證碼" 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="提交驗(yàn)證碼" /> </LinearLayout> </LinearLayout>
關(guān)于高仿Android QQ2012登陸界面和注冊(cè)界面是怎樣的就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。