Setelah menggunakan Pustaka Dukungan Desain Android TextInputLayoutuntuk menempatkan label mengambang di atas EditTextkomponen, saya bertanya-tanya apakah ada cara untuk menambahkan label mengambang ke Spinnerkomponen (tidak harus menggunakan Pustaka Desain).

Dengan ini, maksud saya sesuatu seperti TextViewditempatkan di atas Spinner(jelas tidak ada animasi seperti itu TextInputLayout), tapi saya ingin ukuran teks, font dan warna cocok dengan TextInputLayoutlabel mengambang itu .

Misalnya, akan terlihat seperti ini (lihat label di atas Spinner):

Seperti yang saya sebutkan sebelumnya, tujuan utama saya adalah memiliki label di atas Spinner, seperti pada TextInputLayout- sehingga ukuran teks, font, warna, dan jarak antara label dan komponen akan sama.

Pada halaman Google Design tentang bidang teks label mengambang , terdapat diagram yang menunjukkan dimensi label relatif terhadap komponen, tetapi tidak ada indikasi warna atau ukuran teks label:

Jadi, untuk meringkas, saya bertanya:
- Jika ada komponen khusus untuk mencapai apa yang saya minta atau tampilan kustom yang dapat saya gunakan, apakah itu, dan bagaimana saya bisa menggunakannya.
- Jika tidak, berapa ukuran teks floating label, warna dan fontnya, sehingga saya dapat menempatkan di TextViewatas my Spinnerdengan dimensi tata letak yang ditunjukkan pada gambar di atas.

EDIT:

Dari pedoman Desain Google untuk bidang teks , ini memiliki yang berikut untuk label mengambang:

Font petunjuk dan masukan: Roboto Reguler 16sp
Font label: Roboto Reguler 12sp
Tinggi ubin: 72dp Padding
teks atas dan bawah: 16dp
Padding pembagi bidang teks: 8dp

serta gambar yang ditunjukkan di atas.

Jadi font label mengambang adalah: Roboto Regular 12sp . Oleh karena itu, Anda dapat menggunakan a TextViewuntuk menampilkan Spinnerlabel karena saya tidak tahu ada Viewkomponen khusus atau khusus yang dapat Anda gunakan.

Namun , setelah mencobanya, tidak terlihat sebagus contoh yang ditunjukkan pada gambar. Tampilan kustom mungkin lebih baik untuk ini , karena mungkin terlihat lebih bagus, tetapi solusi di atas hanyalah salah satu cara untuk mencapai sesuatu yang mendekati apa yang awalnya saya inginkan.

Saya ingin ukuran teks, jenis huruf dan warna sesuai dengan TextInputLayoutlabel mengambang .

Ini dapat dicapai dengan mudah tanpa pustaka eksternal. Setelah mencoba meretas TextInputLayoutdan bahkan membuat tampilan khusus saya sendiri, saya menyadari bahwa menggunakan TextViewkode sederhana membutuhkan lebih sedikit kode dan mungkin lebih efisien.

Gaya teks dapat disalin dari AppCompatperpustakaan.

Gaya

Dari pedoman Desain Material kami mendapatkan informasi berikut:

• label harus memiliki margin bawah 8dp
• label harus sejajar vertikal dengan teks masukan

Inilah yang tidak disebutkan oleh pedoman tentang Materi EditText:

• itu memiliki bantalan kiri 4dp
• labelnya sebenarnya tidak memiliki spasi 16dpdi atasnya, ini diserahkan kepada perancang antarmuka: ini masuk akal karena jika Anda meletakkannya di bawah yang lain EditText, Anda hanya akan membutuhkan tambahan 8dpruang

Selain itu, Pustaka Dukungan Desain berisi gaya ini untuk label elemen fokus:

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

Elemen tidak aktif cukup gunakan TextAppearance.AppCompat.Caption.

Penerapan

Tambahkan berikut ini ke dimens.xmlfile Anda :

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

Kemudian tambahkan ini ke 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>

Jika Anda ingin label selalu memiliki warna yang disorot (aksen), ganti TextAppearance.AppCompat.Captiondengan TextAppearance.Design.Hintdari Pustaka Dukungan Desain Google. Namun, ini mungkin akan terlihat agak aneh jika Anda juga memiliki EditTexttampilan berlabel pada layar yang sama.

Terakhir, Anda dapat meletakkan di TextViewatas Spinner(atau elemen lainnya) dengan gaya yang diterapkan:

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

Hasil

Tangkapan layar berikut menunjukkan contoh sederhana dengan dua TextInputLayouttampilan normal diikuti oleh label dan Spinner. Saya tidak menerapkan 8dpspasi tambahan untuk memisahkannya lebih jauh, tetapi ini menunjukkan kepada Anda bahwa ukuran, font, dan warna tercermin.

Elemen-elemen di dalam Spinnermemiliki padding yang berbeda, namun saya lebih suka menjaga kesejajaran vertikal dengan semua label lain untuk mendapatkan tampilan yang lebih seragam.

Saya mencapai ini dengan menggunakan AutoCompleteTextView, menonaktifkan keyboard dan menampilkan opsi saat disentuh.

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;
    }
});

Saya memiliki inti yang dibuat sendiri untuk memecahkan masalah yang sama yang Anda miliki.

Coba lihat:

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

Sekarang saya tidak membutuhkan pemintal. Anda masih akan memiliki efek label mengambang dengan animasi yang disertakan.

Saya telah membuat Viewkomponen gabungan yang menampilkan label di atas Spinner. Teks untuk label bisa disetel menggunakan XML atau di Java.

Komponen memiliki fitur utama Spinner( tidak semuanya ) serta terlihat mirip dengan TextInputLayoutkomponen.

Saya telah menamakannya a LabelledSpinner, dan ini tersedia sebagai bagian dari pustaka Android UsefulViews saya di GitHub di bawah Lisensi Apache 2.0 .

Untuk menggunakannya, tambahkan dependensi library di build.gradlefile Anda :

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

Contoh penggunaannya tersedia di repositori GitHub (baik aplikasi sampel, dan panduan penggunaan).

Anda dapat mencapai ini:

Dengan gaya pustaka Material baru seperti ini:

<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>

untuk informasi lebih lanjut: https://material.io/develop/android/components/menu/

Saya memodifikasi solusi Rodrigo untuk menggunakan adaptor, yaitu lebih seperti Spinner standar https://gist.github.com/smithaaron/d2acd57937d7a4201a79

Saya memiliki solusi alternatif yang menggunakan perilaku TextInputLayout dan DialogFragment kustom (AlertDialog) untuk meniru popup dialog spinner.

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>

Buat Spinner Kustom melalui 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");
}

Hasil

Saat Anda mengklik TextInputLayout bergaya spinner, ini akan memicu dialog peringatan yang berisi daftar pilihan Anda. Setelah pilihan dipilih, EditText akan diisi dengan pilihan Anda dan label akan mengambang seperti yang Anda inginkan.

Ini trik saya,

hal baiknya adalah semuanya akan bekerja seperti yang Anda inginkan,

tetapi yang buruk adalah ini meningkatkan hierarki tata letak, dan Anda harus menangani fungsionalitas dalam kode, dan ini adalah solusi yang buruk:

    <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>

dan ganti adaptor untuk pemintal, untuk membuat nilai yang dipilih transparan

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;
    }
}

dan setelah memilih di spinner, cukup pilih teks dan setel ke EditText dan itu akan memiliki efek yang sama dengan animasi

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) {

        }
    });

jika Anda memiliki pertanyaan Tanya saya

Berikut adalah pustaka yang saya gunakan untuk pemintal label mengambang rey5137 Material Library

Juga, untuk referensi di masa mendatang, berikut adalah daftar dari beberapa perpustakaan hebat. Perpustakaan Inti Perpustakaan UI

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>