Etiqueta flotante Spinner?

Después de usar TextInputLayout la Biblioteca de soporte de diseño de Android para colocar una etiqueta flotante encima de un componente EditText , me preguntaba si hay una manera de agregar una etiqueta flotante al componente Spinner (no necesariamente usando la Biblioteca de diseño).

Por esto, me refiero a algo como un TextView colocado por encima del Spinner (obviamente no hay animaciones como el TextInputLayout ), pero quiero que el tamaño del texto, la fuente y el color para que coincida con la de la etiqueta flotante TextInputLayout .

Por ejemplo, se vería algo como esto (vea las etiquetas arriba del Spinner ):

Introduzca aquí la descripción de la imagen

Como mencioné antes, mi objetivo principal es tener una etiqueta encima del Spinner , al igual que en TextInputLayout , así que el tamaño del texto, la fuente, el color y las distancias entre la etiqueta y el componente serían los mismos.

En la página Diseño de Google sobre los campos de texto de etiqueta flotante , hay un diagrama que muestra las dimensiones de la etiqueta con respecto al componente, pero no hay ninguna indicación del color o tamaño del texto de la etiqueta:

Introduzca aquí la descripción de la imagen

Por lo tanto, para resumir, estoy preguntando:
– Si hay un componente especial para lograr lo que estoy pidiendo o una vista personalizada que puedo usar, lo que sería, y cómo puedo usarlo.
– Si no, cuál es el tamaño, el color y la fuente del texto de la etiqueta flotante, de modo que pueda colocar un TextView encima de mi Spinner con las dimensiones de disposición mostradas en la imagen de arriba.


EDITAR:

De las directrices de diseño de Google para campos de texto , tiene lo siguiente para etiquetas flotantes:

Sugerencia y fuente de entrada: Roboto Regular 16sp
Fuente de la etiqueta: Roboto Regular 12sp
Altura del azulejo: 72dp
Texto de relleno superior y inferior: 16dp
Campo de texto divider padding: 8dp

Así como las imágenes mostradas arriba.

Así que la fuente de etiqueta flotante es: Roboto Regular 12sp . Por lo tanto, puede utilizar un TextView para mostrar la etiqueta Spinner , ya que no conozco ninguna View personalizada o componentes especiales que pueda utilizar.

Sin embargo , después de probarlo, no parece tan bueno como el ejemplo mostrado en la imagen. Una vista personalizada puede ser mejor para esto , ya que podría parecer más agradable, pero la solución anterior es sólo una forma de lograr algo cercano a lo que quería originalmente.

8 Solutions collect form web for “Etiqueta flotante Spinner?”

Tengo una idea hecha por mí mismo para resolver el mismo problema que usted tiene.

Echale un vistazo:

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

Ahora no necesito hilanderos. Aún tendrá efecto de etiqueta flotante con animaciones incluidas.

Quiero que el tamaño del texto, fuente y color coincidan con el de la etiqueta flotante de TextInputLayout .

Esto se puede lograr fácilmente sin bibliotecas externas. Después de tratar de hackear el TextInputLayout e incluso hacer mi propia vista personalizada, me di cuenta de que el uso de un TextView simple toma mucho menos código y es probablemente más eficiente.

El estilo de texto se puede copiar desde la librería AppCompat .

El estilo

A partir de las pautas de diseño de materiales obtenemos la siguiente información:

  • La etiqueta debe tener un margen inferior de 8dp
  • La etiqueta debe alinearse verticalmente con el texto de entrada

EditText es lo que las directrices no mencionan sobre el Material EditText :

  • Tiene un relleno izquierdo de 4dp
  • Su etiqueta en realidad no tiene ningún espacio de 16dp encima de él, esto se deja al diseñador de interfaz: esto tiene sentido porque si lo coloca bajo otro EditText , sólo necesitará un adicional de 8dp de espacio

Además, la Biblioteca de soporte de diseño contiene este estilo para la etiqueta de un elemento centrado:

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

Los elementos inactivos simplemente utilizan TextAppearance.AppCompat.Caption .

Implementación

Agregue lo siguiente a su archivo dimens.xml :

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

A continuación, agregue esto a 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> 

Si desea que la etiqueta tenga siempre el color resaltado (acento), reemplace TextAppearance.AppCompat.Caption con TextAppearance.Design.Hint de la Biblioteca de diseño de Google. Sin embargo, esto probablemente se verá un poco extraño si también han etiquetado vistas de EditText en la misma pantalla.

Finalmente, puede colocar un TextView sobre su Spinner (o cualquier otro elemento) con el estilo aplicado:

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

Resultado

La siguiente captura de pantalla muestra un ejemplo simple con dos vistas normales TextInputLayout seguidas por una etiqueta y un Spinner . No 8dp espacio adicional de 8dp para separarlos aún más, pero esto le muestra que el tamaño, la fuente y el color se reflejan.

Los elementos dentro del Spinner tienen un relleno diferente, sin embargo, prefiero mantener la alineación vertical con todas las otras etiquetas para obtener una apariencia más uniforme.

Introduzca aquí la descripción de la imagen

He creado un compuesto View componente que muestra una etiqueta por encima del Spinner . El texto de la etiqueta se puede establecer mediante XML o en Java.

El componente tiene las características clave de un Spinner ( no todas ) así como similar al componente TextInputLayout .

Lo he llamado LabelledSpinner , y está disponible como parte de mi biblioteca Android de UsefulViews en GitHub bajo la licencia Apache 2.0 .

Para usarlo, agregue la dependencia de la biblioteca en su archivo build.gradle :

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

Los ejemplos de su uso están disponibles en el repositorio de GitHub (tanto una aplicación de ejemplo como una guía de uso).

Logré esto usando un AutoCompleteTextView, desactivando el teclado y mostrando las opciones en el tacto.

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

He modificado la solución de Rodrigo para usar un adaptador, es decir, más como un Spinner estándar https://gist.github.com/smithaaron/d2acd57937d7a4201a79

Tengo una solución alternativa que utiliza el comportamiento de TextInputLayout y de un DialogFragment (AlertDialog) de encargo para emular una ventana emergente del diálogo del hilandero.

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> 

Crear Spinner personalizado a través de 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"); } 

Resultado

Al hacer clic en la ruleta denominada TextInputLayout, se activará un cuadro de diálogo de alerta que contiene la lista de selecciones. Una vez que se selecciona una selección, el EditText se rellenará con su selección y la etiqueta flotará como desea.

Aquí está una biblioteca que utilizo para la etiqueta flotante spinner rey5137 Biblioteca de materiales

También, para la referencia futura, aquí está una lista de algunas grandes bibliotecas. Bibliotecas de la UI

Aquí está mi truco,

Las cosas buenas son que todo funcionará como usted quiere,

Pero lo malo es que está aumentando la jerarquía de diseño, y usted tiene que manejar la funcionalidad en el código, y es una solución fea:

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

Y anula el adaptador para la hiladora, para que los valores seleccionados sean transparentes

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

Y después de seleccionar en el hilandero, acaba de obtener el texto seleccionado y establecerlo en EditText y tendrá el mismo efecto con la animación

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

Si tienes alguna pregunta pregúntame

  • Barra de herramientas y NavigationDrawer
  • ¿Puedo mostrar el diseño de material Snackbar en el diálogo?
  • Tema no aplicado con la biblioteca appcompat en algunos dispositivos Android 4.X
  • Configuración del relleno de la barra de estado en NavigationView en Android
  • ¿Cómo diseñar el NavigationView de la biblioteca de soporte de diseño?
  • ¿Cómo se cambia el color de línea / campo de EditText en TextInputLayout (cuando se llama a setError)?
  • El botón de acción flotante aparece sobre el cajón de navegación
  • Botón de acción flotante que bloquea otros componentes
  • Android: Desplazamiento de problemas con recyclerview dentro de un viewpager
  • Efecto de ondulación en los elementos desplegables de Spinner de fondo de color (appcompat-v7 V21)
  • Barra de herramientas de colapso animado suave con Android Design Support Library
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.