最近比较有空,整理了一些登陆页面的一些体验,写成demo总结记录下来,在此分享给大家:
先看看效果图吧:模拟器效果不是很好,真机上却是没问题的。
为了用模拟器录效果图,花了很长时间在模拟器不弹软键盘的问题上。哭死,差点没耐心录屏了。。。
接下来我们就看看上面是怎么实现的吧。
xml布局中login_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ecedf1" >
<ScrollView android:id="@+id/login_sv" android:layout_width="fill_parent" android:layout_height="wrap_content" >
<RelativeLayout android:id="@+id/login_rl_bg" android:layout_width="fill_parent" android:layout_height="wrap_content" >
<LinearLayout android:id="@+id/login_ll_blue" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" >
<LinearLayout android:id="@+id/login_ll_bg" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:orientation="vertical" >
<Button android:id="@+id/login_td" android:layout_width="94dp" android:layout_height="94dp" android:layout_marginTop="61dp" android:background="@drawable/login_bg" android:clickable="false" />
</LinearLayout>
<LinearLayout android:id="@+id/login_ll_username_password" android:layout_width="fill_parent" android:layout_height="119dp" android:layout_marginLeft="18dp" android:layout_marginRight="18dp" android:layout_marginTop="45dip" android:background="@drawable/login_Boxbg" android:orientation="vertical" >
<LinearLayout android:layout_width="fill_parent" android:layout_height="59dp" android:orientation="horizontal" >
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingBottom="18dp" android:paddingLeft="10dp" android:paddingTop="18dp" android:src="@drawable/login_icon_mail" />
<EditText android:id="@+id/login_et_username" android:layout_width="0dip" android:layout_height="fill_parent" android:layout_weight="9" android:background="@null" android:hint="请输入邮箱" android:inputType="textEmailAddress" android:padding="10dp" android:paddingTop="10dp" android:singleLine="true" android:textColor="#acacac" android:textColorHint="#acacac" android:textSize="13sp" />
</LinearLayout>
<View android:layout_width="fill_parent" android:layout_height="1dp" android:background="#f0f1f4" />
<LinearLayout android:layout_width="fill_parent" android:layout_height="59dp" android:orientation="horizontal" >
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingBottom="18dp" android:paddingLeft="10dp" android:paddingTop="18dp" android:src="@drawable/login_icon_lock" />
<EditText android:id="@+id/login_et_password" android:layout_width="0dip" android:layout_height="fill_parent" android:layout_weight="9" android:background="@null" android:digits="1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ" android:hint="输入密码" android:inputType="textEmailAddress" android:maxLength="12" android:padding="10dp" android:paddingTop="10dp" android:password="true" android:singleLine="true" android:textColor="#acacac" android:textColorHint="#acacac" android:textSize="13sp" />
<ImageButton android:id="@+id/login_ib_eye" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginRight="10dp" android:background="@drawable/login_icon_eye" />
</LinearLayout>
</LinearLayout>
<LinearLayout android:id="@+id/login_ll_login" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="24dp" android:orientation="horizontal" android:padding="10dip" >
<Button android:id="@+id/login_bt_login" android:layout_width="0dip" android:layout_height="45dp" android:layout_marginLeft="8dp" android:layout_marginRight="8dip" android:layout_weight="1" android:background="@drawable/public_bt_green_select" android:gravity="center" android:text="登\t\t录" android:textColor="#ffffff" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
在Activity中,需要监听软件盘的弹起,控制来滑动ScrollView;
@SuppressLint("NewApi")
public class MainActivity extends Activity implements OnClickListener,OnLayoutChangeListener{
//登录页面背景
private View rlLoginBg;
//登录页面上面部分背景
private LinearLayout llLoginBg;
// 账号、密码
private EditText etUsername,etPassword;
// 屏幕的高度
private int screenHeight;
//软件盘弹起后所占高度阀值
private int keyHeight = 0;
//滚动条
private ScrollView mScrollView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.login_activity); getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN);// 隐藏软键盘
initView();
}
/** * 初始化控件与事件监听 */
protected void initView() {
// 得到屏幕高度
screenHeight = getWindowManager().getDefaultDisplay().getHeight();
//阀值设置为屏幕高度的1/3
keyHeight = screenHeight/3;
rlLoginBg=findViewById(R.id.login_rl_bg);
mScrollView = (ScrollView) findViewById(R.id.login_sv);
llLoginBg=(LinearLayout)findViewById(R.id.login_ll_bg);
etUsername=(EditText) findViewById(R.id.login_et_username);
etPassword=(EditText) findViewById(R.id.login_et_password);
llLoginBg.setOnClickListener(this);
etUsername.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View arg0,MotionEvent arg1) {
//滚动条下滑到底部
scrollToBottom(etUsername);
return false;
}
});
etPassword.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View arg0,MotionEvent arg1) {
//滚动条下滑到底部
scrollToBottom(etPassword);
return false;
}
});
}
@Override
public void onClick(View v) {
switch (v.getId()) {
//登陆背景按钮点击事件
case R.id.login_ll_bg:
//隐藏软件盘
HideKeyboard(etPassword);
break;
default:
break;
}
}
@SuppressLint("NewApi")
@Override
protected void onResume() {
super.onResume();
//添加layout大小发生改变监听器
rlLoginBg.addOnLayoutChangeListener(this);
}
// 隐藏软键盘
private void HideKeyboard(EditText edittext){
etPassword.setCursorVisible(false);
etUsername.setCursorVisible(false);
InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
if(imm.isActive()){
imm.hideSoftInputFromWindow(edittext.getWindowToken(),0);
}
}
//监听软件盘弹起和关闭
@Override
public void onLayoutChange(View v,int left,int top,int right,int bottom,int oldLeft,int oldTop,int oldRight,int oldBottom) {
//现在认为只要控件将Activity向上推的高度超过了1/3屏幕高,就认为软键盘弹起
if(oldBottom != 0 && bottom != 0 &&(oldBottom - bottom > keyHeight)){
// Toast.makeText(LoginActivity.this,"监听到软键盘弹起...",0).show();
scrollToBottom(etUsername);
}else if(oldBottom != 0 && bottom != 0 &&(bottom - oldBottom > keyHeight)){
// Toast.makeText(LoginActivity.this,"监听到软件盘关闭...",0).show();
}
}
private void scrollToBottom(final EditText et){
et.setFocusable(true);
mScrollView.postDelayed(new Runnable() {
public void run() {
//smoothScrollTo和ScrollTo效果不一样
mScrollView.smoothScrollTo(0,llLoginBg.getBottom());
}
},100);
}
}
另外drawable文件夹中需要的一些图片也提供出来:
注释写得很清楚了。喜欢的朋友可以进一步优化一下。有欠缺之处,欢迎大家吐槽,讨论。