Android项目按摩床之登陆页面

  上篇Android源代码说到我一Android项目供大家参考学习的，哝，今天来了！

　项目的背景我也就不说了，成果就是一按摩床了！我则负责的是按摩床的客户端，客户在平板电脑选择按摩参数通过蓝牙发送到按摩床让它来为客户进行按摩的服务，当然了，按摩床是C单片机做的。

　上个月哥们儿拿到法国给客户演示，又提出了不少问题，尤其是蓝牙通信的不稳定性，跟单片机工程师商量了，可能要搞成WIFI的通信方式，当然还在进一步实验中。不管如何，今天先让各位瞧瞧客户端的登陆界面吧！

　先截两个图看看效果吧：

　　１）登陆界面：

　　　　

     2)登陆成功后的主功能界面：

　　　　

 OK,其它的“我的帐户”、“个人设置”、“管理员”界面就不截图了，累！以后有机会说到，我再截。

　今天说说登陆首页吧：

　界面看起来还不错哈，这得谢谢我们的御姐，设计的东西客户还是比较满意的。说实话，我今天写这个博客供大家分享，我也有点不知道该从哪方面下手，不管怎么样，我们今天就先看看界面布局吧！

　首页布局页面分别由头部和主体两部分组成，先看login_layout.xml文件代码：

 

<?xml version="1.0" encoding="utf-8"?>
<!-- １登陆首页布局-->　
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent" android:layout_height="fill_parent"
	android:orientation="vertical">
　　<!-- 2 导入头部布局-->　
　　 <include layout="@layout/top_form"
		android:layout_alignParentTop="true" android:layout_marginTop="0px"></include>
      <!-- 3 主登陆界面的布局-->
       <LinearLayout android:orientation="vertical"
		android:gravity="top|center" android:layout_width="fill_parent"
		android:paddingTop="160dp" android:layout_height="fill_parent"
		android:background="@drawable/login_background">
		<!-- ４登陆标题 -->
		<TextView android:text="@string/login_loginTitle"
			android:gravity="center" android:textSize="30dp" style="@style/MAGTextView" />
		<!-- ５用户名以及输入框布局 -->
		<LinearLayout android:orientation="horizontal"
			android:gravity="center" android:layout_width="fill_parent"
			android:layout_height="wrap_content">
			<!-- 用户名标签-->
　　　　　　　　<TextView android:text="@string/login_userName" style="@style/MAGTextView"
				android:width="180dp"></TextView>
		        <!-- 用户名输入框-->
　　　　　　　　<EditText android:id="@+id/login_userName"
				android:layout_width="250dp" android:maxLines="1"
				android:layout_height="wrap_content">
			</EditText>
		</LinearLayout>
		<!-- ６密码以及输入框而局 -->
		<LinearLayout android:orientation="horizontal"
			android:gravity="center" android:layout_marginTop="15dp"
			android:layout_width="fill_parent" android:layout_height="wrap_content">　　　　　　　　　　　　
　　　　　　　　<!--密码标签-->
 　　　　　　　　<TextView android:text="@string/login_password" style="@style/MAGTextView"
				android:width="180dp"></TextView>　　　　　　　　
　　　　　　　　<!--密码输入框-->
　　　　　　　　<EditText android:id="@+id/login_password"
				android:inputType="textPassword" android:maxLines="1"
				android:layout_width="250dp" android:layout_height="wrap_content">
			</EditText>
		</LinearLayout>
		<!-- ７记住我Checkbox -->
		<LinearLayout android:orientation="horizontal"
			android:gravity="center" android:layout_marginTop="10dp"
			android:layout_width="fill_parent" android:layout_height="wrap_content">
			<!--复选框-->
　　　　　　　　<CheckBox android:id="@+id/login_rememberme"
				android:layout_width="wrap_content" android:layout_height="wrap_content" />		
　　　　　　　　<!--记住我标签-->
　　　　　　　　<TextView android:text="@string/remeber_me" style="@style/MAGTextView">
			</TextView>
		</LinearLayout>
		<!-- ８登陆和重置按钮 -->
		<LinearLayout android:orientation="horizontal"
			android:gravity="center" android:layout_marginTop="10dp"
			android:layout_width="fill_parent" android:layout_height="wrap_content">
　　　　　　　　<!--登陆按钮-->
 　　　　　　　　<Button android:id="@+id/login_btn" style="@style/MAGButton"
				android:text="@string/login_login_btn" />
　　　　　　　　<!--重置按钮-->
 　　　　　　　　<Button android:id="@+id/login_reset" style="@style/MAGButton"
				android:text="@string/login_reset_btn" />
		</LinearLayout>
	</LinearLayout>
</LinearLayout>

 　就这样一个xml文件，界面为何如此的漂亮呢，秘密是图片！我在该XML文件中已经加了含义说明，呵呵！现简单的说说吧，EditText、Checkbox以及Button相比TextView，有一个值得我们注意的是多了一个android:id，当然了，并不是说TextView不能没有android:id，你完全可以把这四个标签想像成我们web开发中的input、checkbox、button以及label。android:id就类似id喽。linearlayout就类似div标签喽。其它的什么属性含义我就偷个懒，不说了，你完全可以跟HTML挂上边！

   要做到获取页面数据以及按钮响应，我们得为这些标签做响应啊，所以我们在Activity里添加，咦，我怎么越说越感觉我在讲HTML呢？！不管怎么样，看看LoginActivity的事件注册代码吧：

 

private void initListener() {
		Button loginBtn = (Button) findViewById(R.id.login_btn);
		loginBtn.setOnClickListener(new UserAction(this));
		Button resetBtn = (Button) findViewById(R.id.login_reset);
		resetBtn.setOnClickListener(new ClickEvent());
		ImageView closeButton = (ImageView) findViewById(R.id.closebtn);
		closeButton.setOnClickListener(new BackProcessLisener(this));
}

 获取，转换，注册点击事件。UserAction做的是一个登陆事件的处理，ClickEvent是重置界面元素，BackProcessListener则是处理登出系统处理。

　UserAction不说了，涉及到一些商业性质的东西，说说ClickEvent内部类吧：

 

	class ClickEvent implements View.OnClickListener{
		@Override
		public void onClick(View v) {
			switch(v.getId()){
				case R.id.login_btn:
					break;
				case R.id.login_reset://登陆重置，将页面元素值清空
					username.setText("");
					password.setText("");
					rememberMe.setChecked(false);
					break;
				default:
					break;
			}
		}
	} 

 　BackProcessListener呢，则是重写的onBackPressed()方法，该方法弹出一个退出系统窗口，界面如下所示：

　　

　具体实现代码如下图所示：

 

@Override
public void onBackPressed() {
　　DialogInterface.OnClickListener okClickedListener = new　DialogInterface.OnClickListener(){
	public void onClick(DialogInterface dialog, int whichButton){
		CommonsActivity.super.onBackPressed();
		try{
			Log.i(TAG,"Commons activity pid:"+android.os.Process.myPid());
					android.os.Process.killProcess(android.os.Process.myPid());
					releaseWakeLock();
		}catch (Exception e){
					Log.e("Error", e.getMessage(), e);
		}
	}
};
	DialogSupport.confirm(this,this.getResources().getString(R.string.confirm_exit_title),this.getResources().getString(R.string.exit_confirm), okClickedListener);
	}

 　OK，这段代码就说到这儿，以后我整理整理把源代码贴上供大家鉴赏！