Nachdem ich die Android Design Support Library verwendet hatte TextInputLayout, um ein schwebendes Etikett über einer EditTextKomponente zu platzieren, fragte ich mich, ob es eine Möglichkeit gibt, der SpinnerKomponente ein schwebendes Etikett hinzuzufügen (nicht unbedingt mithilfe der Design Library).

Damit meine ich so etwas wie ein TextViewüber dem platziertes Spinner(offensichtlich keine Animationen wie das TextInputLayout), aber ich möchte, dass die Textgröße, Schriftart und Farbe mit der des TextInputLayoutschwebenden Etiketts des ' übereinstimmen .

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

Wie ich bereits erwähnt habe, ist es mein Hauptziel, eine Beschriftung über der Beschriftung zu haben Spinner, genau wie in der TextInputLayout- also wären Textgröße, Schriftart, Farbe und Abstände zwischen der Beschriftung und der Komponente gleich.

Auf der Google Design-Seite zu schwebenden Etikettentextfeldern gibt es ein Diagramm, in dem die Abmessungen des Etiketts relativ zur Komponente angezeigt werden. Es gibt jedoch keinen Hinweis auf die Farbe oder Größe des Etikettentextes:

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 groß ist die Größe, Farbe und Schriftart des schwebenden Etikettentextes, damit ich mit den im obigen Bild gezeigten Layoutabmessungen eine TextViewüber meiner platzieren Spinnerkann.

BEARBEITEN:

Aus den Google Design-Richtlinien für Textfelder geht hervor , dass für schwebende Beschriftungen Folgendes gilt:

Hinweis und Eingabeschrift: Roboto Regular 16sp Beschriftungsschrift
: Roboto Regular 12sp Fliesenhöhe
: 72dp
Text oben und unten Textauffüllung: 16dp
Textfeldteilerauffüllung: 8dp

sowie die oben gezeigten Bilder.

Die Floating-Label-Schriftart lautet also: Roboto Regular 12sp . Sie können daher ein verwenden TextView, um das SpinnerEtikett anzuzeigen, da mir keine benutzerdefinierten Viewoder speziellen Komponenten bekannt sind, die Sie verwenden könnten.

Jedoch , es nach dem Versuch aus, ist es nicht ganz wie das Beispiel so gut aussieht in der Abbildung dargestellt. Eine benutzerdefinierte Ansicht mag dafür besser sein , da sie besser 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 möchte, dass Textgröße, Schriftart und Farbe mit der des TextInputLayoutschwebenden Etiketts übereinstimmen .

Dies kann leicht ohne externe Bibliotheken erreicht werden. Nachdem TextInputLayoutich versucht hatte, die zu hacken und sogar meine eigene Ansicht zu TextViewerstellen , stellte ich fest, dass die Verwendung eines einfachen Codes viel weniger Code erfordert und wahrscheinlich effizienter ist.

Der Textstil kann aus der AppCompatBibliothek kopiert werden .

Der Style

Aus den Richtlinien für das Materialdesign erhalten wir die folgenden Informationen:

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

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

• es hat eine linke Polsterung von 4dp
• Das Etikett hat tatsächlich keinen Abstand 16dpdarüber. Dies bleibt dem Interface-Designer überlassen. Dies ist sinnvoll, da EditTextSie nur zusätzlichen 8dpPlatz benötigen, wenn Sie es unter einem anderen platzieren

Darüber hinaus enthält die Design Support Library diesen Stil für die Bezeichnung 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 Ihrer dimens.xmlDatei Folgendes hinzu :

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

Dann füge dies hinzu zu 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 das Etikett immer die hervorgehobene (Akzent-) Farbe haben soll, ersetzen Sie es TextAppearance.AppCompat.Captiondurch TextAppearance.Design.Hintaus der Google Design Support Library. Dies wird jedoch wahrscheinlich etwas seltsam aussehen, wenn Sie auch EditTextAnsichten auf demselben Bildschirm beschriftet haben .

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

<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 TextInputLayoutAnsichten, gefolgt von einer Beschriftung und einem Spinner. Ich habe den zusätzlichen 8dpAbstand nicht angewendet, um sie weiter zu trennen, aber dies zeigt Ihnen, dass Größe, Schriftart und Farbe wiedergegeben werden.

Die Elemente im Inneren Spinnerhaben eine andere Polsterung, ich bevorzuge jedoch die vertikale Ausrichtung mit allen anderen Etiketten, um ein einheitlicheres Aussehen zu erhalten.

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 mehr. Sie haben weiterhin einen schwebenden Beschriftungseffekt mit enthaltenen Animationen.

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 eine zusammengesetzte ViewKomponente erstellt, die eine Beschriftung über dem anzeigt Spinner. Der Text für das Etikett kann mithilfe von XML oder Java festgelegt werden.

Die Komponente hat die Hauptmerkmale von a Spinner( nicht alle ) und sieht der TextInputLayoutKomponente ähnlich .

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

Um es zu verwenden, fügen Sie die Bibliotheksabhängigkeit in Ihre build.gradleDatei ein:

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

Beispiele für die Verwendung finden Sie im GitHub-Repository (sowohl eine Beispiel-App als auch eine Verwendungsanleitung).

Ich habe Rodrigos Lösung so modifiziert, dass sie einen Adapter verwendet, dh eher einen 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 Popup-Fenster für den Drehfelddialog 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>

Erstellen Sie einen benutzerdefinierten Spinner über DialogFragment (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();
}

}}

Activity.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 Warndialogfeld mit Ihrer Auswahlliste ausgelöst. Sobald eine Auswahl ausgewählt wurde, wird der EditText mit Ihrer Auswahl gefüllt und die Beschriftung schwebt wie gewünscht.

Hier ist mein Trick,

Das Gute ist, dass alles so funktioniert, wie Sie es wollen.

Das Schlimme ist jedoch, dass die Layouthierarchie zunimmt und Sie mit der Funktionalität im Code umgehen müssen. Dies ist eine hässliche Lösung:

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.TextInputLayout
            android:id="@+id/til"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <EditText
                android:id="@+id/edt"
                android:layout_width="match_parent"
                android:layout_height="@dimen/edt_height"
                android:hint="@string/create_gcc_visa_txt_step" />

        </android.support.design.widget.TextInputLayout>

        <Spinner
            android:id="@+id/spn"
            style="@style/MyAppTheme.Base.Spinner"
            android:layout_height="@dimen/edt_height"
            android:layout_alignBottom="@id/til" />

    </RelativeLayout>

und Adapter für Spinner überschreiben, um ausgewählte Werte transparent zu machen

public class MySpinnerAdapter extends SimpleAdapter {
    Context mContext;

    public MySpinnerAdapter(Context context, List<String> data, int resource, String[] from, int[] to) {
        super(context, data, resource, from, to);
        mContext = context;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        convertView = super.getView(position, convertView, parent);

        TextView tv = (TextView) convertView.findViewById(android.R.id.text1);
            tv.setTextColor(ContextCompat.getColor(mContext, R.color.transparent));
        return convertView;
    }
}

und nachdem Sie im Drehfeld ausgewählt haben, holen Sie sich einfach den ausgewählten Text und setzen Sie ihn auf EditText. Dies hat den gleichen Effekt wie die Animation

yourSpinnerView.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
        @Override
        public void onItemSelected(AdapterView<String> adapterView, View view, int i, long l) {
            //get your selected text from adapter or from where you want 
            String selectedText = adapterView.getItemAtPosition(i));

            if (i != 0) { 
                edt.setText(selectedText);
            } else { 
                // if in case your spinner have first empty text, 
                // then when spinner selected, just empty EditText.
                edt.setText("");
            }
        }

        @Override
        public void onNothingSelected(AdapterView<?> adapterView) {

        }
    });

Wenn Sie Fragen haben, fragen Sie mich

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 weitere Informationen: https://material.io/develop/android/components/menu/

Hier ist eine Bibliothek, die ich für den Floating Label Spinner rey5137 Material Library verwende

Zum späteren Nachschlagen finden Sie hier eine Liste einiger großartiger Bibliotheken. UI-Bibliotheken Kernbibliotheken

SpinnerCustom.java

package com.pozitron.tfkb.customviews;

import android.content.Context;
import android.content.res.TypedArray;
import android.support.annotation.Nullable;
import android.text.SpannableString;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.LinearLayout;

import com.pozitron.commons.customviews.TextViewFont;
import com.pozitron.tfkb.R;

import butterknife.BindView;
import butterknife.ButterKnife;

/**
 * Created by so12607 on 31/01/2018.
 */

public class SpinnerCustom extends LinearLayout {

    @BindView(R.id.layoutSpinnerCustomLabel)
    TextViewFont layoutSpinnerCustomLabel;

    @BindView(R.id.layoutSpinnerCustomSpinner)
    TextViewFont layoutSpinnerCustomSpinner;

    @BindView(R.id.layoutSpinner)
    LinearLayout layoutSpinner;

    private View v;

    public SpinnerCustom(Context context) {
        this(context, null);
    }

    public SpinnerCustom(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);

    }

    public SpinnerCustom(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        v = LayoutInflater.from(context).inflate(R.layout.layout_spinner_custom, this, true);
        ButterKnife.bind(this);

        if (!isInEditMode()) {

            TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.SpinnerCustom, 0, 0);
            final String label = array.getString(R.styleable.SpinnerCustom_label);
            final boolean enable = array.getBoolean(R.styleable.SpinnerCustom_enabled, true);
            layoutSpinnerCustomLabel.setText(label);

            layoutSpinnerCustomLabel.setEnabled(enable);
            layoutSpinnerCustomSpinner.setEnabled(enable);
            layoutSpinner.setEnabled(enable);
            layoutSpinner.setClickable(enable);
            v.setEnabled(enable);
            v.setClickable(enable);
            array.recycle();
        }
    }

    public void setText(String text) {
        layoutSpinnerCustomSpinner.setText(text);
    }

    public void setText(SpannableString text) {
        layoutSpinnerCustomSpinner.setText(text);
    }

    public void setText(CharSequence text) {
        layoutSpinnerCustomSpinner.setText(text);
    }

    public void setLabel(String text) {
        layoutSpinnerCustomLabel.setText(text);
    }

    public void setError(SpannableString text) {
        layoutSpinnerCustomSpinner.setError(text);
    }

    public void setEnabled(boolean enable) {
        layoutSpinnerCustomLabel.setEnabled(enable);
        layoutSpinnerCustomSpinner.setEnabled(enable);
        layoutSpinner.setEnabled(!enable);
        layoutSpinner.setClickable(!enable);
    }
}

layout_spinner_custom.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:id="@+id/layoutSpinner"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <com.pozitron.commons.customviews.TextViewFont
        android:id="@+id/layoutSpinnerCustomLabel"
        style="@style/TextLabel"
        tools:text="label" />

    <com.pozitron.commons.customviews.TextViewFont
        android:id="@+id/layoutSpinnerCustomSpinner"
        style="@style/SpinnerText"
        android:clickable="false" />

</LinearLayout>

style.xml

<style name="TextLabel" parent="android:Widget.TextView">
    <item name="font">@integer/font_GTEestiDisplay_Regular</item>
    <item name="android:layout_width">match_parent</item>
    <item name="android:textSize">14sp</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:gravity">bottom</item>
    <item name="android:textColor">@color/greyLabel</item>
</style>

<style name="SpinnerText" parent="EditText">
    <item name="font">@integer/font_GTEestiDisplay_Medium</item>
    <item name="android:gravity">bottom</item>
    <item name="android:textSize">17sp</item>
    <item name="android:minHeight">35dp</item>
    <item name="android:focusable">false</item>
    <item name="android:background">@drawable/spinner_selector</item>
    <item name="android:text">@string/select</item>
    <item name="android:textColor">@color/selector_spinner_text</item>
</style>