Nach der Verwendung der Android Design Support Library TextInputLayout um eine schwebende Beschriftung über einem zu platzieren EditText Komponente, ich habe mich gefragt, ob es eine Möglichkeit gibt, der Spinner Komponente (nicht unbedingt mit der Design Library).

Damit meine ich so etwas wie a TextView oberhalb platziert Spinner (Offensichtlich keine Animationen wie die TextInputLayout), aber ich möchte die Textgröße, Schriftart und Farbe an die des anpassen TextInputLayoutFloating-Label von.

Zum Beispiel würde es ungefähr so ​​aussehen (siehe die Beschriftungen über der Spinners):

Wie ich bereits erwähnt habe, ist mein Hauptziel, ein Etikett über dem zu haben Spinnergenauso wie in der TextInputLayout – Textgröße, Schriftart, Farbe und Abstände zwischen Beschriftung und Bauteil wären also gleich.

Auf der Google Design-Seite zu Floating-Label-Textfelderngibt es ein Diagramm, das die Abmessungen des Etiketts relativ zur Komponente zeigt, aber es gibt keinen Hinweis auf die Farbe oder Größe des Etiketttexts:

Zusammenfassend frage ich also:

– Wenn es eine spezielle Komponente gibt, um das zu erreichen, was ich verlange, oder eine benutzerdefinierte Ansicht, die ich verwenden kann, welche wäre das und wie kann ich sie verwenden.
– Wenn nicht, wie ist die Textgröße, Farbe und Schriftart des schwebenden Etiketts, damit ich es platzieren kann? TextView über meiner Spinner mit den im obigen Bild gezeigten Layoutabmessungen.

BEARBEITEN:

Von dem Google Design-Richtlinien für Textfelderhat es Folgendes für Floating-Labels:

Hinweis- und Eingabeschrift: Roboto Regular 16sp
Etikettenschrift: Roboto Regular 12sp
Kachelhöhe: 72dp
Text oben und unten auffüllen: 16dp
Textfeld-Trennerfüllung: 8dp

sowie die oben gezeigten Bilder.

Die Floating-Label-Schriftart lautet also: Roboto Regular 12sp. Sie können daher a verwenden TextView um die anzuzeigen Spinner beschriften, da mir kein Brauch bekannt ist Views oder spezielle Komponenten, die Sie verwenden könnten.

Jedoch, nach dem Ausprobieren sieht es nicht ganz so gut aus wie das im Bild gezeigte Beispiel. EIN Die benutzerdefinierte Ansicht ist dafür möglicherweise besser geeignetda es schöner aussehen könnte, aber die obige Lösung ist nur eine Möglichkeit, etwas zu erreichen, das dem entspricht, was ich ursprünglich wollte.

Ich will das Textgröße, Schriftart und Farbe an die des anpassen TextInputLayoutFloating-Label von.

Dies kann einfach ohne externe Bibliotheken erreicht werden. Nach dem Versuch, die zu hacken TextInputLayout und selbst beim Erstellen meiner eigenen benutzerdefinierten Ansicht wurde mir klar, dass die Verwendung einer einfachen TextView benötigt viel weniger Code und ist wahrscheinlich effizienter.

Der Textstil kopiert werden können von dem AppCompat Bibliothek.

Der Style

Aus den Material Design Guidelines erhalten wir folgende Informationen:

• Das Etikett sollte einen unteren Rand von haben 8dp
• Die Beschriftung sollte vertikal am Eingabetext ausgerichtet sein

Folgendes wird in den Richtlinien zum Material nicht erwähnt EditText:

• es hat eine linke Polsterung von 4dp
• Sein Etikett hat eigentlich keinen Abstand von 16dp Darüber bleibt dies dem Schnittstellendesigner überlassen: Dies ist sinnvoll, da Sie es unter einem anderen platzieren EditTextSie benötigen nur eine zusätzliche 8dp Raum

Darüber hinaus enthält die Design Support Library diesen Stil für die Beschriftung eines fokussierten Elements:

<style name="TextAppearance.Design.Hint" parent="TextAppearance.AppCompat.Caption">
    <item name="android:textColor">?attr/colorControlActivated</item>
</style>

Inaktive Elemente einfach verwenden TextAppearance.AppCompat.Caption.

Implementierung

Fügen Sie Folgendes zu Ihrer hinzu dimens.xml Datei:

<dimen name="input_label_vertical_spacing">8dp</dimen>
<dimen name="input_label_horizontal_spacing">4dp</dimen>

Fügen Sie diese dann hinzu styles.xml:

<style name="InputLabel" parent="TextAppearance.AppCompat.Caption">
    <item name="android:paddingBottom">@dimen/input_label_vertical_spacing</item>
    <item name="android:paddingLeft">@dimen/input_label_horizontal_spacing</item>
    <item name="android:paddingRight">@dimen/input_label_horizontal_spacing</item>
</style>

Wenn Sie möchten, dass die Beschriftung immer die hervorgehobene (Akzent-) Farbe hat, ersetzen Sie TextAppearance.AppCompat.Caption mit TextAppearance.Design.Hint aus der Google Design Support Library. Dies wird jedoch wahrscheinlich etwas seltsam aussehen, wenn Sie es auch beschriftet haben EditText Ansichten auf demselben Bildschirm.

Schließlich können Sie a setzen TextView über deinem Spinner (oder ein anderes Element) mit dem angewendeten Stil:

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/category"
    style="@style/InputLabel" />

Ergebnis

Der folgende Screenshot zeigt ein einfaches Beispiel mit zwei normalen TextInputLayout Ansichten, gefolgt von einem Label und a Spinner. Ich habe die zusätzliche nicht angewendet 8dp Abstand, um sie weiter zu trennen, aber dies zeigt Ihnen, dass Größe, Schriftart und Farbe widergespiegelt werden.

Die Elemente innerhalb der Spinner haben eine andere Polsterung, aber ich bevorzuge es, die vertikale Ausrichtung mit allen anderen Beschriftungen beizubehalten, um ein einheitlicheres Aussehen zu erhalten.

Ich habe dies erreicht, indem ich eine AutoCompleteTextView verwendet, die Tastatur deaktiviert und die Optionen bei Berührung angezeigt habe.

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, getResources().getStringArray(R.array.locations));

AutoCompleteTextView mTextView = (AutoCompleteTextView) findViewById(R.id.location);

mTextView.setAdapter(adapter);
mTextView.setKeyListener(null);
mTextView.setOnTouchListener(new View.OnTouchListener(){
    @Override
    public boolean onTouch(View v, MotionEvent event){
        ((AutoCompleteTextView) v).showDropDown();
        return false;
    }
});

Ich habe einen Kern von mir gemacht, um das gleiche Problem zu lösen, das Sie haben.

Hör zu:

https://gist.github.com/rodrigohenriques/77398a81b5d01ac71c3b

Jetzt brauche ich keine Spinner. Sie haben immer noch einen Floating-Label-Effekt mit enthaltenen Animationen.

Ich habe eine Verbindung erstellt View Komponente, die ein Label über dem anzeigt Spinner. Der Text für das Etikett kann über XML oder in Java gesetzt werden.

Die Komponente hat die Hauptmerkmale einer Spinner (nicht alle von ihnen) sowie ähnlich aussehen wie die TextInputLayout Komponente.

Ich habe es a genannt LabelledSpinnerund es ist als Teil meiner verfügbar NützlicheAnsichten Android-Bibliothek auf GitHub unter der Apache 2.0-Lizenz.

Um es zu verwenden, fügen Sie die Bibliotheksabhängigkeit in Ihrer hinzu build.gradle Datei:

compile 'com.satsuware.lib:usefulviews:+'

Beispiele für die Verwendung sind im GitHub-Repository verfügbar (sowohl eine Beispiel-App als auch ein Verwendungsleitfaden).

Sie können dies erreichen:

Mit neuen Materialbibliotheksstilen wie diesen:

<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/fullNameLay"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

    <androidx.appcompat.widget.AppCompatAutoCompleteTextView
            android:id="@+id/fullNameEt"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>

für mehr Informationen:
https://material.io/develop/android/components/menu/

AKTUALISIEREN:
Nicht bearbeitbare Variante: Deaktivieren Sie die Benutzereingabe in der *AutoCompleteTextView* um eine nicht bearbeitbare Variation des Menüs durch Einstellung zu haben android:inputType="none" auf der AutoCompleteTextView.

Ich habe Rodrigos Lösung so modifiziert, dass sie einen Adapter verwendet, dh eher wie ein Standard-Spinner
https://gist.github.com/smithaaron/d2acd57937d7a4201a79

Ich habe eine alternative Lösung, die das Verhalten von TextInputLayout und ein benutzerdefiniertes DialogFragment (AlertDialog) verwendet, um ein Spinner-Dialog-Popup zu emulieren.

layout.xml:

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:id="@+id/your_et"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/your_label"
        android:maxLines="1"
        android:inputType="textNoSuggestions"
        android:textAppearance="@style/TextAppearance.AppCompat.Medium"
        android:focusable="false"
        style="@style/Base.Widget.AppCompat.Spinner.Underlined"/>
</android.support.design.widget.TextInputLayout>

Benutzerdefinierten Spinner über DialogFragment erstellen (AlertDialog)

SpinnerFragment.java:

public class SpinnerFragment extends DialogFragment {

private static final String TITLEID = "titleId";
private static final String LISTID = "listId";
private static final String EDITTEXTID = "editTextId";

public static SpinnerFragment newInstance(int titleId, int listId, int editTextId) {
    Bundle bundle = new Bundle();
    bundle.putInt(TITLEID, titleId);
    bundle.putInt(LISTID, listId);
    bundle.putInt(EDITTEXTID, editTextId);
    SpinnerFragment spinnerFragment = new SpinnerFragment();
    spinnerFragment.setArguments(bundle);

    return spinnerFragment;
}

@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
    final int titleId = getArguments().getInt(TITLEID);
    final int listId = getArguments().getInt(LISTID);
    final int editTextId = getArguments().getInt(EDITTEXTID);
    AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());

    try {
        final String[] items = getResources().getStringArray(listId);

        builder.setTitle(titleId)
                .setItems(listId, new DialogInterface.OnClickListener() {
                    public void onClick(DialogInterface dialog, int pos) {
                        EditText et = (EditText) getActivity().findViewById(editTextId);
                        String selectedText = items[pos];
                        if (!TextUtils.isEmpty(selectedText)) {
                            et.setText(selectedText);
                        } else {
                            et.getText().clear();
                        }
                    }
                });

    } catch (NullPointerException e) {
        Log.e(getClass().toString(), "Failed to select option in " + getActivity().toString() + " as there are no references for passed in resource Ids in Bundle", e);
        Toast.makeText(getActivity(), getString(R.string.error_failed_to_select), Toast.LENGTH_LONG).show();
    }

    return builder.create();
}

}

Aktivität.java:

private void addCustomSpinner() {
    EditText yourEt = (EditText) findViewById(R.id.your_et);
    yourEt.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            showCustomSpinnerDialog(view);
        }
    });
}

private void showCustomSpinnerDialog(View v) {
    int titleId = R.string.your_label;
    int listId = R.array.spinner_selections;
    int editTextId = R.id.your_et;
    SpinnerFragment spinnerFragment = SpinnerFragment.newInstance(titleId, listId, editTextId);
    spinnerFragment.show(getFragmentManager(), "customSpinner");
}

Ergebnis

Wenn Sie auf das TextInputLayout im Spinner-Stil klicken, wird ein Warndialog mit Ihrer Auswahlliste ausgelöst. Sobald eine Auswahl getroffen wurde, wird der EditText mit Ihrer Auswahl gefüllt und das Etikett schwebt so, wie Sie es möchten.