Android 고급 모방 WeChat 결제 숫자 키보드 기능

이제 많은 앱에서 결제 및 비밀번호 입력 기능을 위해 맞춤 숫자 키보드를 사용하므로 편리하고 실용적입니다. 다음 기사에서는 Android 위챗 결제 숫자 키보드 기능을 소개하는데, 이는 매우 좋습니다. 관심 있는 친구들, 함께 배워보세요

WeChat의 숫자 키보드를 모방하여 자신의 프로젝트에 직접 사용하는 방법을 배워 보세요

다음 렌더링을 먼저 보세요.

1. 사용자 정의 레이아웃

<?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="wrap_content">
<!-- 输入键盘 -->
<GridView
android:id="@+id/gv_keybord"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#bdbdbd"
android:horizontalSpacing="1px"
android:numColumns="3"
android:verticalSpacing="1px" />
<View
android:id="@+id/line"
android:layout_width="match_parent"
android:layout_height="1px"
android:layout_above="@id/gv_keybord"
android:background="#bdbdbd" />
<RelativeLayout
android:id="@+id/layoutBack"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@id/line"
android:background="#f5f5f5"
android:padding="10dp">
<ImageView
android:id="@+id/imgBack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@mipmap/keyboard_back_img" />
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:layout_above="@id/layoutBack"
android:layout_marginTop="1dp"
android:background="#bdbdbd" />
</RelativeLayout>

키보드 레이아웃은 기본적으로 4X3 그리드 레이아웃의 GridView입니다. 🎜>2. 숫자 키보드 콘텐츠 구현

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.GridView;
import android.widget.RelativeLayout;
import com.lnyp.pswkeyboard.R;
import com.lnyp.pswkeyboard.adapter.KeyBoardAdapter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;
/**
* 虚拟键盘
*/
public class VirtualKeyboardView extends RelativeLayout implements View.OnClickListener {
Context context;
private GridView gridView; 
private RelativeLayout layoutBack;
private ArrayList<Map<String, String>> valueList; 
public VirtualKeyboardView(Context context) {
this(context, null);
}
public VirtualKeyboardView(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
View view = View.inflate(context, R.layout.layout_virtual_keyboard, null);
valueList = new ArrayList<>();
layoutBack = (RelativeLayout) view.findViewById(R.id.layoutBack);
layoutBack.setOnClickListener(this);
gridView = (GridView) view.findViewById(R.id.gv_keybord);
setView();
addView(view); 
}
public RelativeLayout getLayoutBack() {
return layoutBack;
}
public ArrayList<Map<String, String>> getValueList() {
return valueList;
}
public GridView getGridView() {
return gridView;
}
private void setView() {
/* 初始化按钮上应该显示的数字 */
for (int i = 1; i < 13; i++) {
Map<String, String> map = new HashMap<String, String>();
if (i < 10) {
map.put("name", String.valueOf(i));
} else if (i == 10) {
map.put("name", ".");
} else if (i == 11) {
map.put("name", String.valueOf(0));
} else if (i == 12) {
map.put("name", "");
}
valueList.add(map);
}
KeyBoardAdapter keyBoardAdapter = new KeyBoardAdapter(context, valueList);
gridView.setAdapter(keyBoardAdapter);
}
@Override
public void onClick(View v) {
}
}

어댑터가 이를 어떻게 처리하는지 살펴보겠습니다. KeyBoardAdapter .java

import android.content.Context;
import android.graphics.Color;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.RelativeLayout;
import android.widget.TextView;
import com.lnyp.pswkeyboard.R;
import java.util.ArrayList;
import java.util.Map;
/**
* 九宫格键盘适配器
*/
public class KeyBoardAdapter extends BaseAdapter {
private Context mContext;
private ArrayList<Map<String, String>> valueList;
public KeyBoardAdapter(Context mContext, ArrayList<Map<String, String>> valueList) {
this.mContext = mContext;
this.valueList = valueList;
}
@Override
public int getCount() {
return valueList.size();
}
@Override
public Object getItem(int position) {
return valueList.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder viewHolder;
if (convertView == null) {
convertView = View.inflate(mContext, R.layout.grid_item_virtual_keyboard, null);
viewHolder = new ViewHolder();
viewHolder.btnKey = (TextView) convertView.findViewById(R.id.btn_keys);
viewHolder.imgDelete = (RelativeLayout) convertView.findViewById(R.id.imgDelete);
convertView.setTag(viewHolder);
} else {
viewHolder = (ViewHolder) convertView.getTag();
}
if (position == 9) {
viewHolder.imgDelete.setVisibility(View.INVISIBLE);
viewHolder.btnKey.setVisibility(View.VISIBLE);
viewHolder.btnKey.setText(valueList.get(position).get("name"));
viewHolder.btnKey.setBackgroundColor(Color.parseColor("#e0e0e0"));
} else if (position == 11) {
viewHolder.btnKey.setBackgroundResource(R.mipmap.keyboard_delete_img);
viewHolder.imgDelete.setVisibility(View.VISIBLE);
viewHolder.btnKey.setVisibility(View.INVISIBLE);
} else {
viewHolder.imgDelete.setVisibility(View.INVISIBLE);
viewHolder.btnKey.setVisibility(View.VISIBLE);
viewHolder.btnKey.setText(valueList.get(position).get("name"));
}
return convertView;
}
/**
* 存放控件
*/
public final class ViewHolder {
public TextView btnKey;
public RelativeLayout imgDelete;
}
}

어댑터를 살펴보기 전에 먼저 살펴보겠습니다. Grid_item_virtual_keyboard 구현 방법:

<?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="#e0e0e0">
<TextView
android:id="@+id/btn_keys"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_centerInParent="true"
android:background="@drawable/selector_gird_item"
android:gravity="center"
android:includeFontPadding="false"
android:textColor="#333333"
android:textSize="26sp" />
<RelativeLayout
android:id="@+id/imgDelete"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_centerInParent="true">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@mipmap/keyboard_delete_img" />
</RelativeLayout>
</RelativeLayout>

보시다시피 항목 레이아웃 파일에 두 개의 뷰를 지정했습니다. 하나는 일반적으로 숫자를 표시하는 TextView이고 다른 하나는 마지막으로 삭제된 키를 표시하는 RelativeLayout입니다. >그리고 KeyBoardAdapter의 getView 메소드에서는 위치에 따라 레이아웃을 다르게 처리합니다. position이 아래쪽에서 3번째 버튼인 9인 경우, position이 12인 경우 버튼 색상을 별도로 설정해야 합니다. 마지막 버튼이 있는 경우, 삭제 버튼이 표시되고 숫자 버튼이 숨겨지도록 제어해야 합니다.

3. 키보드 이벤트 로직 사용 및 구현

<.>레이아웃에서는 자신이 정의한 숫자 키보드를 직접 사용할 수 있습니다:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#efefef"
tools:context="com.lnyp.pswkeyboard.NormalKeyBoardActivity">
<EditText
android:id="@+id/textAmount"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#FFFFFF"
android:inputType="numberDecimal"
android:padding="14dp"
android:textColor="#333333"
android:textSize="16sp" />
<com.lnyp.pswkeyboard.widget.VirtualKeyboardView
android:id="@+id/virtualKeyboardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" />
</RelativeLayout>

활동:

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.Editable;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.EditText;
import android.widget.GridView;
import com.lnyp.pswkeyboard.widget.VirtualKeyboardView;
import java.util.ArrayList;
import java.util.Map;
public class NormalKeyBoardActivity extends AppCompatActivity {
private VirtualKeyboardView virtualKeyboardView;
private GridView gridView;
private ArrayList<Map<String, String>> valueList;
private EditText textAmount;
private Animation enterAnim;
private Animation exitAnim;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_normal_key_board);
valueList = virtualKeyboardView.getValueList();
initAnim();
initView();
}
private void initAnim() {
enterAnim = AnimationUtils.loadAnimation(this, R.anim.push_bottom_in);
exitAnim = AnimationUtils.loadAnimation(this, R.anim.push_bottom_out);
}
private void initView() {
virtualKeyboardView = (VirtualKeyboardView) findViewById(R.id.virtualKeyboardView);
textAmount = (EditText) findViewById(R.id.textAmount);
virtualKeyboardView.getLayoutBack().setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
virtualKeyboardView.startAnimation(exitAnim);
virtualKeyboardView.setVisibility(View.GONE);
}
});
gridView = virtualKeyboardView.getGridView();
gridView.setOnItemClickListener(onItemClickListener);
textAmount.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
virtualKeyboardView.setFocusable(true);
virtualKeyboardView.setFocusableInTouchMode(true);
virtualKeyboardView.startAnimation(enterAnim);
virtualKeyboardView.setVisibility(View.VISIBLE);
}
});
}
private AdapterView.OnItemClickListener onItemClickListener = new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
if (position < 11 && position != 9) { //点击0~9按钮
String amount = textAmount.getText().toString().trim();
amount = amount + valueList.get(position).get("name");
textAmount.setText(amount);
Editable ea = textAmount.getText();
textAmount.setSelection(ea.length());
} else {
if (position == 9) { //点击退格键
String amount = textAmount.getText().toString().trim();
if (!amount.contains(".")) {
amount = amount + valueList.get(position).get("name");
textAmount.setText(amount);
Editable ea = textAmount.getText();
textAmount.setSelection(ea.length());
}
}
if (position == 11) { //点击退格键
String amount = textAmount.getText().toString().trim();
if (amount.length() > 0) {
amount = amount.substring(0, amount.length() - 1);
textAmount.setText(amount);
Editable ea = textAmount.getText();
textAmount.setSelection(ea.length());
}
}
}
}
};}

에서 숫자 키보드를 작동합니다.

위 내용은 Android 고급 모방 WeChat 결제 숫자 키보드 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!