android之模仿QQ登陆的布局实现

可以参考wangjinyu501的博客,地址:http://blog.csdn.net/wangjinyu501/article/details/8166389

效果如下:

android之模仿QQ登陆的布局实现_第1张图片

android之模仿QQ登陆的布局实现_第2张图片

[java] view plain copy

packagecom.example.imitateqq;
importandroid.app.Activity;
importandroid.content.Intent;
importandroid.os.Bundle;
importandroid.os.Handler;
publicclassSplashActivityextendsActivity{
privateIntentintent;
@Override
protectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.splash);
startMainAvtivity();
}
privatevoidstartMainAvtivity(){
newHandler().postDelayed(newRunnable(){
publicvoidrun(){
intent=newIntent(SplashActivity.this,QQ.class);
startActivity(intent);
SplashActivity.this.finish();//结束本Activity
}
},1000);//设置执行时间
}
}

xml布局文件就是一个全屏的图片，要注意的是设置 android:scaleType="matrix"这个属性。不然不会全屏 [html] view plain copy

<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns: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

<RelativeLayoutxmlns: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

packagecom.example.imitateqq;
importandroid.os.Bundle;
importandroid.app.Activity;
importandroid.app.Dialog;
importandroid.view.Menu;
importandroid.view.View;
importandroid.view.View.OnClickListener;
importandroid.widget.Button;
importandroid.widget.ImageView;
publicclassQQextendsActivityimplementsOnClickListener{
privateButtonlogin_Button;
privateViewmoreHideBottomView,input2;
privateImageViewmore_imageView;
privatebooleanmShowBottom=false;
@Override
publicvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_qq);
initView();
}
privatevoidinitView(){
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);
}
publicvoidshowBottom(booleanbShow){
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;
}
}
publicvoidonClick(Viewv){
switch(v.getId())
{
caseR.id.input2:
showBottom(!mShowBottom);
break;
caseR.id.buton1:
showRequestDialog();
break;
default:
break;
}
}
privateDialogmDialog=null;
privatevoidshowRequestDialog()
{
if(mDialog!=null)
{
mDialog.dismiss();
mDialog=null;
}
mDialog=DialogFactory.creatRequestDialog(this,"正在验证账号...");
mDialog.show();
}
@Override
publicbooleanonCreateOptionsMenu(Menumenu){
getMenuInflater().inflate(R.menu.activity_qq,menu);
returntrue;
}
}

总结：本文可以作为一个UI练习Demo，大家可以自己独立去写，有问题的可以留下邮箱我给你发一下源码作为参考。下一篇将写主页面的实现，欢迎大家关注。代码下载地址: http://download.csdn.net/detail/wangjinyu501/5875407

更多相关文章

随机推荐