一、运行效果
二、实现步骤
涉及的知识点:
(1)利用到布局的嵌套实现复杂界面
(2)居中对齐,利用线性布局的gravity属性
(3)标签、编辑框、按钮三种控件
(4)编辑框的提示信息,利用hint属性
1.创建 LoginActivity.java和对应的布局文件
2,然后编写登录界面的代码。以及布局资源文件设置登录界面
这是一个嵌套布局
首先有一个最大的线性布局,放了一个标题
在里面嵌套了三个很小线性布局里面各装了一行。看着很清晰
实际代码实现如下:
?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:background="@mipmap/background"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/tv_user_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="30dp"
android:text="@string/title"
android:textColor="#ff00ff"
android:textSize="25sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<TextView
android:id="@+id/tv_user_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/name"
android:textColor="#c71970"
android:textSize="20sp" />
<EditText
android:id="@+id/edt_user_name"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:ems="10"
android:hint="@string/input_name"
android:textColorHint="#c76a19"
android:singleLine="true" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<TextView
android:id="@+id/tv_password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/password"
android:textColor="#c71970"
android:textSize="20sp" />
<EditText
android:id="@+id/edt_password"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:ems="10"
android:hint="@string/input_password"
android:textColorHint="#c76a19"
android:inputType="textPassword"
android:singleLine="true" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dip"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="@+id/btn_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="30dp"
android:paddingRight="30dp"
android:text="@string/login"
android:textColor="#c76a19"
android:textSize="20sp" />
<Button
android:id="@+id/btn_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="30dp"
android:paddingRight="30dp"
android:text="@string/cancel"
android:textColor="#c76a19"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
实现效果图:
string.xml的代码:
<resources>
<string name="app_name">用户登录</string>
<string name="title">用户登录</string>
<string name="name">用户:</string>
<string name="password">密码:</string>
<string name="login">登录</string>
<string name="cancel">取消</string>
<string name="input_name">输入用户名</string>
<string name="input_password">输入密码</string>
</resources>
3.设置事件监听,以便进行验证登录的账号与密码
public class LoginActivity extends Activity {
//用户名编辑框
private EditText edtUserName;
//密码编辑框
private EditText edtPassword;
//登录按钮
private Button btnLogin;
//取消按钮
private Button btnCancel;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 利用布局资源文件设置用户界面
setContentView(R.layout.activity_login);
// 通过资源索引获得界面控件实例
edtUserName = (EditText) findViewById(R.id.edt_user_name);
edtPassword = (EditText) findViewById(R.id.edt_password);
btnLogin = (Button) findViewById(R.id.btn_login);
btnCancel = (Button) findViewById(R.id.btn_cancel);
// 给登录按钮注册监听器,实现监听器接口,编写事件处理方法
btnLogin.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// 保存用户输入的数据:用户名与密码
String strUserName = edtUserName.getText().toString();
String strPassword = edtPassword.getText().toString();
// 判断用户名与密码是否正确(假定用户名与密码都是“admin”)
if (strUserName.equals("admin") && strPassword.equals("admin")) {
Toast.makeText(LoginActivity.this, "恭喜,用户名与密码正确!",
Toast.LENGTH_LONG).show();
} else {
Toast.makeText(LoginActivity.this, "遗憾,用户名或密码错误!请重新输入!",
Toast.LENGTH_LONG).show();
}
}
});
// 给取消按钮注册监听器,实现监听器接口,编写事件处理方法
btnCancel.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
}
这样完成了事件监听的全部过程。
我对布局的嵌套,和对布局的还不了解的深入。
需要更努力的去学习才行。