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

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

更多相关文章

随机推荐