android学习笔记(3)---QQ登陆界面

我们前面已经做了第一个Android应用程序，虽然有点像QQ的登录界面，但是很多地方还是很难看，这一篇咱们来将这个界面做成一个标准的商业界面，并一起来了解Android中的代码运行的原理。

好吧，咱们开始吧，首先启动模拟器，为了让咱们的界面和QQ的登录界面一样我下载了一个QQ的apk文件，下面咱们将这个apk安装到我们的模拟器上，看看效果。

怎么将apk安装到我们的模拟器上面呢？先给大家介绍一个SDK自带的工具adb

如下图所示这个工具在sdk/platform-tools/下面

好吧直接双击怎么一闪而过呢？这是因为我们没有在环境变量里面配置，还记得前面配置JDK的环境变量吗？我们暂时先不配置

按住  开始+R  出现如下输入框，输入cmd然后确定

 

好了，我们现在进入到window的控制台了，如下图所示：

在这里用dos下面的命令：

D:  到D盘

cd xxx 到xxx目录

下面开始正式安装我们的apk文件，我将QQ的apk文件放在D盘的根目录

将apk文件安装到模拟器

可以看到Success这说明我们已经安装成功了，下面我们来打开模拟器上的QQ并到登录界面

其实有一种很好的学习方式就是抄袭，好吧，如果你认同我的观点下面我们就来抄袭一下QQ是怎么做的

在抄袭别人之前还必须有一定的技术，不然抄不过来的哦。呵呵，开个玩笑，其实这个很简单。再给大家介绍一个SDK自动的工具。

关于这个工具的详细请看我的另一篇博文：关于HierarchyViewer的使用

好了启动HierarchyViewer之后如图，我们选择QQ安装包，然后点击Load View Hierarchy菜单

我们可以找到我们想要的界面的组件，比如上面的QQ头像

好吧下面我们就一个一个仿照QQ的组件来修改我们的组件，修改好的xml布局文件如下

activity_main.xml

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     android:layout_width="fill_parent"  
3.     android:layout_height="fill_parent"  
4.     android:orientation="vertical"  
5.     android:gravity="center_horizontal"  
6.     android:background="#eeeeee">  
7.     <ImageView  
8.         android:layout_width="wrap_content"  
9.         android:layout_height="wrap_content"  
10.         android:src="@drawable/login_default_avatar"  
11.         android:layout_marginTop="20dip"  
12.         android:background="@drawable/qzone_bg_user_avatar"/>  
13.     <RelativeLayout   
14.         android:layout_marginTop="13dip"  
15.         android:layout_width="match_parent"  
16.         android:layout_height="match_parent">  
17.         <RelativeLayout  
18.             android:id="@+id/input_edit_text"  
19.             android:layout_centerHorizontal="true"  
20.             android:layout_width="270dip"  
21.             android:layout_height="100dip"  
22.             android:paddingTop="15dip"  
23.             android:background="@drawable/login_input">  
24.             <LinearLayout   
25.                 android:id="@+id/input_account"  
26.                 android:layout_width="match_parent"  
27.                 android:paddingLeft="15dip"  
28.                 android:layout_height="40dip">  
29.                 <TextView   
30.                     android:layout_width="40dip"  
31.                     android:textColor="#cccccc"  
32.                     android:layout_height="wrap_content"  
33.                     android:text="@string/account"/>  
34.                 <EditText   
35.                     android:layout_width="0dip"  
36.                     android:layout_height="40dip"  
37.                     android:layout_weight="1"  
38.                     android:background="@null"/>  
39.             </LinearLayout>  
40.             <ImageView   
41.                 android:id="@+id/input_center_line"  
42.                 android:layout_below="@id/input_account"  
43.                 android:layout_width="match_parent"  
44.                 android:layout_height="1dip"  
45.                 android:background="@drawable/qb_tenpay_trans_records_open"/>  
46.             <LinearLayout   
47.                 android:layout_below="@id/input_center_line"  
48.                 android:paddingLeft="15dip"  
49.                 android:layout_width="match_parent"  
50.                 android:layout_height="40dip">  
51.                 <TextView   
52.                     android:layout_width="40dip"  
53.                     android:textColor="#cccccc"  
54.                     android:layout_height="wrap_content"  
55.                     android:text="@string/password"/>  
56.                 <EditText   
57.                     android:layout_width="0dip"  
58.                     android:layout_height="40dip"  
59.                     android:layout_weight="1"  
60.                     android:background="@null"/>  
61.             </LinearLayout>  
62.         </RelativeLayout>  
63.         <LinearLayout  
64.             android:layout_below="@id/input_edit_text"  
65.             android:layout_marginTop="20dip"  
66.             android:layout_width="match_parent"  
67.             android:layout_height="wrap_content"  
68.             android:gravity="center">  
69.             <Button   
70.                 android:layout_width="270dip"  
71.                 android:layout_height="40dip"  
72.                 android:text="@string/login_button"  
73.                 android:background="@drawable/login_button_nor"  
74.                 />  
75.         </LinearLayout>  
76.     </RelativeLayout>  
77. </LinearLayout>  

现在的界面如下：

这个界面和真真的QQ界面还有点不同的就是上面的标题myFirstApp，怎么去掉这个标题呢？

有关主题和去掉actionBar详细请看我的另一篇博文：Android中去掉标题的方法总结

我直接用第二种方法，在AndroidMainfest.xml文件中的<appliaction>中添加如下属性：

android:theme="@android:style/Theme.NoTitleBar" 

现在的运行效果如下：

这个界面比上一个界面好多了吧!下一篇将介绍实现界面的主要组件及使用方法。