Android仿QQ登陆窗口实现原理

作者：wurtjq | 2022-12-07 13:30

今天根据腾讯qq，我们做一个练习，来学习如何制作一个漂亮的布局仿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"这个属性。不然不会全屏

复制代码代码如下:

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

过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 />

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

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

各个组件的使用没有问题，关键是如何设置他们的属性，来获得一个比较美观的效果，大家可以参考这个例子，来做一下练习，来强化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，大家可以自己独立去写，有问题的可以留下邮箱我给你发一下源码作为参考。下一篇将写主页面的实现，欢迎大家关注。

推荐阅读

程序员
为什么我的表单提交代码不执行？

如何解决《为什么我的表单提交代码不执行？》经验，为你挑选了1个好方法。 ... [详细]
程序员
如果按下按钮,如何从调用的方法获取返回值？

如何解决《如果按下按钮,如何从调用的方法获取返回值？》经验，为你挑选了1个好方法。 ... [详细]
程序员
Jenkins Slave - 如何添加或更新环境变量

如何解决《JenkinsSlave-如何添加或更新环境变量》经验，为你挑选了0个好方法。 ... [详细]
程序员
为什么TimedRotatingFileHandler无法正常工作以及如何在日志行中解决此问题(轮换正在工作,但缺少日志行)

如何解决《为什么TimedRotatingFileHandler无法正常工作以及如何在日志行中解决此问题(轮换正在工作,但缺少日志行)》经验，为你挑选了1个好方法。 ... [详细]
程序员
Travis CI突然失败：找不到conda命令

如何解决《TravisCI突然失败：找不到conda命令》经验，为你挑选了1个好方法。 ... [详细]
程序员
将功能分为验证和实施？为什么？

如何解决《将功能分为验证和实施？为什么？》经验，为你挑选了2个好方法。 ... [详细]
程序员
在函数内部使用dplyr时出错

如何解决《在函数内部使用dplyr时出错》经验，为你挑选了2个好方法。 ... [详细]
程序员
Linux上的Swift 2.2,"使用未解析的标识符'退出'"

如何解决《Linux上的Swift2.2,"使用未解析的标识符'退出'"》经验，为你挑选了1个好方法。 ... [详细]
程序员
JavaScript - ForEach

如何解决《JavaScript-ForEach》经验，为你挑选了1个好方法。 ... [详细]
程序员
在Storyboard中创建可重用的视图

如何解决《在Storyboard中创建可重用的视图》经验，为你挑选了1个好方法。 ... [详细]
程序员
Android:如何动态更改动画速度？

如何解决《Android:如何动态更改动画速度？》经验，为你挑选了1个好方法。 ... [详细]
程序员
随机矩阵的所有行的快速随机加权选择

如何解决《随机矩阵的所有行的快速随机加权选择》经验，为你挑选了1个好方法。 ... [详细]
程序员
找到nginx版本？

如何解决《找到nginx版本？》经验，为你挑选了3个好方法。 ... [详细]
程序员
寻找一种简单的方法来跳过刀片模板中未定义的变量

如何解决《寻找一种简单的方法来跳过刀片模板中未定义的变量》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何不在node.js中覆盖文件

如何解决《如何不在node.js中覆盖文件》经验，为你挑选了1个好方法。 ... [详细]
程序员
绑定到UWP中的多个属性

如何解决《绑定到UWP中的多个属性》经验，为你挑选了0个好方法。 ... [详细]
程序员
Python itertools-takewhile():多个谓词

如何解决《Pythonitertools-takewhile():多个谓词》经验，为你挑选了1个好方法。 ... [详细]
程序员
R编程语法

如何解决《R编程语法》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何"使用Google验证您的客户端"？

如何解决《如何"使用Google验证您的客户端"？》经验，为你挑选了1个好方法。 ... [详细]
程序员
当你在中间排除一个数字时如何使用SQL的BETWEEN条件？

如何解决《当你在中间排除一个数字时如何使用SQL的BETWEEN条件？》经验，为你挑选了1个好方法。 ... [详细]

wurtjq

这个屌丝很懒，什么也没留下！

关注作者

Tags | 热门标签

RankList | 热门文章