之前以及实现了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="服务条款"/>