Edittextに画像を追加し、ユーザーが入るたびに別の画像に置き換えます。

私はAndroidが初めてで、次の要件を満たしています。Edittextに画像を追加し、ユーザーが入るたびに別の画像に置き換えます。

これは実現可能であることをお知らせください。

最初のEditText 6個の白丸からなります。ユーザーが最初の桁をクリックすると、下の画像のように円が塗りつぶされます。ユーザーがバックスペースをクリックすると、円は空になります。

任意のリンクまたは実施例やコードサンプルは有用であろう。

2016-10-14 Karlos

本、ツール、ソフトウェアライブラリ、チュートリアル、またはその他のオフサイトリソースを推奨するかどうかを尋ねる質問は、オピニオン回答と迷惑メールを引き付ける傾向があるため、スタックオーバーフローのトピックではありません。代わりに、問題を説明し、それを解決するためにこれまでに何が行われているかを記述します。 –

あなたのコードと正確な問題を投稿してください –

以下は、私の問題を解決したコードです。 @Boogerと@Muthurajからのリンクは私が満たされた（ic_lens_black_24dp）のためのドローアブルを使用

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/pin_content_layout" 
android:orientation="vertical" 
android:layout_width="match_parent" 
android:layout_height="fill_parent" 
android:padding="15dp" 
android:layout_alignParentBottom="true"> 



<LinearLayout 
    android:id="@+id/pin_layout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_marginTop="35dp" 

    android:orientation="horizontal"> 

    <EditText 
     android:id="@+id/pin_first_edittext" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 

     android:background="@drawable/ic_panorama_fish_eye_black_24dp" 
     /> 

    <EditText 
     android:id="@+id/pin_second_edittext" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 

     android:background="@drawable/ic_panorama_fish_eye_black_24dp" 

     /> 

    <EditText 
     android:id="@+id/pin_third_edittext" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 

     android:background="@drawable/ic_panorama_fish_eye_black_24dp" 

     /> 

    <EditText 
     android:id="@+id/pin_forth_edittext" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 

     android:background="@drawable/ic_panorama_fish_eye_black_24dp" 

     /> 

    <EditText 
     android:id="@+id/pin_fifth_edittext" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 

     android:background="@drawable/ic_panorama_fish_eye_black_24dp" 
     /> 

    <EditText 
     android:id="@+id/pin_sixth_edittext" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 

     android:background="@drawable/ic_panorama_fish_eye_black_24dp" 
     /> 
</LinearLayout> 

<EditText 
    android:id="@+id/pin_hidden_edittext" 
    android:layout_width="1dp" 
    android:layout_height="1dp" 
    android:gravity="center_horizontal" 
    android:layout_gravity="center_horizontal" 
    android:background="@null" 
    android:inputType="number|numberPassword" 
    android:maxLength="6" 
    android:textColor="#00000000" 
    /> 


</LinearLayout>

Activity_main.xml

このコード

MainActivity.javaファイル

package com.app.xyz.activity; 

import android.app.Service; 
import android.content.Context; 
import android.graphics.drawable.Drawable; 
import android.os.Build; 
import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 
import android.text.Editable; 
import android.text.TextWatcher; 
import android.util.AttributeSet; 
import android.util.Log; 
import android.view.KeyEvent; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.inputmethod.EditorInfo; 
import android.view.inputmethod.InputMethodManager; 
import android.widget.EditText; 
import android.widget.ImageView; 
import android.widget.LinearLayout; 
import android.widget.TextView; 
import com.app.xyz.R; 

public class MainActivity extends AppCompatActivity implements View.OnFocusChangeListener, View.OnKeyListener, TextWatcher { 

private static final String TAG = "[MainActivity]"; 

TextView tvHello, tv_one, tv_two, tv_three, tv_four, tv_five, tv_six; 

private EditText mPinFirstDigitEditText; 
private EditText mPinSecondDigitEditText; 
private EditText mPinThirdDigitEditText; 
private EditText mPinForthDigitEditText; 
private EditText mPinFifthDigitEditText; 
private EditText mPinSixthDigitEditText; 

private EditText mPinHiddenEditText; 
@Override 
public void afterTextChanged(Editable s) { 
} 

@Override 
public void beforeTextChanged(CharSequence s, int start, int count, int after) { 
} 

/** 
* Hides soft keyboard. 
* 
* @param editText EditText which has focus 
*/ 
public void hideSoftKeyboard(EditText editText) { 
    if (editText == null) 
     return; 

    InputMethodManager imm = (InputMethodManager) getSystemService(Service.INPUT_METHOD_SERVICE); 
    imm.hideSoftInputFromWindow(editText.getWindowToken(), 0); 
} 



@Override 
public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(new MainLayout(this, null)); 

    init(); 

    setPINListeners(); 

} 

/** 
* Initialize EditText fields. 
*/ 
private void init() { 

    tvHello = (TextView) findViewById(R.id.tvHello); 

    tv_one = (TextView) findViewById(R.id.tv_three); 

    tv_two = (TextView) findViewById(R.id.tv_four); 

    tv_three = (TextView) findViewById(R.id.tv_five); 

    tv_four = (TextView) findViewById(R.id.tv_six); 

    tv_five = (TextView) findViewById(R.id.tv_seven); 

    tv_six = (TextView) findViewById(R.id.tv_eight); 





    mPinFirstDigitEditText = (EditText) findViewById(R.id.pin_first_edittext); 
    mPinSecondDigitEditText = (EditText) findViewById(R.id.pin_second_edittext); 
    mPinThirdDigitEditText = (EditText) findViewById(R.id.pin_third_edittext); 
    mPinForthDigitEditText = (EditText) findViewById(R.id.pin_forth_edittext); 
    mPinFifthDigitEditText = (EditText) findViewById(R.id.pin_fifth_edittext); 
    mPinSixthDigitEditText = (EditText) findViewById(R.id.pin_sixth_edittext); 
    mPinHiddenEditText = (EditText) findViewById(R.id.pin_hidden_edittext); 
    getWindow().setSoftInputMode(android.view.WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_VISIBLE); 

    mPinHiddenEditText.requestFocus(); 
    InputMethodManager imm = (InputMethodManager) getSystemService(Service.INPUT_METHOD_SERVICE); 
    imm.showSoftInput(mPinHiddenEditText, InputMethodManager.SHOW_FORCED); 



} 


@Override 
public void onFocusChange(View v, boolean hasFocus) { 
    final int id = v.getId(); 
    switch (id) { 
     case R.id.pin_first_edittext: 
      if (hasFocus) { 
       setFocus(mPinHiddenEditText); 
       showSoftKeyboard(mPinHiddenEditText); 
      } 
      break; 

     case R.id.pin_second_edittext: 
      if (hasFocus) { 
       setFocus(mPinHiddenEditText); 
       showSoftKeyboard(mPinHiddenEditText); 
      } 
      break; 

     case R.id.pin_third_edittext: 
      if (hasFocus) { 
       setFocus(mPinHiddenEditText); 
       showSoftKeyboard(mPinHiddenEditText); 
      } 
      break; 

     case R.id.pin_forth_edittext: 
      if (hasFocus) { 
       setFocus(mPinHiddenEditText); 
       showSoftKeyboard(mPinHiddenEditText); 
      } 
      break; 

     case R.id.pin_fifth_edittext: 
      if (hasFocus) { 
       setFocus(mPinHiddenEditText); 
       showSoftKeyboard(mPinHiddenEditText); 
      } 
      break; 

     case R.id.pin_sixth_edittext: 
      if (hasFocus) { 
       setFocus(mPinHiddenEditText); 
       showSoftKeyboard(mPinHiddenEditText); 
      } 
      break; 

     default: 
      break; 
    } 
} 

@Override 
public boolean onKey(View v, int keyCode, KeyEvent event) { 
    if (event.getAction() == KeyEvent.ACTION_DOWN) { 
     final int id = v.getId(); 

     Log.e(TAG, "======================================"); 

     Log.d(TAG, "mPinHiddenEditText===>"+mPinHiddenEditText.getText()); 
     Log.d(TAG, "mPinHiddenEditText.getText().length()===>"+mPinHiddenEditText.getText().length()); 


     switch (id) { 
      case R.id.pin_hidden_edittext: 
       if (keyCode == KeyEvent.KEYCODE_DEL) { 
        if (mPinHiddenEditText.getText().length() == 6) { 
         mPinSixthDigitEditText.setText(""); 

        } 
        else if (mPinHiddenEditText.getText().length() == 5) { 
         mPinFifthDigitEditText.setText(""); 
        } 
        else if (mPinHiddenEditText.getText().length() == 4) { 
         mPinForthDigitEditText.setText(""); 
        } 
        else if (mPinHiddenEditText.getText().length() == 3) { 
         mPinThirdDigitEditText.setText(""); 
        } 
        else if (mPinHiddenEditText.getText().length() == 2) { 
         mPinSecondDigitEditText.setText(""); 
        } 

        else if (mPinHiddenEditText.getText().length() == 1) { 
         mPinFirstDigitEditText.setText(""); 
        } 


        if (mPinHiddenEditText.length() > 0) 
         mPinHiddenEditText.setText(mPinHiddenEditText.getText().subSequence(0, mPinHiddenEditText.getText().length() - 1)); 

        Log.d(TAG, "hidden====>"+mPinHiddenEditText.getText()); 
        Log.e(TAG, "======================================"); 

        return true; 
       } 

       break; 

      default: 
       return false; 
     } 
    } 

    return false; 
} 

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

    Log.d(TAG, "s.length()===>"+s.length()); 
    Log.d(TAG, "count===>"+count); 
    Log.d(TAG, "s===>"+s.toString()); 

    if (s.length() == 0) { 
     mPinSixthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp); 
     mPinFifthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp); 
     mPinForthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp); 
     mPinThirdDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp); 
     mPinSecondDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp); 
     mPinFirstDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp); 


    } else if (s.length() == 1) { 
     mPinFirstDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp); 

     mPinSixthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp); 
     mPinFifthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp); 
     mPinForthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp); 
     mPinThirdDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp); 
     mPinSecondDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp); 



    } else if (s.length() == 2) { 
     mPinSecondDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp); 
     mPinFirstDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp); 
     mPinSixthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp); 
     mPinFifthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp); 
     mPinForthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp); 
     mPinThirdDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp); 


    } else if (s.length() == 3) { 
     mPinThirdDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp); 
     mPinSecondDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp); 
     mPinFirstDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp); 
     mPinSixthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp); 
     mPinFifthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp); 
     mPinForthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp); 



    } else if (s.length() == 4) { 
     mPinForthDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp); 
     mPinThirdDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp); 
     mPinSecondDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp); 
     mPinFirstDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp); 
     mPinSixthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp); 
     mPinFifthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp); 



    } else if (s.length() == 5) { 
     mPinFifthDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp); 
     mPinForthDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp); 
     mPinThirdDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp); 
     mPinSecondDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp); 
     mPinFirstDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp); 
     mPinSixthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp); 



    } else if (s.length() == 6) { 
     mPinSixthDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp); 
     mPinFifthDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp); 
     mPinForthDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp); 
     mPinThirdDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp); 
     mPinSecondDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp); 
     mPinFirstDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp); 


    } 
} 

/** 
* Sets default PIN background. 
* 
* @param editText edit text to change 
*/ 
private void setDefaultPinBackground(EditText editText) { 
    setViewBackground(editText, getResources().getDrawable(R.drawable.ic_panorama_fish_eye_black_24dp)); 
} 

/** 
* Sets focus on a specific EditText field. 
* 
* @param editText EditText to set focus on 
*/ 
public static void setFocus(EditText editText) { 
    if (editText == null) 
     return; 



    editText.setFocusable(true); 
    editText.setFocusableInTouchMode(true); 
    editText.requestFocus(); 
} 



/** 
* Sets listeners for EditText fields. 
*/ 
private void setPINListeners() { 

    mPinHiddenEditText.addTextChangedListener(this); 

    mPinFirstDigitEditText.setOnFocusChangeListener(this); 
    mPinSecondDigitEditText.setOnFocusChangeListener(this); 
    mPinThirdDigitEditText.setOnFocusChangeListener(this); 
    mPinForthDigitEditText.setOnFocusChangeListener(this); 
    mPinFifthDigitEditText.setOnFocusChangeListener(this); 
    mPinSixthDigitEditText.setOnFocusChangeListener(this); 

    mPinFirstDigitEditText.setOnKeyListener(this); 
    mPinSecondDigitEditText.setOnKeyListener(this); 
    mPinThirdDigitEditText.setOnKeyListener(this); 
    mPinForthDigitEditText.setOnKeyListener(this); 
    mPinFifthDigitEditText.setOnKeyListener(this); 
    mPinSixthDigitEditText.setOnKeyListener(this); 

    mPinHiddenEditText.setOnKeyListener(this); 
} 

/** 
* Sets background of the view. 
* This method varies in implementation depending on Android SDK version. 
* 
* @param view  View to which set background 
* @param background Background to set to view 
*/ 
@SuppressWarnings("deprecation") 
public void setViewBackground(View view, Drawable background) { 
    if (view == null || background == null) 
     return; 

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) { 
     view.setBackground(background); 
    } else { 
     view.setBackgroundDrawable(background); 
    } 
} 

/** 
* Shows soft keyboard. 
* 
* @param editText EditText which has focus 
*/ 
public void showSoftKeyboard(EditText editText) { 
    Log.d(TAG,"showSoftKeyboard"+editText.getText()); 
    if (editText == null) 
     return; 


    InputMethodManager imm = (InputMethodManager) getSystemService(Service.INPUT_METHOD_SERVICE); 
    imm.showSoftInput(editText, InputMethodManager.SHOW_IMPLICIT); 


} 

/** 
* Custom LinearLayout with overridden onMeasure() method 
* for handling software keyboard show and hide events. 
*/ 
public class MainLayout extends LinearLayout { 

    public MainLayout(Context context, AttributeSet attributeSet) { 
     super(context, attributeSet); 
     LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); 
     inflater.inflate(R.layout.activity_main, this); 
    } 

    @Override 
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
     final int proposedHeight = MeasureSpec.getSize(heightMeasureSpec); 
     final int actualHeight = getHeight(); 

     Log.d("TAG", "proposed: " + proposedHeight + ", actual: " + actualHeight); 

     if (actualHeight >= proposedHeight) { 

     } 

     super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
    } 
    } 


}

を構築するために多くのことを助け、空（ic_panorama_fish_eye_black_24dp）のサークル。

出典

2016-10-21 05:44:52 Karlos

これは簡単です。数字ボタンごとにonClickListenerを作成し、入力するドットの数を追跡するだけです。次に、クリックイベントごとに、入力するドットを変更します（明らかに、これらのドットは2つのドロウアブル、1つは塗りつぶされ、もう1つは塗りつぶされず、適切にバックグラウンド描画可能なものに切り替わります）。

要するに、これは非常に簡単なことです。したがって、これを行うライブラリはありません。

https://developer.android.com/reference/android/view/View.OnClickListener.html

出典

2016-10-14 15:07:36 Booger

使用TextWatcher。 onTextChangedで、入力されたテキストの長さを取得し、それに応じて円を色付けします。色を塗りつぶすには、サークルをImageViewの配列に配置して、簡単に操作できるようにします。

出典

2016-10-14 15:43:45 muthuraj

Edittextに画像を追加し、ユーザーが入るたびに別の画像に置き換えます。

答えて

関連する問題