webentwicklung-frage-antwort-db.com.de

Wie programmiere ich TextInputLayout mit OutlineBox?

Ich möchte TextInputLayout mit dem Widget.MaterialComponents.TextInputLayout.OutlinedBox-Stil erstellen. Ich habe viele Möglichkeiten ausprobiert, konnte aber nicht das gewünschte Ergebnis erzielen. Hier ist mein Code.

TextInputLayout textInputLayout = new TextInputLayout(getActivity(),null,R.style.Widget_MaterialComponents_TextInputLayout_OutlinedBox);
textInputLayout.setHint("My Hint");
TextInputEditText editText = new TextInputEditText(textInputLayout.getContext());
textInputLayout.addView(editText);
parentView.addView(textInputLayout);

Ich habe auch versucht:

TextInputLayout textInputLayout = new TextInputLayout(getActivity(),null,TextInputLayout.BOX_BACKGROUND_OUTLINE);

Ich möchte eine Ansicht wie diese erstellen .  enter image description here

7
Deepak Vajpayee

[~ # ~] Update [~ # ~]

Vielen Dank an @Mike M.

Sie müssen die Methode TextInputLayout.setBoxBackgroundMode() verwenden, um den OutlineBox-Stil zu verwenden

setBoxBackgroundMode (int boxBackgroundMode)

  • Stellen Sie den Modus für den Hintergrund der Box ein (gefüllt, Kontur oder keine).

Dann müssen Sie TextInputLayout.BOX_BACKGROUND_OUTLINE) Konstanten verwenden

HINWEIS: Um die Ecke in Ihrer OutlineBox von TextInputLayout zu erhalten, müssen Sie setBoxCornerRadii() Methode

MUSTERCODE

public class MainActivity extends AppCompatActivity {

    LinearLayout parentView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        parentView = findViewById(R.id.parentView);

        TextInputLayout emailTextInputLayout = new TextInputLayout(this, null, R.style.Widget_MaterialComponents_TextInputLayout_OutlinedBox);

        emailTextInputLayout.setHint("Please Enter Email Address");
        emailTextInputLayout.setBoxBackgroundMode(TextInputLayout.BOX_BACKGROUND_OUTLINE);
        emailTextInputLayout.setBoxCornerRadii(5, 5, 5, 5);
        TextInputEditText edtEmail = new TextInputEditText(emailTextInputLayout.getContext());
        emailTextInputLayout.addView(edtEmail);

        parentView.addView(emailTextInputLayout);


        TextInputLayout passTextInputLayout = new TextInputLayout(this, null, R.style.Widget_MaterialComponents_TextInputLayout_OutlinedBox);

        passTextInputLayout.setHint("Please Enter Password");
        passTextInputLayout.setBoxBackgroundMode(TextInputLayout.BOX_BACKGROUND_OUTLINE);
        passTextInputLayout.setBoxCornerRadii(5, 5, 5, 5);
        TextInputEditText edtPass = new TextInputEditText(passTextInputLayout.getContext());
        passTextInputLayout.addView(edtPass);

        parentView.addView(passTextInputLayout);


    }

}

[~ # ~] Ausgabe [~ # ~]

enter image description here

Basierend auf dieser Antwort: https://stackoverflow.com/questions/3246447/how-to-set-the-style-attribute-programmatically-in-Android

  • Dynamische Stiländerungen werden derzeit nicht unterstützt. Sie müssen den Stil festlegen, bevor die Ansicht erstellt wird (in XML).

Dies ist der Grund, warum TextInputLayout das Festlegen des Umrissrahmenstils nicht programmgesteuert akzeptiert.

Hier ist die einfache Lösung:

Sie können LayoutInflater verwenden

  • Instanziiert eine Layout XML -Datei in die entsprechenden View -Objekte.

[~ # ~] Demo [~ # ~]

Erstellen Sie ein neues Layout

<?xml version="1.0" encoding="utf-8"?>
<Android.support.design.widget.TextInputLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:id="@+id/userIDTextInputLayout"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_margin="10dp">

    <Android.support.design.widget.TextInputEditText
        Android:id="@+id/userIDTextInputEditText"
        Android:layout_width="match_parent"
        Android:hint="Enter User Name"
        Android:layout_height="wrap_content" />
</Android.support.design.widget.TextInputLayout>

AndroidX (+ Material Components for Android ):

<?xml version="1.0" encoding="utf-8"?>
<com.google.Android.material.textfield.TextInputLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:id="@+id/userIDTextInputLayout"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_margin="10dp">

    <com.google.Android.material.textfield.TextInputEditText 
        Android:id="@+id/userIDTextInputEditText"
        Android:layout_width="match_parent"
        Android:hint="Enter User Name"
        Android:layout_height="wrap_content" />
</com.google.Android.material.textfield.TextInputLayout>

Fügen Sie nun mit LayoutInflater das TextInputLayout in Ihr gewünschtes Layout ein

public class MainActivity extends AppCompatActivity {

    LinearLayout rootView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        rootView = findViewById(R.id.rootView);

        View view = LayoutInflater.from(this).inflate(R.layout.temp_layout, null);
        TextInputLayout userNameIDTextInputLayout=view.findViewById(R.id.userIDTextInputLayout);
        TextInputEditText userNameInputEditText = view.findViewById(R.id.userIDTextInputEditText);
        userNameIDTextInputLayout.setHint("Please Enter User Name");
        rootView.addView(view);
    }
}

[~ # ~] Ausgabe [~ # ~]

Screenshot of app with an outlined text input

Hinweis

Wenn Sie ein TextInputLayout aus XML hinzufügen möchten, lesen Sie bitte die folgende Antwort:

Wenn Sie programmgesteuert mehr als 5 TextInputLayouts hinzufügen möchten, sollten Sie die Verwendung eines RecyclerView in Betracht ziehen. Überprüfen Sie die folgenden Antworten:

Hoffe das hilft!

14
Nilesh Rathod

Sie können die für die Klasse applyStyle definierte Methode Theme verwenden. In Kotlin können Sie mit der theme -Eigenschaft auf eine Context- (oder Unterklassen-) Instanz zugreifen.

Mit der Funktion applyStyle können Sie dem aktuellen Design einen Stil hinzufügen, der die Stilattribute definiert. Nach dem Aufruf dieser Methode können Sie das Attribut als dritten Parameter einer View wie TextInputLayout übergeben, der die gewünschten Stile unter Berücksichtigung des Designs anwendet.

Ich habe diese Technik in Splitties (einer von mir verfassten Bibliothek) verwendet, und es gibt einige Dokumentation sowie Beispiele, die Ihnen helfen sollten: https://github.com/LouisCAD/Splitties/blob/v3.0.0-alpha02/views-dsl /README.md#using-styles-defined-in-xml

Ich habe bisher noch keine erstklassige Unterstützung für Themes aus Materialkomponenten in Splitties Views DSL hinzugefügt, aber Sie können es selbst tun, und Sie können sogar ein Thema eröffnen, um es zu diskutieren, oder einen Beitrag leisten, damit es schneller integriert wird.

1
Louis CAD