简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 위챗 애플릿 > 위챗 개발 > 본문

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

高洛峰
풀어 주다： 2017-03-27 13:44:18
원래의
2446명이 탐색했습니다.

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

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

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

Android 高仿微信支付数字键盘功能

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
android
원천：php.cn
이전 기사：안드로이드 고도모조 WeChat 결제 비밀번호 입력 제어 예시 코드 다음 기사：JsApi를 통한 Java의 WeChat 결제 방법 구현에 대한 자세한 설명
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
2
1816
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
10
1976
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1665
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1569
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1593
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！