Quiero hacer un Spinner que funcione de la misma manera que la aplicación Gmail.

Específicamente, la flecha giratoria debe reemplazar los elementos del menú de NavigationDrawer con la lista de elementos cuando se hace clic. Supongo que debería usar ListView pero no tengo idea de dónde colocarlo y cómo reemplazar dinámicamente los elementos del menú.

¿Cómo puedo lograr esta funcionalidad? ¡Gracias por adelantado!

enter image description here

1
Marat 4 ene. 2017 a las 22:09

4 respuestas

La mejor respuesta

Antes que nada, ¡Gracias a todos por la respuesta! ¡Aprecio tu ayuda!

Resulta que usar ImageView con TextView y configurar onClickListener en último lugar en lugar de Spinner fue la forma más fácil de lograr la funcionalidad deseada. Al hacer clic, simplemente oculto los elementos del menú y hago visible el ListView que está anidado dentro de NavigationView. El código resultante se ve así:

activity_main.xml

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <include
                android:id="@+id/header"
                layout="@layout/nav_header_main" />

            <ListView
                android:id="@+id/citiesListView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:divider="@null"
                android:dividerHeight="0dp"
                android:listSelector="@android:color/transparent"
                android:paddingTop="8dp" />

        </LinearLayout>

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

</android.support.v4.widget.DrawerLayout>

Resultado:

Result

nav_header_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/nav_header_height"
    android:background="@drawable/side_nav_bar"
    android:paddingBottom="8dp"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="@string/app_name"
        android:textColor="@android:color/white"
        android:textSize="25sp" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:paddingBottom="10dp"
        android:paddingTop="10dp">

        <TextView
            android:id="@+id/cityPicker"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Astana"
            android:textSize="15sp" />

        <ImageView
            android:id="@+id/pickerArrow"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginEnd="30dp"
            android:layout_marginRight="30dp" />

    </RelativeLayout>

</RelativeLayout>

Resultado:

enter image description here

MainActivity:

// ................

private NavigationView navigationView;
private TextView cityPickerTextView;
private ListView citiesListView;
private ImageView pickerArrow;

private boolean isPickerShown = false;

@Override
protected void onCreate(Bundle savedInstanceState) {

    // ................

    findViewById(R.id.header).setVisibility(View.INVISIBLE);

    navigationView = (NavigationView) findViewById(R.id.nav_view);
    navigationView.setNavigationItemSelectedListener(this);

    View headerView = navigationView.inflateHeaderView(R.layout.nav_header_main);
    cityPickerTextView = (TextView) headerView.findViewById(R.id.cityPicker);
    cityPickerTextView.setText(cities[0]);
    cityPickerTextView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            toggleMenu();
        }
    });
    cityPickerTextView.bringToFront();

    pickerArrow = (ImageView) headerView.findViewById(R.id.pickerArrow);
    pickerArrow.setImageResource(R.drawable.ic_arrow_drop_down_white_24dp);

    citiesListView = (ListView) findViewById(R.id.citiesListView);
    citiesListView.setVisibility(View.INVISIBLE);

    final CityPickerAdapter adapter = new CityPickerAdapter(this, cities, userCity);
    citiesListView.setAdapter(adapter);
    citiesListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
            userCity = cities[i];
            cityPickerTextView.setText(userCity);
            adapter.updateCurrentCity(userCity);
        }
    });
}

private void toggleMenu() {
    if (!isPickerShown) {
        pickerArrow.setImageResource(R.drawable.ic_arrow_drop_up_white_24dp);
        setMenuItemsVisible(false);
        citiesListView.setVisibility(View.VISIBLE);
        isPickerShown = true;
    } else {
        pickerArrow.setImageResource(R.drawable.ic_arrow_drop_down_white_24dp);
        setMenuItemsVisible(true);
        citiesListView.setVisibility(View.INVISIBLE);
        isPickerShown = false;
    }
}

private void setMenuItemsVisible(boolean b) {
    Menu menu = navigationView.getMenu();
    for (int i = 0; i < menu.size(); ++i) {
        menu.getItem(i).setVisible(b);
    }
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_main, menu);
    navigationView.inflateMenu(R.menu.activity_main_drawer);
    return true;
}

// Rest of the code
4
Marat 18 ene. 2017 a las 16:34

No deberías usar un Spinner. Simplemente use otros elementos para lograr el mismo comportamiento. Puede cambiar el contenido de la lista simplemente cambiando su adaptador.

Puede ver buenos ejemplos en la documentación oficial: https: // desarrollador. android.com/training/implementing-navigation/nav-drawer.html

0
G. Steigert 4 ene. 2017 a las 19:20

Puede que estés buscando algo como esto en tu actividad

public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.main);

      // Spinner element
      Spinner spinner = (Spinner) findViewById(R.id.spinner);

      // Spinner click listener
      spinner.setOnItemSelectedListener(this);

      // Spinner Drop down elements
      List<String> categories = new ArrayList<String>();
      categories.add("Automobile");
      categories.add("Business Services");
      categories.add("Computers");
      categories.add("Education");
      categories.add("Personal");
      categories.add("Travel");

      // Creating adapter for spinner
      ArrayAdapter<String> dataAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, categories);

    // Drop down layout style - list view with radio button
      dataAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

    // attaching data adapter to spinner
      spinner.setAdapter(dataAdapter);
   }

   @Override
   public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
  // On selecting a spinner item
    String item = parent.getItemAtPosition(position).toString();

  // Showing selected spinner item
    Toast.makeText(parent.getContext(), "Selected: " + item, Toast.LENGTH_LONG).show();
   }
   public void onNothingSelected(AdapterView<?> arg0) {
   // TODO Auto-generated method stub
   }

en activity.xml

<Spinner
      android:id="@+id/spinner"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:prompt="@string/spinner_title"/>

Para obtener un tutorial completo, consulte este sitio Android Spinners

0
m 1987 4 ene. 2017 a las 19:55

Puedes usar esta bonita biblioteca que hace todas esas cosas por ti.

Cajón de material

1
Manza 4 ene. 2017 a las 19:36