안 드 로 이 드 모방 위 챗 결제 비밀번호 입력 컨트롤

위 챗 결제 비밀번호 컨트롤 처럼 app 에서 얼마나 자주 볼 수 있 는 기능 입 니까?최근 프로젝트 는 이 기능 이 필요 하기 때문에 이 기능 을 실현 할 수 있다.
예전 처럼 슛 은 각 도 를 잘 찾 아야 하고 생각 을 정리 해 야 한다.이'작고 아름 다운'컨트롤 에 대해 우 리 는 이렇게 생각해 야 한다.
I.비밀 번 호 를 입력 할 수 있 는 동 태 를 코드 로 불 러 옵 니 다.
II.Gridview 시 뮬 레이 션 을 통 해 입력 디지털 키 보드 를 만 들 고 습관 에 따라 화면 밑 에서 튀 어 나 옵 니 다.
Ⅲ.입력 한 디지털 키 보드 를 이벤트 감청 하고 이 입력 숫자 를 이 암호 상자 에 입력 하 며 암호 길이 가 일치 할 때 이벤트 리 셋 을 합 니 다.
이 사유 도 는 반드시 이렇게 해 야 한다.

우선,우 리 는 필요 에 따라 암호 상 자 를 동적 으로 불 러 와 야 합 니 다.해당 코드 는 다음 과 같 습 니 다. 

for (int i = 0; i < 6; i++) {
   TextView textView = new TextView(context);
   android.widget.LinearLayout.LayoutParams layoutParams = new android.widget.LinearLayout.LayoutParams(
     0, android.widget.LinearLayout.LayoutParams.WRAP_CONTENT, 1);
   textView.setGravity(Gravity.CENTER);
   textView.setTransformationMethod(PasswordTransformationMethod.getInstance());
   textView.setTextSize(32);
   textView.setLayoutParams(layoutParams);
   ll_pwd.addView(textView);
   if (i != 5) {
    View view2 = new View(context);
    android.widget.LinearLayout.LayoutParams layoutParams1 = new android.widget.LinearLayout.LayoutParams(
      1,
      android.widget.LinearLayout.LayoutParams.MATCH_PARENT,
      0);
    view2.setLayoutParams(layoutParams1);
    view2.setBackgroundColor(Color.parseColor("#999999"));
    ll_pwd.addView(view2);

   }
   tvList[i] = textView;
  }

이 6 개의 암호 상자 컨트롤 을 이 컨트롤 을 담 은 부모 컨트롤 에 추가 하고 모든 암호 컨트롤 에 분리 컨트롤 이 있 습 니 다.다음 작업 을 할 수 있 도록 모든 암호 입력 컨트롤 을 컨트롤 그룹 에 넣 습 니 다.
그리고 우 리 는 Gridview 를 이용 하여 12 궁 격의 아 날로 그 디지털 키 보드 를 만 들 었 습 니 다.이렇게 아 날로 그 키보드 의 모양 은 다음 과 같 습 니 다. 

원본 코드 는 다음 과 같 아야 합 니 다: 

 /**
  *        
  */
 private void initData() {
  /*               */
  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", "×");
   } else {
    map.put("name", "");
   }
   valueList.add(map);
  }
  gridView.setAdapter(adapter);
  gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
   @Override
   public void onItemClick(AdapterView<?> parent, View view,
     int position, long id) {
    if (position < 11 && position != 9) { //   0~9  
     if (currentIndex >= -1 && currentIndex < 5) { //       ――――       
      tvList[++currentIndex].setText(valueList.get(position)
        .get("name"));
     }
    } else {
     if (position == 11) { //      
      if (currentIndex - 1 >= -1) { //         ――――       
       tvList[currentIndex--].setText("");
      }
     }
    }
   }
  });
 }
  /**
   * GrideView    
   */ 
 BaseAdapter adapter = new BaseAdapter() {
  @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;
  }

  @SuppressWarnings("deprecation")
  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
   ViewHolder viewHolder;
   if (convertView == null) {
    convertView = View.inflate(context, R.layout.item_gride, null);
    viewHolder = new ViewHolder();
    viewHolder.btnKey = (TextView) convertView
      .findViewById(R.id.btn_keys);
    convertView.setTag(viewHolder);
   } else {
    viewHolder = (ViewHolder) convertView.getTag();
   }
   viewHolder.btnKey.setText(valueList.get(position).get("name"));
   if (position == 9||position==11) {
    viewHolder.btnKey.setBackgroundDrawable(Utils.getStateListDrawable(context));
    viewHolder.btnKey.setEnabled(false);
   }
   if (position == 11) {
    viewHolder.btnKey.setBackgroundDrawable(Utils.getStateListDrawable(context));
   }

   return convertView;
  }
 };
 
 
 /**
  *     
  */
 public final class ViewHolder {
  public TextView btnKey;
 } 
              
아 날로 그 키보드 의 데 이 터 를 0-9 와 x 로 불 러 온 다음 이 데 이 터 를 어댑터 를 통 해 이 Gridview 컨트롤 에 채 웁 니 다.이것들 은 모두 오래된 운전 자의 상투적인 방법 이다.관례 에 따 르 면 이 아 날로 그 키 보드 는 화면의 아래쪽 에서 꺼 져 야 합 니 다.제 가 여기 서 하 는 일 은 Gridview 를 popupwindow 에 붙 인 다음 화면의 아래쪽 에서 꺼 내 는 것 입 니 다.해당 코드 는 다음 과 같 습 니 다.

View contentView = LayoutInflater.from(context).inflate(
    R.layout.layout_popupdemo, null);//        
  gridView = (GridView) contentView.findViewById(R.id.gv_keybord);//         
 popupWindow = new PopupWindow(contentView,
    ViewGroup.LayoutParams.MATCH_PARENT,// width

    ViewGroup.LayoutParams.WRAP_CONTENT);// higth
  popupWindow.setFocusable(false);
  popupWindow.setAnimationStyle(R.style.animation);
   //     
  public void show() {
  popupWindow.showAtLocation(rl_bottom, Gravity.BOTTOM, 0, 0); //            
 }
 @Override
 public void onWindowFocusChanged(boolean hasWindowFocus) {
  super.onWindowFocusChanged(hasWindowFocus);
  show();
 }

이 컨트롤 을 불 러 오 자마자 팝 업 됩 니 다. 
마지막 으로 우리 가 해 야 할 일 은 아 날로 그 키 보드 를 감청 하 는 것 입 니 다.이 아 날로 그 키보드 의 입력 을 암호 상자 에 입력 하 는 것 입 니 다.높 은 것 처럼 말 하지만 사실은 Gridview 의 onitemclick 사건 을 감청 하 는 것 입 니 다.해당 코드 는 다음 과 같 습 니 다. 

gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
   @Override
   public void onItemClick(AdapterView<?> parent, View view,
     int position, long id) {
    if (position < 11 && position != 9) { //   0~9  
     if (currentIndex >= -1 && currentIndex < 5) { //       ――――       
      tvList[++currentIndex].setText(valueList.get(position)
        .get("name"));
     }
    } else {
     if (position == 11) { //      
      if (currentIndex - 1 >= -1) { //         ――――       
       tvList[currentIndex--].setText("");
      }
     }
    }
   }
  });

사용자 가 숫자 0-9 를 누 르 면 암호 상자 에 입력 하고 체크 해제 키 를 누 르 면 해당 암호 상자 의 내용 을 삭제 합 니 다.보 셨 습 니까?위 에 사 용 된 텍스트 상자 배열 목록 이 도움 이 되 었 습 니 다.퇴 격 키 클릭 효과 가 남 다 르 기 때문에 코드 를 사용 하여 그의 스타일 을 설정 합 니 다.
사용자 의 마지막 암호 상자 입력 이 완료 되면 입력 이 완 료 된 리 셋 을 진행 합 니 다.해당 코드 는 다음 과 같 습 니 다. 

//       ,  6        
 public void setOnFinishInput(final OnPasswordInputFinish pass) {
  tvList[5].addTextChangedListener(new TextWatcher() {
   @Override
   public void beforeTextChanged(CharSequence s, int start, int count,
     int after) {

   }

   @Override
   public void onTextChanged(CharSequence s, int start, int before,
     int count) {

   }

   @Override
   public void afterTextChanged(Editable s) {
    if (s.toString().length() == 1) {
     strPassword = ""; //         strPassword  ,     ,               
     for (int i = 0; i < 6; i++) {
      strPassword += tvList[i].getText().toString().trim();
     }
     if (pass!=null) {
      pass.inputFinish(); //          ,                    
     }
    }
   }
  });

한바탕 고생 한 후에 큰 성 과 를 거 두 었 고 최종 효 과 는 다음 과 같다.
 
원본 다운로드:http://xiazai.jb51.net/201608/yuanma/Android-MyPayUI(jb51.net).rar
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기