J'essaie de créer un TextInputLayout
personnalisé. Comment puis-je créer ci-dessous TextInputLayout
personnalisé?
Vous devez utiliser le style Material Design pour Outline Box. Utilisation simple:
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
dans TextInputLayout
. Voir le champ de texte pour Android in Material Design Guide
Voici une solution de contournement:
1. Concevez votre structure
layout
comme ci-dessous:
activity_test.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:orientation="vertical"
Android:padding="16dp"
Android:background="@Android:color/white">
<!-- Username -->
<RelativeLayout
Android:layout_width="match_parent"
Android:layout_height="wrap_content">
<View
Android:layout_width="match_parent"
Android:layout_height="52dp"
Android:layout_marginTop="10dp"
Android:background="@drawable/bg_rounded_input_field" />
<TextView
Android:id="@+id/text_dummy_hint_username"
Android:layout_width="wrap_content"
Android:layout_height="2dp"
Android:layout_marginTop="10dp"
Android:layout_marginLeft="16dp"
Android:paddingLeft="4dp"
Android:paddingRight="4dp"
Android:text="Username"
Android:textSize="16sp"
Android:background="@Android:color/white"
Android:visibility="invisible"/>
<Android.support.design.widget.TextInputLayout
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:layout_marginLeft="16dp"
Android:layout_marginRight="16dp"
Android:hint="Username"
Android:textColorHint="@Android:color/black"
app:hintTextAppearance="@style/HintTextStyle">
<EditText
Android:id="@+id/edit_username"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:inputType="text|textCapWords"
Android:maxLines="1"
Android:backgroundTint="@Android:color/transparent"/>
</Android.support.design.widget.TextInputLayout>
</RelativeLayout>
<!-- Password -->
<RelativeLayout
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:layout_marginTop="8dp">
<View
Android:layout_width="match_parent"
Android:layout_height="52dp"
Android:layout_marginTop="10dp"
Android:background="@drawable/bg_rounded_input_field" />
<TextView
Android:id="@+id/text_dummy_hint_password"
Android:layout_width="wrap_content"
Android:layout_height="2dp"
Android:layout_marginTop="10dp"
Android:layout_marginLeft="16dp"
Android:paddingLeft="4dp"
Android:paddingRight="4dp"
Android:text="Password"
Android:textSize="16sp"
Android:background="@Android:color/white"
Android:visibility="invisible"/>
<Android.support.design.widget.TextInputLayout
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:layout_marginLeft="16dp"
Android:layout_marginRight="16dp"
Android:hint="Password"
Android:textColorHint="@Android:color/black"
app:hintTextAppearance="@style/HintTextStyle">
<EditText
Android:id="@+id/edit_password"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:inputType="textPassword"
Android:maxLines="1"
Android:backgroundTint="@Android:color/transparent"/>
</Android.support.design.widget.TextInputLayout>
</RelativeLayout>
</LinearLayout>
2. Utilisez ci-dessous le dessin
bg_rounded_input_field.xml
pour les coins arrondis.
res/drawable/bg_rounded_input_field.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:shape="rectangle" >
<stroke
Android:color="@Android:color/black"
Android:width="2dp">
</stroke>
<corners
Android:radius="8dp">
</corners>
</shape>
3. Utilisez ci-dessous
HintTextStyle
àTextInputLayout
en ajoutant l'attributapp:hintTextAppearance="@style/HintTextStyle"
.
res/values / styles.xml
<style name="HintTextStyle" parent="TextAppearance.Design.Hint">
<item name="Android:textSize">16sp</item>
</style>
4. Enfin, dans votre
Activity
justeshow/hide
Affichagetext_dummy_hint_username
ettext_dummy_hint_password
pendantfocus
modification.Pour info, j'ai utilisé
Handler
avec du retard100 millis
pour afficher les conseils facticesTextView
à synchroniser avecTextInputLayout
le texte du conseilanimation
.
TestActivity.Java
import Android.os.Handler;
import Android.support.v7.app.AppCompatActivity;
import Android.os.Bundle;
import Android.view.View;
import Android.widget.EditText;
import Android.widget.TextView;
public class TestActivity extends AppCompatActivity {
TextView textDummyHintUsername;
TextView textDummyHintPassword;
EditText editUsername;
EditText editPassword;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_test);
textDummyHintUsername = (TextView) findViewById(R.id.text_dummy_hint_username);
textDummyHintPassword = (TextView) findViewById(R.id.text_dummy_hint_password);
editUsername = (EditText) findViewById(R.id.edit_username);
editPassword = (EditText) findViewById(R.id.edit_password);
// Username
editUsername.setOnFocusChangeListener(new View.OnFocusChangeListener() {
@Override
public void onFocusChange(View v, boolean hasFocus) {
if (hasFocus) {
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
// Show white background behind floating label
textDummyHintUsername.setVisibility(View.VISIBLE);
}
}, 100);
} else {
// Required to show/hide white background behind floating label during focus change
if (editUsername.getText().length() > 0)
textDummyHintUsername.setVisibility(View.VISIBLE);
else
textDummyHintUsername.setVisibility(View.INVISIBLE);
}
}
});
// Password
editPassword.setOnFocusChangeListener(new View.OnFocusChangeListener() {
@Override
public void onFocusChange(View v, boolean hasFocus) {
if (hasFocus) {
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
// Show white background behind floating label
textDummyHintPassword.setVisibility(View.VISIBLE);
}
}, 100);
} else {
// Required to show/hide white background behind floating label during focus change
if (editPassword.getText().length() > 0)
textDummyHintPassword.setVisibility(View.VISIBLE);
else
textDummyHintPassword.setVisibility(View.INVISIBLE);
}
}
});
}
}
SORTIE:
J'espère que cela vous aidera ~