（四）Android仿微信—仿QQ登陆

来源：互联网发布：nginx 安装禅道编辑：程序博客网时间：2024/05/01 22:42

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

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

[java] view plaincopy
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"这个属性。不然不会全屏

[html] view plaincopy
<? 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代码，相信大家就会一路了然。

[html] view plaincopy
< 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的代码，布局简单

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

代码下载

0 0