最近比较有空,整理了一些登陆页面的一些体验,写成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文件夹中需要的一些图片也提供出来:
注释写得很清楚了。喜欢的朋友可以进一步优化一下。有欠缺之处,欢迎大家吐槽,讨论。