一、界面布局
1.密码登录界面
可以看到整个界面是分为五块的,首先是一个线性布局,里面包裹着所有组件。
第一行,是RadioGroup,也就是按钮单选框,里面有两个Radiobutton,对应密码登录和验证码登录
第二行,重开一个LinearLayout,包着两个组件,首先是一个TextView(手机号码),然后是一个EdiText类型是number,提示请输入手机号码
第三行,重开一个LinearLayout,首先是一个TextView(登陆密码),再然后其实就是一个EdiText和Button,因为右边有个按钮要覆盖部分EdiText,所以把二者包裹进RelativeLayout,就实现了按钮部分覆盖输入框。
第四行,没啥东西就一个复选框CheckBox表示是否记住密码。
最后一行,就一个登录按钮。
2.验证码登陆界面
看图片,没加东西,甚至少了点东西,第四行记住密码删掉了,然后把组件里面的文字变了变。
以上就是界面设计
二、实现点击切换
利用RadioGroup里面的checkid(表示当前选中的单选按钮的 ID)来改变界面,也就是一个if语句,如果,id==密码登录,那么就显示密码登录,如果id==验证码登录那么就显示验证码登录但是,记住密码那一行变为不可见。
RadioGroup rb_login = findViewById(R.id.rg_login);
rb_login.setOnCheckedChangeListener(this);
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
if(checkedId == R.id.rb_password){
//改变文本内容
tv_password.setText(getString(R.string.login_password));
et_password.setHint(getString(R.string.input_password));
btn_forget.setText(getString(R.string.forget_password));
//可见
ck_remember.setVisibility(View.VISIBLE);
}
else{
//改变文本内容
tv_password.setText(getString(R.string.get_verifycode));
et_password.setHint(getString(R.string.input_verifycode));
btn_forget.setText(getString(R.string.get_verifycode));
//变为不可见
ck_remember.setVisibility(View.GONE);
}
}
}