Come aggiungere separatori di sezioni/divisori a un ListView?

Question

Attualmente sto creando un menu per la mia app, utilizzando un DrawerLayout e una sottoclasse ArrayAdapter per ottenere qualcosa che assomiglia al menu dei cassetti di Facebook.

Attualmente non ho problemi a creare l'elenco, ma ora che sembra buono, vorrei aggiungere separatori tra diversi tipi di opzioni (ad esempio opzioni relative all'utente e relative alle applicazioni) e una barra di ricerca in cima a il menu.

Il codice del mio attuale sottoclasse ArrayAdaptor è la seguente:

public class DrawerMenuAdapter extends ArrayAdapter<String>{ 
    private Context context; 
    private String[] values; 
    private int resId; 

    public DrawerMenuAdapter(Context context, int textViewResourceId, String[] values) { 
     super(context, textViewResourceId, values); 
     this.context = context; 
     this.values = values; 
     this.resId = textViewResourceId; 
    } 

    @Override 
    public View getView(int position, View convertView, ViewGroup parent){ 
     LayoutInflater inflater = (LayoutInflater) context 
       .getSystemService(Context.LAYOUT_INFLATER_SERVICE); 
     View rowView = inflater.inflate(this.resId, parent, false); 

     TextView elementText = (TextView)rowView.findViewById(R.id.element_text); 
     ImageView elementImage = (ImageView)rowView.findViewById(R.id.element_icon); 
     String textValue = values[position]; 

     elementText.setText(textValue); 

     //This switch adds the icons to the related elements 
     switch (position){ 
      case 0: 
       elementImage.setImageResource(R.drawable.search); 
       break; 
      case 1: 
       elementImage.setImageResource(R.drawable.facebook_friends); 
       break; 
      case 2: 
       elementImage.setImageResource(R.drawable.flirts_history); 
       break; 
      case 3: 
       elementImage.setImageResource(R.drawable.premium); 
       break; 
      case 4: 
       elementImage.setImageResource(R.drawable.settings); 
       break; 
      case 5: 
       elementImage.setImageResource(R.drawable.share_app); 
       break; 
      case 6: 
       elementImage.setImageResource(R.drawable.cgu); 
       break; 
     } 


     return rowView; 
    } 
} 

presumo che devo ignorare la funzione che popola la ListView chiamando la funzione GetView, ma non riesco a trovare quale funzione IT è.

Answer 1

Se volete semplici sezioni nel vostro ListView, dare un'occhiata a questo tutorial:

http://cyrilmottier.com/2011/07/05/listview-tips-tricks-2-section-your-listview/

o questo tutorial:

http://bartinger.at/listview-with-sectionsseparators/

Il secondo non è così dettagliato, ma probabilmente è più facile da capire e semplificato.

L'idea di base è che tu, , il tuo ListAdapter abbia diversi tipi di visualizzazioni. Ad esempio due diverse viste in cui un tipo è la voce di elenco effettiva che visualizza le informazioni e l'altro tipo di visualizzazione è il divisore di sezione.

dal tutorial:

ListViews e più precisamente adattatori in grado di gestire diversi tipi di Visualizzazioni. Se si dà un'occhiata all'interfaccia Adapter si noterà che contiene due metodi specifici:

• getViewTypeCount() che restituisce il numero di tipi di Visualizzazioni tuo AdapterView gestisce. Il più delle volte questo metodo restituisce 1 perché tutti gli elementi di ListView sono simili. In questo caso, restituendo 2, ListView gestirà due tipi di Vista: regolari voce Vista e il separatore Vista
• getItemViewType(int) deve restituire un intero tra 0 (incluso) e getViewTypeCount() (esclusiva). Il numero dato esprime il tipo della vista nella posizione indicata. Per esempio, siamo in grado di garantire la valori restituiti sono 0 per i regolari voce Vista e 1 per i separatori

Answer 2

Sto aggiungendo una risposta qui da quando ho pensato che un altro modo per questo. Sembra un po 'come i link pubblicati da @Phil.

Per prima cosa ho impostato una serie di stringhe del menu che voglio visualizzare.Ho scritto questo array in un file di risorse XML per comodità personale.

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
    <string-array 
      name="drawer_menu_options"> 
     <item>Username</item> 
     <item>-sep-Flirter</item> 
     <item>Recherche</item> 
     <item>Amis Facebook</item> 
     <item>Flirts</item> 
     <item>Compte premium</item> 
     <item>-sep-Menu</item> 
     <item>Réglages</item> 
     <item>Inviter des amis</item> 
     <item>CGU</item> 
    </string-array> 
</resources> 

Si noti che ho due elementi che utilizzano il prefisso -sep-. Questi saranno i nostri separatori.

arriva Poi il DrawerMenuAdapter ho mostrato in precedenza, che è ancora un ArrayAdapter, sul quale ho aggiunto alcune funzionalità:

public class DrawerMenuAdapter extends ArrayAdapter<String>{ 
    private Context context; 
    private String[] values; 
    private int resId; 
    private int separatorId = 0; 
    private int userbarId = 0; 

    public DrawerMenuAdapter(Context context, int textViewResourceId, String[] values) { 
     super(context, textViewResourceId, values); 
     this.context = context; 
     this.values = values; 
     this.resId = textViewResourceId; 
    } 

    public void setSeparator(int resId){ 
     separatorId = resId; 
    } 

    public void setUserbarId(int resId){ 
     userbarId = resId; 
    } 

    @Override 
    public View getView(int position, View convertView, ViewGroup parent){ 
     View rowView; 

     LayoutInflater inflater = (LayoutInflater) context 
       .getSystemService(Context.LAYOUT_INFLATER_SERVICE); 

     if(userbarId != 0 && values[position].equals("Username")){ 
      rowView = inflater.inflate(this.userbarId, parent, false); 

     }else if(separatorId != 0 && values[position].startsWith("-sep-")){ 
      rowView = inflater.inflate(this.separatorId, parent, false); 

     }else{ 
      rowView = inflater.inflate(this.resId, parent, false); 
     } 

     TextView elementText = (TextView)rowView.findViewById(R.id.element_text); 
     String textValue = values[position]; 

     /* If the current line is a separator, just display a separator. Otherwise, set the 
     matching picture 
     */ 
     if(textValue.startsWith("-sep-")){ 
      elementText.setText(textValue.substring("-sep-".length())); 

     }else{ 
      if(textValue.equals("Username")){ 
       elementText.setText(context.getSharedPreferences("LovRUserSettings", 0) 
         .getString("firstName", "Username")); 
      }else{ 
       elementText.setText(textValue); 
      } 
      ImageView elementImage = (ImageView)rowView.findViewById(R.id.element_icon); 
      switch (position){ 
       case 2: 
        elementImage.setImageResource(R.drawable.search); 
        break; 
       case 3: 
        elementImage.setImageResource(R.drawable.facebook_friends); 
        break; 
       case 4: 
        elementImage.setImageResource(R.drawable.flirts_history); 
        break; 
       case 5: 
        elementImage.setImageResource(R.drawable.premium); 
        break; 
       case 7: 
        elementImage.setImageResource(R.drawable.settings); 
        break; 
       case 8: 
        elementImage.setImageResource(R.drawable.share_app); 
        break; 
       case 9: 
        elementImage.setImageResource(R.drawable.cgu); 
        break; 
      } 
     } 


     return rowView; 
    } 
} 

In questo codice, c'è un oggetto chiamato userBar. Non hai davvero bisogno di prestare attenzione a questo, ma se sei interessato, è un altro elemento del menu, utilizzando un file di layout specifico invece di quello che uso per gli elementi di menu regolari. È un modo per dimostrare che è possibile aggiungere qualsiasi tipo di layout specifico ovunque si desideri, semplicemente leggendo le stringhe.

Il punto principale è il modo in cui il codice cerca i separatori, le stringhe con il prefisso -sep-. Una volta trovato, il prefisso viene rimosso e il layout corrispondente viene attribuito al separatore.

Aight, questo è quello che ho trovato. Dopo questo, dovrai trovare il tuo modo di aggiungere click listers. Le mine sono implementate nello DrawerLayout.setOnCliclListener che fondamentalmente fa il lavoro esattamente nello stesso modo in cui la documentazione di Google dice. Ma si può anche utilizzare setOnclickListener alla vista come li si aggiunge, e utilizza un file XML in cui è possibile impostare le proprie onClick attributi ...

auguriamo che contribuiscano =)