如何编码这种类型的密码屏幕设计,而在输入密码后,圆圈应改变或图像视图应改变..??
登录名.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="@color/light_grey"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enter MPIN"
android:textStyle="bold"
android:textSize="18dp"
android:layout_margin="10dp"
android:layout_gravity="center_horizontal"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center_horizontal"
>
<ImageView
android:id="@+id/imageview_circle1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="6dp"
android:src="@drawable/circle"
/>
<ImageView
android:id="@+id/imageview_circle2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="6dp"
android:src="@drawable/circle"
/>
<ImageView
android:id="@+id/imageview_circle3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="6dp"
android:src="@drawable/circle"
/>
<ImageView
android:id="@+id/imageview_circle4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="6dp"
android:src="@drawable/circle"
/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="@color/light_grey2"
>
<EditText
android:id="@+id/editText_enter_mpin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="number"
android:maxLength="4"
android:visibility="visible" >
</EditText>
</LinearLayout>
</LinearLayout>
</LinearLayout>
登录活动.java
public class LoginActivity extends AppCompatActivity {
private static final String TAG = "LoginActivity";
EditText enter_mpin;
ImageView i1, i2, i3, i4;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_login);
i1 = (ImageView) findViewById(R.id.imageview_circle1);
i2 = (ImageView) findViewById(R.id.imageview_circle2);
i3 = (ImageView) findViewById(R.id.imageview_circle3);
i4 = (ImageView) findViewById(R.id.imageview_circle4);
enter_mpin = (EditText) findViewById(R.id.editText_enter_mpin);
enter_mpin.requestFocus();
enter_mpin.setInputType(InputType.TYPE_CLASS_NUMBER);
enter_mpin.setFocusableInTouchMode(true);
enter_mpin.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) {
Log.d(TAG, "onKey: screen key pressed");
i1.setImageResource(R.drawable.circle2);
}
});
}
}
圆圈.xml
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke
android:width="2dp"
android:color="#6ab17b" />
<size
android:width="25dp"
android:height="25dp" />
</shape>
圆圈2.xml
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#505253"/>
<size
android:width="25dp"
android:height="25dp" />
</shape>
5条答案
按热度按时间pftdvrlh1#
使用LolliPin
z9smfwbn2#
在TextWatcher中使用以下代码:
guykilcj3#
当我在我的项目中添加棒棒糖时,我得到了一些错误。
然后我发现了一些更多的图书馆,也很棒。
看看这些:
请记住,这些都是视图,所以它们更容易定制。快乐编码:)
pvcm50d14#
看看这个JAVA class。如果你需要很多PIN视图,你也可以创建多个对象,每个对象只有一行。例如在注册页面。
pbpqsu0x5#
将**implementation 'com.alimuzaffar.lib:pinentryedittext:1.3.10'**添加到 build.gradle 文件内的依赖项中,并在登录布局中保留以下代码。
#xml #安卓系统