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

<————最终的代码在文章最后贴出来————>

先上图：
【原图】

QQLogin_0.jpg

【图一】

QQLogin_1.PNG

【图二】

QQLogin_2.PNG

现在开始敲

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

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

2、然后是QQ图标：

<LinearLayout
        android:id="@+id/head"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginTop="130dp">

        <ImageView
            android:layout_width="57dp"
            android:layout_height="81dp"
            android:src="@drawable/qq" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="50sp"
            android:textStyle="bold"
            android:text="QQ"/>
    </LinearLayout>

1. id的设置，方便代码中的引用，也方便其他控件的定位
2. 其他都根据自己的喜欢慢慢调

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

<RelativeLayout
        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">

        <ImageView
            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" />

        <EditText
            android:id="@+id/number"
            android:layout_width="150dp"
            android:layout_height="60dp"
            android:layout_centerHorizontal="true"
            android:background="@null"
            android:inputType="number" />

        <Spinner
            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" />
   
</RelativeLayout>

1. ImageView是用来显示QQ头像
2. EditText文本框用显示QQ帐号的
3. Spinner（下拉列表）是存放的QQ帐号的，便于QQ账号的替换
   【注】以上控件的信息，目前是用的数组实现，打算之后用链表敲一下
4. android:background="@drawable/editview"这个是我写的椭圆边框+灰色背景，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorGray"/>
    <corners android:radius="100dp"/>
    <size android:height="30dp"
        android:width="130dp"/>
    <stroke android:color="@color/colorWhite"
        android:width="1dp"/>
</shape>

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

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
    <color name="colorGray2">#FC6F6E6E</color>
    <color name="colorWhite">#FBFCFB</color>
    <color name="colorBlack">#010E01</color>
    <color name="colorGray">#72C7CAC7</color>
    <color name="colorBlue">#F21F62F0</color>
    <color name="colorStatBar">#BDBBBB</color>
</resources>

4、接下来是密码框

    <RelativeLayout
        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">

        <ImageButton
            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"/>

        <EditText
            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" />

    </RelativeLayout>

1. ImageButton用来改变密码的状态（显示密文/隐藏密文），也用了一个边框android:background="@drawable/touxiang"（但作用不明显）
2. EditText用于用户输入密码，也同样是用的上面的椭圆边框

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

<ImageButton
        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"是我写的圆形边框,以下是代码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/colorWhite"/>
<corners android:radius="200dp"/>
<size android:height="10dp"
    android:width="10dp"/>
<stroke android:color="@color/colorBlack"
    android:width="0dp"/>
</shape>

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

      <RelativeLayout
            android:id="@+id/text_top"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                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="忘记密码"/>



            <TextView
                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="用户注册"/>
        </RelativeLayout>


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/text_top"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/agree"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="100dp"
                android:text="登陆后代表阅读并同意"/>

            <TextView
                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="服务条款"/>

        </RelativeLayout>

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

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

贴一下全部代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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">

    <LinearLayout
        android:id="@+id/head"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginTop="130dp">

        <ImageView
            android:layout_width="57dp"
            android:layout_height="81dp"
            android:src="@drawable/qq" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="50sp"
            android:textStyle="bold"
            android:text="QQ"/>
    </LinearLayout>


    <RelativeLayout
        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">

        <ImageView
            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" />

        <EditText
            android:id="@+id/number"
            android:layout_width="150dp"
            android:layout_height="60dp"
            android:layout_centerHorizontal="true"
            android:background="@null"
            android:inputType="number" />

        <Spinner
            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" />



    </RelativeLayout>

    <RelativeLayout
        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">

        <ImageButton
            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"/>

        <EditText
            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" />

    </RelativeLayout>

    <ImageButton
        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" />


    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="40dp">


        <RelativeLayout
            android:id="@+id/text_top"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                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="忘记密码"/>



            <TextView
                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="用户注册"/>
        </RelativeLayout>


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/text_top"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/agree"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="100dp"
                android:text="登陆后代表阅读并同意"/>

            <TextView
                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="服务条款"/>

        </RelativeLayout>
    </RelativeLayout>

</RelativeLayout>