android qq登陆界面代码下载,【Android Demo】QQ登陆界面（一）

之前以及实现了QQV.0.8.4115的登陆界面，现在来总结一下，并且回顾一下用到过的东西。

先上图：

【原图】

QQLogin_0.jpg

【图一】

QQLogin_1.PNG

【图二】

QQLogin_2.PNG

现在开始敲

一、首先设计QQ登陆界面的布局：

1、我们采用RelativeLayout相对布局进行整体布局的规划

2、然后是QQ图标：

android:id="@+id/head"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:gravity="center"

android:layout_marginTop="130dp">

android:layout_width="57dp"

android:layout_height="81dp"

android:src="@drawable/qq" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textSize="50sp"

android:textStyle="bold"

android:text="QQ"/>

id的设置，方便代码中的引用，也方便其他控件的定位

其他都根据自己的喜欢慢慢调

3、QQ图标的下面是账号栏：

android:id="@+id/body"

android:layout_width="320dp"

android:layout_height="wrap_content"

android:orientation="horizontal"

android:layout_centerHorizontal="true"

android:background="@drawable/editview"

android:layout_below="@+id/head">

android:id="@+id/image"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_toLeftOf="@+id/number"

android:layout_marginRight="27dp"

android:background="@drawable/touxiang"

android:layout_centerVertical="true" />

android:id="@+id/number"

android:layout_width="150dp"

android:layout_height="60dp"

android:layout_centerHorizontal="true"

android:background="@null"

android:inputType="number" />

android:id="@+id/spinner"

android:layout_width="40dp"

android:layout_height="60dp"

android:layout_marginLeft="20dp"

android:layout_centerVertical="true"

android:layout_toRightOf="@+id/number" />

ImageView是用来显示QQ头像

EditText文本框用显示QQ帐号的

Spinner(下拉列表)是存放的QQ帐号的，便于QQ账号的替换

【注】以上控件的信息，目前是用的数组实现，打算之后用链表敲一下

android:background="@drawable/editview"这个是我写的椭圆边框+灰色背景，代码如下：

android:shape="rectangle">

android:width="130dp"/>

android:width="1dp"/>

【注】代码中的android:color="@color/colorGray"是在value下colors的代码中改变的，贴一下代码：

#008577

#00574B

#D81B60

#FC6F6E6E

#FBFCFB

#010E01

#72C7CAC7

#F21F62F0

#BDBBBB

4、接下来是密码框

android:id="@+id/body2"

android:layout_width="320dp"

android:layout_height="60dp"

android:layout_below="@+id/body"

android:layout_centerHorizontal="true"

android:layout_marginTop="16dp"

android:background="@drawable/editview">

android:id="@+id/visible"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_toLeftOf="@+id/password"

android:layout_marginRight="27dp"

android:background="@drawable/touxiang"

android:layout_centerVertical="true"/>

android:id="@+id/password"

android:layout_width="150dp"

android:layout_height="60dp"

android:background="@null"

android:layout_centerHorizontal="true"

android:layout_centerVertical="true"

android:layout_marginTop="14dp"

android:inputType="textPassword" />

ImageButton用来改变密码的状态(显示密文/隐藏密文)，也用了一个边框android:background="@drawable/touxiang"(但作用不明显)

EditText用于用户输入密码，也同样是用的上面的椭圆边框

5、这个版本的QQ登陆按钮比较特别，一个圆形的按钮，之前试过写圆形框来实现，后来发现巨丑，无赖之下只有扣图了

android:id="@+id/load"

android:layout_width="70dp"

android:layout_height="63dp"

android:layout_below="@+id/body2"

android:layout_centerHorizontal="true"

android:layout_marginTop="113dp"

android:background="@drawable/button"

android:src="@drawable/circle2" />

1、android:background="@drawable/button"是我写的圆形边框,以下是代码

android:shape="rectangle">

android:width="10dp"/>

android:width="0dp"/>

6、最后是忘记密码和用户注册栏：

android:id="@+id/text_top"

android:layout_width="match_parent"

android:layout_height="wrap_content">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textStyle="bold"

android:autoLink="web"

android:textColor="#090000"

android:layout_marginLeft="100dp"

android:text="忘记密码"/>

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textStyle="bold"

android:autoLink="web"

android:textColor="#090000"

android:layout_marginLeft="240dp"

android:text="用户注册"/>

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@+id/text_top"

android:orientation="horizontal">

android:id="@+id/agree"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="100dp"

android:text="登陆后代表阅读并同意"/>

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textStyle="bold"

android:autoLink="web"

android:textColor="#090000"

android:layout_toRightOf="@+id/agree"

android:text="服务条款"/>

里面的加粗文字，本来是用超链接实现，之前试过，没成功，所以目前的还没学会

好，这就是QQ登陆界面的简单实现！！！

贴一下全部代码：

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#FCFCFC"

tools:context=".MainActivity">

android:id="@+id/head"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:gravity="center"

android:layout_marginTop="130dp">

android:layout_width="57dp"

android:layout_height="81dp"

android:src="@drawable/qq" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textSize="50sp"

android:textStyle="bold"

android:text="QQ"/>

android:id="@+id/body"

android:layout_width="320dp"

android:layout_height="wrap_content"

android:orientation="horizontal"

android:layout_centerHorizontal="true"

android:background="@drawable/editview"

android:layout_below="@+id/head">

android:id="@+id/image"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_toLeftOf="@+id/number"

android:layout_marginRight="27dp"

android:background="@drawable/touxiang"

android:layout_centerVertical="true" />

android:id="@+id/number"

android:layout_width="150dp"

android:layout_height="60dp"

android:layout_centerHorizontal="true"

android:background="@null"

android:inputType="number" />

android:id="@+id/spinner"

android:layout_width="40dp"

android:layout_height="60dp"

android:layout_marginLeft="20dp"

android:layout_centerVertical="true"

android:layout_toRightOf="@+id/number" />

android:id="@+id/body2"

android:layout_width="320dp"

android:layout_height="60dp"

android:layout_below="@+id/body"

android:layout_centerHorizontal="true"

android:layout_marginTop="16dp"

android:background="@drawable/editview">

android:id="@+id/visible"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_toLeftOf="@+id/password"

android:layout_marginRight="27dp"

android:background="@drawable/touxiang"

android:layout_centerVertical="true"/>

android:id="@+id/password"

android:layout_width="150dp"

android:layout_height="60dp"

android:background="@null"

android:layout_centerHorizontal="true"

android:layout_centerVertical="true"

android:layout_marginTop="14dp"

android:inputType="textPassword" />

android:id="@+id/load"

android:layout_width="70dp"

android:layout_height="63dp"

android:layout_below="@+id/body2"

android:layout_centerHorizontal="true"

android:layout_marginTop="113dp"

android:background="@drawable/button"

android:src="@drawable/circle2" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerHorizontal="true"

android:layout_alignParentBottom="true"

android:layout_marginBottom="40dp">

android:id="@+id/text_top"

android:layout_width="match_parent"

android:layout_height="wrap_content">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textStyle="bold"

android:autoLink="web"

android:textColor="#090000"

android:layout_marginLeft="100dp"

android:text="忘记密码"/>

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textStyle="bold"

android:autoLink="web"

android:textColor="#090000"

android:layout_marginLeft="240dp"

android:text="用户注册"/>

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@+id/text_top"

android:orientation="horizontal">

android:id="@+id/agree"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="100dp"

android:text="登陆后代表阅读并同意"/>

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textStyle="bold"

android:autoLink="web"

android:textColor="#090000"

android:layout_toRightOf="@+id/agree"

android:text="服务条款"/>