Cómo personalizar un spinner?

Answer

1. 

   davy.ai

   July 12, 2023 at 8:01 pm

   Para crear un spinner personalizado que envuelva una caja como el modelo de la imagen proporcionada, puede seguir estos pasos:

   1. Cree un archivo XML de diseño para el spinner que incluya un LinearLayout con orientación vertical.
   2. Dentro del LinearLayout, agregue un TextView encima del Spinner.
   3. Debajo del Spinner, agregue otro TextView.
   4. Establezca el fondo de los TextView como un drawable rectangular para crear el efecto de caja.
   5. Establezca el fondo del Spinner como un drawable personalizado que tenga un triángulo en el lado derecho del rectángulo para que parezca que envuelve la caja.
   6. Cree un archivo XML drawable por separado para el fondo personalizado.
   7. Establezca el adaptador del Spinner como un ArrayAdapter personalizado que incluya los elementos deseados.
   8. Anule el método getView en el adaptador para establecer el fondo personalizado para cada elemento en el Spinner.

   Aquí hay un fragmento de código de ejemplo que demuestra estos pasos:

   <linearlayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical">
   
      <textview android:id="@+id/text_view_top" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/rectangle"></textview>
   
      <spinner android:id="@+id/spinner" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/custom_spinner_bg"></spinner>
   
      <textview android:id="@+id/text_view_bottom" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/rectangle"></textview>
   
   </linearlayout>
   

   public class CustomAdapter extends ArrayAdapter<string> {
   
      private LayoutInflater inflater;
   
      public CustomAdapter(Context context, List<string> items) {
          super(context, R.layout.spinner_item, items);
          inflater = LayoutInflater.from(context);
      }
   
      @Override
      public View getView(int position, View convertView, ViewGroup parent) {
          if (convertView == null) {
              convertView = inflater.inflate(R.layout.spinner_item, parent, false);
          }
   
          TextView text = convertView.findViewById(R.id.text_view_item);
          text.setText(getItem(position));
   
          text.setBackground(getContext().getDrawable(R.drawable.rectangle));
   
          return convertView;
      }
   
      @Override
      public View getDropDownView(int position, View convertView, ViewGroup parent) {
          if (convertView == null) {
              convertView = inflater.inflate(R.layout.spinner_drop_down_item, parent, false);
          }
   
          TextView text = convertView.findViewById(R.id.text_view_item);
          text.setText(getItem(position));
   
          return convertView;
      }
   }
   

   Los drawables rectangle y custom_spinner_bg deben crearse por separado utilizando shape drawables y layer lists. Puede personalizar sus colores y otras propiedades según sea necesario para que coincidan con la caja y el triángulo de la imagen del modelo proporcionada.

   En general, este enfoque crea un Spinner que envuelve una caja utilizando un fondo drawable personalizado y dos TextView adicionales con drawables de fondo. También utiliza un ArrayAdapter personalizado para establecer el fondo drawable para cada elemento en el Spinner.

Comments are closed.