（四）Android仿微信

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

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

[java] view plain copy

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 plain copy

<? 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 plain copy

< 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 plain copy

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

代码下载

（四）Android仿微信—仿QQ登陆相关推荐

android 加号弹出菜单,Android仿微信、qq点击右上角加号弹出操作框
Android仿微信.qq点击右上角加号弹出操作框,先上图,类似于下图这种,点击加号,会弹出一个对话框,如下图: 微信: 自己实现: 接下来,我们来实现此功能: 其实,实现原理就是,点击"+ ...
Android自定义弹窗模仿微信,Android仿微信、qq点击右上角加号弹出操作框
Android仿微信.qq点击右上角加号弹出操作框,先上图,类似于下图这种,点击加号,会弹出一个对话框,如下图: 微信: 自己实现: 接下来,我们来实现此功能: 其实,实现原理就是,点击"+ ...
android 仿qq群头像,Android仿微信和QQ多图合并框架（类似群头像）的实现方法
Android仿微信和QQ多图合并框架(类似群头像)的实现方法发布时间:2020-10-21 10:33:03 来源:脚本之家阅读:97 作者:jyb_96 前言现在多数app里面加入聊天已经是 ...
聊天气泡框模块源码 (高仿微信、QQ聊天的气泡聊天框)
模块名称:聊天气泡框 (易语言模块) 模块作者:邓学彬(泪闯天涯) 模块说明:高仿微信.QQ聊天的气泡聊天框模块发布:模块+模块源码+调用例程实现方法:基于列表框(ListBox)控件,自己计算每 ...
Android 11 微信，QQ ，微博分享适配
Android 11 微信,QQ ,微博分享适配前言微信篇 QQ篇微博篇前言最近收到客服反馈有用户反馈微信分享不了,具体询问一番发现是Android 11的小米机器,然后依次试了 QQ ...
Android仿微信，QQ群头像合成
原文地址:https://www.jb51.net/article/130296.htm 效果图: 作为程序员,首先会评估下工作量吧.在产品眼里,就是把图片合成一起嘛,有啥难度吗?所以工作时间决定了你 ...
仿微信，qq组合头像
参考原文:点击打开链接从网上找了一些仿微信群聊头像demo,发现是studio编写的,我一直习惯用eclpise,所以参考着完成了eclipse版的, 这个界面是写在适配器里面嵌套的,用法和平时一样 ...
Android 实现微信，QQ的程序前后台切换：back键切换后台；点击通知栏恢复前台。
实现类似微信,QQ的前后台切换:back键切换后台:点击通知栏恢复前台. 1.back键切换后台的实现: 这个实现需要在主activity重写onbackpressed()方法.代码如下: @Over ...
Android 接收微信、QQ其他应用打开，第三方分享
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助在AndroidManifest.xml注册ACTION事件 <activityandroid:name="com.tes ...
Android友盟集成QQ登陆详解大全
第一步打开友盟官网注册一个账号,登录如下图进行操作点击个人中心进入下一个界面点击管理创建一个应用生成AppKey:如下图返回首页点击SDK与文档点击进行第三方登录集成点击右边的SDK下载选择你需要 ...

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

（四）Android仿微信—仿QQ登陆相关推荐

最新文章

热门文章