Android大屏项目中的数字键盘输入界面的功能实现
在现在的各大商场中,可以看到各种个样的自拍屋、唱吧、黄小鹿等娱乐设备，这些设备在使用时都会有个输入数字验证码的界面，这个界面很简单就是一些数字，带有删除键和完成键。如果我们使用系统自带的键盘，那么会很麻烦，因为就只是输入数字而已，系统的还有输入英文字母，符号什么的，而且系统键盘还会在用户操作不当时隐藏掉，这在这些大屏操作上是不允许的，因为用户体验会很差，这个键盘需要一直显示在这个页面上，系统的键盘我没有找到一直显示的方法（知道的大神可以告诉下，非常感激），所以就自己写一个符合自己需求的简单数字键盘，在此记录一下，下面就是我写的数字键盘过程。
实现截图:
xml布局文件
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".usb.activities.HomePageActivity"
android:orientation="vertical"
android:background="@drawable/home_bg"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="标题"
android:textColor="#ffffff"
android:textSize="30sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<!-- <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="请输入你的拍摄码"
android:textSize="24sp"
android:layout_marginLeft="20dp"
/>-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginBottom="20dp">
<TextView
android:id="@+id/tv_input_box"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginTop="10dp"
android:textColor="@color/black"
android:maxLength="4"
android:textSize="24sp"
android:gravity="center"
android:letterSpacing="1.2sp"
android:background="@color/white"
android:layout_marginRight="20dp"
android:layout_marginLeft="20dp"
/>
<!-- <LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<View
android:layout_width="60dp"
android:layout_height="1dp"
android:layout_marginRight="10dp"
android:layout_marginEnd="10dp"
android:background="@color/black"/>
<View
android:layout_width="60dp"
android:layout_height="1dp"
android:layout_marginRight="10dp"
android:layout_marginEnd="10dp"
android:background="@color/black"/>
<View
android:layout_width="60dp"
android:layout_height="1dp"
android:layout_marginRight="10dp"
android:layout_marginEnd="10dp"
android:background="@color/black"/>
<View
android:layout_width="60dp"
android:layout_height="1dp"
android:background="@color/black"/>
</LinearLayout>-->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginTop="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<TextView
android:layout_width="60dp"
android:layout_height="40dp"
android:textColor="@color/white"
android:gravity="center"
android:textSize="20sp"
android:text="1"
android:id="@+id/num1"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<TextView
android:layout_width="60dp"
android:layout_height="40dp"
android:text="2"
android:textColor="@color/white"
android:gravity="center"
android:textSize="20sp"
android:id="@+id/num2"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<TextView
android:layout_width="60dp"
android:layout_height="40dp"
android:text="3"
android:textColor="@color/white"
android:gravity="center"
android:textSize="20sp"
android:id="@+id/num3"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<TextView
android:layout_width="60dp"
android:layout_height="40dp"
android:textColor="@color/white"
android:gravity="center"
android:textSize="20sp"
android:text="4"
android:id="@+id/num4"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<TextView
android:layout_width="60dp"
android:layout_height="40dp"
android:text="5"
android:textColor="@color/white"
android:gravity="center"
android:textSize="20sp"
android:id="@+id/num5"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<TextView
android:layout_width="60dp"
android:layout_height="40dp"
android:text="6"
android:textColor="@color/white"
android:gravity="center"
android:textSize="20sp"
android:id="@+id/num6"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<TextView
android:layout_width="60dp"
android:layout_height="40dp"
android:textColor="@color/white"
android:gravity="center"
android:textSize="20sp"
android:text="7"
android:id="@+id/num7"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<TextView
android:layout_width="60dp"
android:layout_height="40dp"
android:text="8"
android:textColor="@color/white"
android:gravity="center"
android:textSize="20sp"
android:id="@+id/num8"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<TextView
android:layout_width="60dp"
android:layout_height="40dp"
android:text="9"
android:textColor="@color/white"
android:gravity="center"
android:textSize="20sp"
android:id="@+id/num9"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<TextView
android:layout_width="60dp"
android:layout_height="40dp"
android:textColor="@color/white"
android:gravity="center"
android:textSize="20sp"
android:text="删除"
android:id="@+id/delete_num"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<TextView
android:layout_width="60dp"
android:layout_height="40dp"
android:text="0"
android:textColor="@color/white"
android:gravity="center"
android:textSize="20sp"
android:id="@+id/num0"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<TextView
android:layout_width="60dp"
android:layout_height="40dp"
android:text="完成"
android:id="@+id/input_finish"
android:textColor="@color/white"
android:gravity="center"
android:textSize="20sp"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<FrameLayout
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/black"
android:alpha="0.6"
android:id="@+id/dialog_home_bg"/>
<LinearLayout
android:visibility="gone"
android:layout_width="300dp"
android:layout_height="200dp"
android:orientation="vertical"
android:layout_gravity="center"
android:background="#e0e8e8"
android:id="@+id/dialog_home">
<LinearLayout
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="100dp"
android:gravity="center">
<zxj.loveyoung.cn.camerausbcontrol.usb.view.RoundImageView
android:id="@+id/head_iv"
android:layout_width="100dp"
android:layout_height="100dp"
/>
</LinearLayout>
<LinearLayout
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:background="@color/black"/>
<LinearLayout
android:layout_marginTop="1dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:background="#e522598f"
android:layout_marginLeft="20dp"
android:layout_width="0dp"
android:layout_height="match_parent"
android:textColor="@color/black"
android:textSize="20sp"
android:layout_weight="1"
android:id="@+id/yes"
android:text="确认"
android:gravity="center"/>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="@color/black"
/>
<TextView
android:background="#c5d7da"
android:id="@+id/cancel"
android:layout_width="0dp"
android:layout_height="match_parent"
android:textColor="@color/black"
android:textSize="20sp"
android:layout_weight="1"
android:text="取消"
android:layout_marginRight="20dp"
android:gravity="center"/>
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/black"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
/>
</LinearLayout>
</FrameLayout>
在Activity中使用部分代码:
在oncreate方法中通过findviewByid获取到相应的控件后,按下列代码处理,在实现过程中,可以根据需求改,我的实现方法就是,利用Textview,来实现,然后自己控制数字的输入和删除,利用字符串的处理,这个仅限于数字输入,也可以扩展为字母输入,在输入时,利用textView 的getText方法去获取输入的内容并显示.在删除时,利用字符串操作的subString()方法,去求整个串的除最后一位数字的字串,如abcd,删除d就是substring(0,字符串长度减一)即abc,然后用setText方法设置到显示的位置.点击完成按钮时,如果需要4位,就取前四位,必须用求字串的方法,不然如果用户多按了按钮,利用getText得到的数据就不再是要求的4位了,而是很多位了,所以需要判断下,大于4位,就取4位,小于4位,就提示
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.tv_input_box:break;
case R.id.num0:
input_str=input_str+num0.getText().toString();
input_box.setText(input_str);
break;
case R.id.num1:
input_str=input_str+num1.getText().toString();
input_box.setText(input_str);
break;
case R.id.num2:
input_str=input_str+num2.getText().toString();
input_box.setText(input_str);
break;
case R.id.num3:
input_str=input_str+num3.getText().toString();
input_box.setText(input_str);
break;
case R.id.num4:
input_str=input_str+num4.getText().toString();
input_box.setText(input_str);
break;
case R.id.num5:
input_str=input_str+num5.getText().toString();
input_box.setText(input_str);
break;
case R.id.num6:
input_str=input_str+num6.getText().toString();
input_box.setText(input_str);
break;
case R.id.num7:
input_str=input_str+num7.getText().toString();
input_box.setText(input_str);
break;
case R.id.num8:
input_str=input_str+num8.getText().toString();
input_box.setText(input_str);
break;
case R.id.num9:
input_str=input_str+num9.getText().toString();
input_box.setText(input_str);
break;
case R.id.input_finish:
if(input_str.equals("")){
Toast.makeText(HomePageActivity.this,"请输入",Toast.LENGTH_SHORT).show();
}else{
if(input_str.length()>=4){
input_str=input_str.substring(0,4);
Toast.makeText(HomePageActivity.this,"输入完成"+input_str,Toast.LENGTH_SHORT).show();
dialog_home_bg.setVisibility(View.VISIBLE);
dialog_home.setVisibility(View.VISIBLE);
NetTool.getIns().requestCaptureCode(HomePageActivity.this, input_str, "dgagefge6564536", new HttpListener() {
@Override
public void onSucceed(int what, Response response) {
Log.e("zxj==debug","json==>"+response.get().toString());
Gson gson=new Gson();
try{
CaptureCodeEntity captureCodeEntity=gson.fromJson(response.get().toString(),CaptureCodeEntity.class);
if(captureCodeEntity.getCode()==200){
AppConstants.UploadToken=captureCodeEntity.getResult().getData().getUpToken();
AppConstants.bphoto_uid=captureCodeEntity.getResult().getData().getUid()+"";
AppConstants.img_type=captureCodeEntity.getResult().getData().getType();
AppConstants.order_id=captureCodeEntity.getResult().getData().getOrderId()+"";
AppConstants.bg_color=captureCodeEntity.getResult().getData().getColor();
dialog_home_bg.setVisibility(View.VISIBLE);
dialog_home.setVisibility(View.VISIBLE);
}
}catch (Exception e){
Toast.makeText(HomePageActivity.this,"请输入正确的拍摄码",Toast.LENGTH_LONG).show();
}
}
@Override
public void onFailed(int what, Response response) {
Toast.makeText(HomePageActivity.this,"请输入正确的拍摄码",Toast.LENGTH_SHORT).show();
}
});
}else{
Toast.makeText(HomePageActivity.this,"请输入正确的拍摄码",Toast.LENGTH_SHORT).show();
}
}
break;
case R.id.yes:
Intent intent =new Intent(HomePageActivity.this, MainActivity.class);
dialog_home.setVisibility(View.GONE);
dialog_home_bg.setVisibility(View.GONE);
startActivity(intent);
break;
case R.id.cancel:
dialog_home.setVisibility(View.GONE);
dialog_home_bg.setVisibility(View.GONE);
break;
case R.id.delete_num:
if(input_str.equals("")){
input_box.setText("");
}else{
if(input_str.length()>4){
input_str=input_str.substring(0,4);
input_str=input_str.substring(0,input_str.length()-1);
input_box.setText(input_str);
}else{
input_str=input_str.substring(0,input_str.length()-1);
input_box.setText(input_str);
}
}
break;
}
}
欢迎各位大神对不合理的地方批评指正,本人将不胜感激