Autore Topic: Personalizzare un Navigation Drawer  (Letto 889 volte)

Offline christian13

  • Utente junior
  • **
  • Post: 83
  • Respect: +2
    • Mostra profilo
Personalizzare un Navigation Drawer
« il: 16 Ottobre 2014, 11:07:22 CEST »
0
Salve, ho implementato un "navigation  Drawer" nella mia applicazione in questo modo:

.xml

Codice (XML): [Seleziona]
<android.support.v4.widget.DrawerLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/drawer_layout"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   
   >
    <FrameLayout
       android:id="@+id/content_frame"
       android:layout_width="match_parent"
       android:layout_height="match_parent" >
.........codice schermata.........        


        </FrameLayout>
       
    <ListView android:id="@+id/left_drawer"
       android:layout_width="240dp"
       android:layout_height="match_parent"
       android:layout_gravity="start"
       android:choiceMode="singleChoice"
       android:divider="@android:color/darker_gray"
       android:dividerHeight="1dp"
       android:background="#E1E1E1"
       
       />
</android.support.v4.widget.DrawerLayout>


MainActivity.java

Codice (Java): [Seleziona]
String[] menu;
        DrawerLayout dLayout;
        ListView dList;
        ArrayAdapter<String> adapter;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.activity_underwater);

                menu = new String[] { "Discovery Totale", "Discovery Parziale",
                                "Visualizza Dati", "Esci" };
                dLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
                dList = (ListView) findViewById(R.id.left_drawer);
                adapter = new ArrayAdapter<String>(this,
                                android.R.layout.simple_list_item_1, menu);
                dList.setAdapter(adapter);
                dList.setSelector(android.R.color.holo_blue_dark);
                /*
                 * gestisce i click sul menù
                 */

                dList.setOnItemClickListener(new OnItemClickListener() {
                        @Override
                        public void onItemClick(AdapterView<?> arg0, View v, int position,
                                        long id) {
                                dLayout.closeDrawers();
                                Bundle args = new Bundle();
                                args.putString("Menu", menu[position]);
                                if (position == 0) {
                                        //è stata richiesta una discovery totale
                                } else if (position == 1) {
                                        //è stata richiesta una discovery parziale
                                } else if (position == 2) {
                                        //è stato richiesto di visualizzare i dati
                                } else if (position == 3) {
                                        //è stato richiesto di uscire
                                }

                        }
                });
                // -------------------------------------------------------
        }

Vi allego l'immagine dello screen di come appare...

Vorrei chiedervi, senza stravolgere troppo il codice come potrei personalizzare il navigation drawer in modo più elegante, ad esempio come compare in questa immagine
http://i.stack.imgur.com/kD5XE.jpg
?


Vi ringrazio molto...

Offline teskio

  • Moderatore globale
  • Utente normale
  • *****
  • Post: 387
  • Respect: +118
    • Github
    • Google+
    • Mostra profilo
    • Skullab
  • Dispositivo Android:
    Cubot GT99 / SurfTab Ventos 10.1
  • Play Store ID:
    Skullab Software
  • Sistema operativo:
    windows 7 / ubuntu 12.04
Re:Personalizzare un Navigation Drawer
« Risposta #1 il: 16 Ottobre 2014, 20:36:23 CEST »
+1
Un Navigation Drawer altro non è che una ListView, o meglio, è un Layout che gestisce una ListView. Questo significa che puoi personalizzare la ListView come meglio credi, ad esempio aggiungendo una "icona" prima del testo, così come credo tu voglia. Per fare ciò devi creare un custom ArrayAdapter, definire un layout per la singola riga della lista (quindi inserendo una ImageView e una TextView ad esempio) e creare un oggetto che si occupi di "memorizzare" tali informazioni (immagine e testo).
Per meglio capire cosa intendo puoi seguire questo tutorial presente sul forum :

[medio] ListView con layout personalizzato tramite un custom ArrayAdapter - Android Developers Italia

Fatto ciò non ti resta che associare il tuo custom ArrayAdapter alla ListView del Navigation Drawer.

Codice (Java): [Seleziona]
dList.setAdapter(myCustomArrayAdapter);
Ti consiglio di guardare anche questo ottimo tutorial sui Navigation Drawer sempre presente sul forum :
[facile] come utilizzare il nuovo Navigation Drawer - Android Developers Italia
« Ultima modifica: 16 Ottobre 2014, 20:40:33 CEST da teskio »

Offline GabMarioPower

  • Moderatore globale
  • Utente senior
  • *****
  • Post: 606
  • Respect: +152
    • Github
    • Google+
    • gabrielemariotti
    • GabMarioPower
    • Mostra profilo
  • Play Store ID:
    GAB+MARIO+DEV
  • Sistema operativo:
    Ubuntu 14.04 , Win 10
Re:Personalizzare un Navigation Drawer
« Risposta #2 il: 17 Ottobre 2014, 09:45:02 CEST »
0
Un Navigation Drawer altro non è che una ListView, o meglio, è un Layout che gestisce una ListView.

Tutto corretto tranne questo.
Il Drawer è un Layout, in cui puoi inserire tutto quello che vuoi, non necessariamente una ListView.

Offline arlabs

  • Utente normale
  • ***
  • Post: 430
  • Respect: +49
    • Mostra profilo
  • Dispositivo Android:
    GalaxyS6, Nexus5
  • Play Store ID:
    AR Labs
  • Sistema operativo:
    Windows 10
Re:Personalizzare un Navigation Drawer
« Risposta #3 il: 17 Ottobre 2014, 15:25:30 CEST »
0
Tutto corretto tranne questo.
Il Drawer è un Layout, in cui puoi inserire tutto quello che vuoi, non necessariamente una ListView.

Ma... veramente??? Mi hai aperto un mondo...

Nel tutorial di Google usano la ListView, e non hanno scritto che può essere usato altrimenti.
e pure nel tuo tutorial l'esempio è con una ListView.

Buono a sapersi.

Offline christian13

  • Utente junior
  • **
  • Post: 83
  • Respect: +2
    • Mostra profilo
Re:Personalizzare un Navigation Drawer
« Risposta #4 il: 18 Ottobre 2014, 16:21:08 CEST »
0
Senza che ritocco troppo il codice, come potrei fare solo per modificare il formato del testo all'interno dei singoli elementi nella ListView?
Quindi cambiargli il colore, la dimensione dei caratteri ecc....


Vi ringrazio molto...

Offline GabMarioPower

  • Moderatore globale
  • Utente senior
  • *****
  • Post: 606
  • Respect: +152
    • Github
    • Google+
    • gabrielemariotti
    • GabMarioPower
    • Mostra profilo
  • Play Store ID:
    GAB+MARIO+DEV
  • Sistema operativo:
    Ubuntu 14.04 , Win 10
Re:Personalizzare un Navigation Drawer
« Risposta #5 il: 19 Ottobre 2014, 16:24:05 CEST »
0
Ma... veramente??? Mi hai aperto un mondo...

Nel tutorial di Google usano la ListView, e non hanno scritto che può essere usato altrimenti.
e pure nel tuo tutorial l'esempio è con una ListView.

Beh la ListView è l'elemento più semplice per realizzare un elenco in un tutorial.
In ogni caso puoi inserire tutto quello che vuoi, anche con Layout annidati.

Offline arlabs

  • Utente normale
  • ***
  • Post: 430
  • Respect: +49
    • Mostra profilo
  • Dispositivo Android:
    GalaxyS6, Nexus5
  • Play Store ID:
    AR Labs
  • Sistema operativo:
    Windows 10
Re:Personalizzare un Navigation Drawer
« Risposta #6 il: 20 Ottobre 2014, 10:24:19 CEST »
0
In ogni caso puoi inserire tutto quello che vuoi, anche con Layout annidati.

Pensa che io, per metterci altro che una ListView, ho fatto un adapter che mi ritorna una sola riga con Layout custom... ora mi sento un po' stupido... :D

Offline christian13

  • Utente junior
  • **
  • Post: 83
  • Respect: +2
    • Mostra profilo
Re:Personalizzare un Navigation Drawer
« Risposta #7 il: 20 Ottobre 2014, 10:27:01 CEST »
0
Riguardo a questa domanda?
Citazione
Senza che ritocco troppo il codice, come potrei fare solo per modificare il formato del testo all'interno dei singoli elementi nella ListView?
Quindi cambiargli il colore, la dimensione dei caratteri ecc....
?

 :D :D :D :D :D :D :D

Offline teskio

  • Moderatore globale
  • Utente normale
  • *****
  • Post: 387
  • Respect: +118
    • Github
    • Google+
    • Mostra profilo
    • Skullab
  • Dispositivo Android:
    Cubot GT99 / SurfTab Ventos 10.1
  • Play Store ID:
    Skullab Software
  • Sistema operativo:
    windows 7 / ubuntu 12.04
Re:Personalizzare un Navigation Drawer
« Risposta #8 il: 20 Ottobre 2014, 10:32:13 CEST »
0
Puoi agire sul layout della singola riga‚ che nel tuo caso è "simple_list_item_1" ovvero il layout che passi all’ArrayAdapter. Quindi in pratica crei un layout per la singola riga e lo sostituisci a quello "standard"
« Ultima modifica: 20 Ottobre 2014, 10:34:11 CEST da teskio »