Android仿QQ登陆窗口实现原理

前端技术 2023/09/07 Android

今天根据腾讯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\" />

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

<Button
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 = \"登录\" />

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

<LinearLayout
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\" >

<RelativeLayout
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\" />
</RelativeLayout >
<LinearLayout
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>

</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，大家可以自己独立去写，有问题的可以留下邮箱我给你发一下源码作为参考。下一篇将写主页面的实现，欢迎大家关注。

本文地址：https://www.stayed.cn/item/18817

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案