Android仿QQ登陆窗口实现原理

今天根据腾讯qq，我们做一个练习，来学习如何制作一个漂亮的布局。首先看一下官方图片

还是一个启动画面，之后进入登录页面，导航页面就不介绍了，大家可以参考微信的导航页面。首先程序进入SplashActivity，就是启动页面，Activity代码如下：

package com.example.imitateqq;

import android.app.Activity;

import android.content.Intent;

import android.os.Bundle;

import android.os.Handler;

public class SplashActivity extends Activity {

private Intent intent;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.splash);

startMainAvtivity();

}

private void startMainAvtivity() {

new Handler().postDelayed(new Runnable() {

public void run() {

intent=new Intent(SplashActivity.this,QQ.class);

startActivity(intent);

SplashActivity.this.finish();//结束本Activity

}

}, 1000);//设置执行时间

}

}

xml布局文件就是一个全屏的图片，要注意的是设置android:scaleType="matrix"这个属性。不然不会全屏

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:orientation= "vertical" >

< ImageView

android:layout_width ="match_parent"

android:layout_height ="match_parent"

android:scaleType ="matrix"

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

LinearLayout>

过1秒之后转入登陆页面，从图片我们可以看出，腾讯的UI做的还是相当美观漂亮的，既简洁又不失美观。先分析一下这个登录界面，从整体可以看出，根布局的背景色是蓝色的，而那个QQ 2012 Android其实是一个图片背景色和根布局的背景色一样，这样就不会有视觉偏差。下面就是两个文本框EditText了，注意这里和官方给的不一样，因为后面有一个小箭头，当点击这个箭头时，会在第一个文本框的下面显示已经输入的qq号码，在qq号码的后面还有删除qq信息的按钮。这个地方需要注意一下。再往下就是登陆Button以及那连个“记住密码”和“注册新账号”比较简单，注意位置的安排即可。最后就是最下面的“更多登陆选项”，当点击的时候会向上弹出一些内容，其实就是一个隐藏的布局，当点击上面的时候，使下面隐藏的布局显示。当然也可以使用滑动抽屉来做，但是相对来说比较麻烦。下面看一下xml代码，相信大家就会一路了然。

< RelativeLayout xmlns:android ="http://schemas.android.com/apk/res/android"

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

android:layout_width= "match_parent"

android:layout_height= "match_parent"

android:background= "@drawable/login_bg" >

< ImageView

android:id ="@+id/loginbutton"

android:layout_width ="wrap_content"

android:layout_height ="wrap_content"

android:layout_centerHorizontal ="true"

android:layout_marginTop ="50dp"

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

android:id ="@+id/input"

android:layout_width ="fill_parent"

android:layout_height ="wrap_content"

android:layout_below ="@id/loginbutton"

android:layout_marginLeft ="28.0dip"

android:layout_marginRight ="28.0dip"

android:background ="@drawable/login_input"

android:orientation ="vertical" >

< LinearLayout

android:layout_width ="fill_parent"

android:layout_height ="44.0dip"

android:background ="@drawable/login_input"

android:gravity ="center_vertical"

android:orientation ="horizontal" >

< EditText

android:id ="@+id/searchEditText"

android:layout_width ="0dp"

android:layout_height ="fill_parent"

android:layout_weight ="1"

android:background ="@null"

android:ems ="10"

android:imeOptions ="actionDone"

android:singleLine ="true"

android:textSize ="16sp" >

< requestFocus />

EditText>

< Button

android:id ="@+id/button_clear"

android:layout_width ="20dip"

android:layout_height ="20dip"

android:layout_marginRight ="8dip"

android:background ="@drawable/login_input_arrow"

android:visibility ="visible" />

LinearLayout>

< View

android:layout_width ="fill_parent"

android:layout_height ="1.0px"

android:layout_marginLeft ="1.0px"

android:layout_marginRight ="1.0px"

android:background ="#ffc0c3c4" />

< EditText

android:id ="@+id/password"

android:layout_width ="fill_parent"

android:layout_height ="44.0dip"

android:background ="#00ffffff"

android:gravity ="center_vertical"

android:inputType ="textPassword"

android:maxLength ="16"

android:maxLines ="1"

android:textColor ="#ff1d1d1d"

android:textColorHint ="#ff666666"

android:textSize ="16.0sp" />

android:id ="@+id/buton1"

android:layout_width ="270dp"

android:background ="@drawable/chat_send_button_bg"

android:paddingTop ="5.0dip"

android:layout_height ="50dp"

android:layout_marginLeft ="28.0dip"

android:layout_marginRight ="28.0dip"

android:layout_marginTop ="12.0dip"

android:layout_below ="@+id/input"

android:gravity ="center"

android:textSize ="20dp"

android:text = "登录" />

android:id ="@+id/relative"

android:layout_width ="fill_parent"

android:layout_height ="wrap_content"

android:layout_alignLeft ="@+id/input"

android:layout_alignRight ="@+id/input"

android:layout_below ="@id/buton1" >

< CheckBox

android:id ="@+id/auto_save_password"

android:layout_width ="wrap_content"

android:layout_height ="wrap_content"

android:layout_alignParentLeft ="true"

android:background ="@null"

android:button ="@null"

android:checked ="true"

android:drawableLeft ="@drawable/checkbox_bg1"

android:drawablePadding ="4.0dip"

android:text = "记住密码"

android:textColor ="#ffffffff"

android:textSize ="12.0sp" />

< Button

android:id ="@+id/regist"

android:layout_width ="wrap_content"

android:layout_height ="wrap_content"

android:layout_alignParentRight ="true"

android:background ="@drawable/login_reg_normal"

android:clickable ="true"

android:gravity ="left|center"

android:paddingLeft ="8.0dip"

android:paddingRight ="18.0dip"

android:text = "注册新账号"

android:textColor ="#ffffffff"

android:textSize ="12.0sp" />

android:id ="@+id/more_bottom"

android:layout_width ="fill_parent"

android:layout_height ="wrap_content"

android:layout_alignParentBottom ="true"

android:background ="@drawable/login_moremenu_back"

android:orientation ="vertical" >

android:id ="@+id/input2"

android:layout_width ="fill_parent"

android:layout_height ="40dp"

android:background ="@drawable/login_moremenu_back"

android:orientation ="vertical" >

< ImageView

android:id ="@+id/more_image"

android:layout_width ="wrap_content"

android:layout_height ="wrap_content"

android:layout_centerVertical ="true"

android:layout_marginRight ="5.0dip"

android:layout_toLeftOf ="@+id/more_text"

android:clickable ="false"

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

< TextView

android:id ="@+id/more_text"

android:layout_width ="wrap_content"

android:layout_height ="wrap_content"

android:layout_centerInParent ="true"

android:background ="@null"

android:gravity ="center"

android:maxLines ="1"

android:text = "更多登陆选项"

android:textColor ="#ffc6e6f9"

android:textSize ="14.0sp" />

android:id ="@+id/morehidebottom"

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 ="1.0px"

android:background ="#ff005484" />

< View

android:layout_width ="fill_parent"

android:layout_height ="1.0px"

android:background ="#ff0883cb" />

< LinearLayout

android:layout_width ="fill_parent"

android:layout_height ="wrap_content"

android:layout_marginLeft ="30.0dip"

android:layout_marginRight ="30.0dip"

android:layout_marginTop ="12.0dip"

android:orientation ="horizontal" >

< CheckBox

android:id ="@+id/hide_login"

android:layout_width ="1.0px"

android:layout_height ="wrap_content"

android:layout_weight ="2.0"

android:background ="@null"

android:button ="@null"

android:checked ="false"

android:drawableLeft ="@drawable/checkbox_bg1"

android:drawablePadding ="4.0dip"

android:text = "隐身登陆"

android:textColor ="#ffc6e6f9"

android:textSize ="12.0sp" />

< CheckBox

android:id ="@+id/silence_login"

android:layout_width ="1.0px"

android:layout_height ="wrap_content"

android:layout_weight ="1.0"

android:background ="@null"

android:button ="@null"

android:checked ="false"

android:drawableLeft ="@drawable/checkbox_bg1"

android:drawablePadding ="4.0dip"

android:text = "静音登录"

android:textColor ="#ffc6e6f9"

android:textSize ="12.0sp" />

LinearLayout>

< LinearLayout

android:layout_width ="fill_parent"

android:layout_height ="wrap_content"

android:layout_marginBottom ="18.0dip"

android:layout_marginLeft ="30.0dip"

android:layout_marginRight ="30.0dip"

android:layout_marginTop ="18.0dip"

android:orientation ="horizontal" >

< CheckBox

android:id ="@+id/accept_accounts"

android:layout_width ="1.0px"

android:layout_height ="wrap_content"

android:layout_weight ="2.0"

android:background ="@null"

android:button ="@null"

android:checked ="true"

android:drawableLeft ="@drawable/checkbox_bg1"

android:drawablePadding ="4.0dip"

android:singleLine ="true"

android:text = "允许手机/电脑同时在心线"

android:textColor ="#ffc6e6f9"

android:textSize ="12.0sp" />

< CheckBox

android:id ="@+id/accept_troopmsg"

android:layout_width ="1.0px"

android:layout_height ="wrap_content"

android:layout_weight ="1.0"

android:background ="@null"

android:button ="@null"

android:checked ="true"

android:drawableLeft ="@drawable/checkbox_bg1"

android:drawablePadding ="4.0dip"

android:text = "接受群消息"

android:textColor ="#ffc6e6f9"

android:textSize ="12.0sp" />

LinearLayout>

LinearLayout>

RelativeLayout>

各个组件的使用没有问题，关键是如何设置他们的属性，来获得一个比较美观的效果，大家可以参考这个例子，来做一下练习，来强化UI的设计。从这个例子中就可以学到很多东西，比如ViwGroup的使用(如何枪套)，background的设置，例如同时使用两个Edittext,设置android:background="@null"设置为空的时候就不会产生间隔了。这个要自己多做设计，时间长了就会有感悟了。最后看一下MainActivity的代码，布局简单package com.example.imitateqq;

import android.os.Bundle;

import android.app.Activity;

import android.app.Dialog;

import android.view.Menu;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.ImageView;

public class QQ extends Activity implements OnClickListener{

private Button login_Button;

private View moreHideBottomView,input2;

private ImageView more_imageView;

private boolean mShowBottom = false;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_qq);

initView();

}

private void initView() {

login_Button=(Button) findViewById(R.id.buton1);

login_Button.setOnClickListener(this);

moreHideBottomView=findViewById(R.id.morehidebottom);

more_imageView=(ImageView) findViewById(R.id.more_image);

input2=findViewById(R.id.input2);

input2.setOnClickListener( this);

}

public void showBottom(boolean bShow){

if(bShow){

moreHideBottomView.setVisibility(View.GONE);

more_imageView.setImageResource(R.drawable.login_more_up);

mShowBottom = true;

}else{

moreHideBottomView.setVisibility(View.VISIBLE);

more_imageView.setImageResource(R.drawable.login_more);

mShowBottom = false;

}

}

public void onClick(View v) {

switch(v.getId())

{

case R.id.input2:

showBottom(!mShowBottom);

break;

case R.id.buton1:

showRequestDialog();

break;

default:

break;

}

}

private Dialog mDialog = null;

private void showRequestDialog()

{

if (mDialog != null)

{

mDialog.dismiss();

mDialog = null;

}

mDialog = DialogFactory.creatRequestDialog(this, "正在验证账号...");

mDialog.show();

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

getMenuInflater().inflate(R.menu.activity_qq, menu);

return true;

}

}最后效果如下：

总结：本文可以作为一个UI练习Demo，大家可以自己独立去写，有问题的可以留下邮箱我给你发一下源码作为参考。下一篇将写主页面的实现，欢迎大家关注。相关阅读:

惊！盗版Win10升级后仍然是盗版

ThinkPHP提交表单时默认自动转义的解决方法

详解Linux下常用远程登陆命令telnet和rlogin的用法

Android中RecyclerView实现横向滑动代码

js分页工具实例

PHP curl伪造IP地址和header信息代码实例

JavaScript实现维吉尼亚(Vigenere)密码算法实例

php中限制ip段访问、禁止ip提交表单的代码分享

jquery cookie的用法总结

php+xml实现在线英文词典查询的方法

JQuery选择器、过滤器大整理

PHP中比较时间大小实例

Android控件之EditView常用属性及应用方法

php使用Cookie实现和用户会话的方法