Listview personnalise( aidez moi svp)

[ulquiorra]

Bonjour

Je cherche a faire une listview dans mon application qui contiendra plusieurs lecteurs mediaplayer

mais je n ' y arrive vraiment pas et ca fait 2 jours que je seche.

Je viens donc vers vous dans l ' espoir de trouver une solution :p

pour l instant , mon lecteur est constitue ainsi

http://img515.imageshack.us/i/android.png/

et il devra ressembler a ca( trafiqué sous paint pour bien montrer le but)

http://img685.imageshack.us/i/androidscreen.jpg/

apres moult recherche sur google, je suis toujours en confusion car je vois des classe heritees de listactivity et des classes heritees d ' activity simple. Cependant les 2 possedent une listview

je comprends pas la difference entre les 2 sachant que moi je veux juste une listview avec mes elements disposes normalement sans clic obligatoire sur toute la listview( je gere deja mes propres listener)

Merci de votre aide

mon xml:

<?xml version="1.0" encoding="utf-8"?>
android:id="@+id/widget41"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10px"
xmlns:android="http://schemas.android.com/apk/res/android"
>

android:id="@+id/listMusique"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>

android:id="@+id/progress_bar"
android:layout_width="200px"
android:layout_height="wrap_content"
android:layout_x="62px"
android:layout_y="80px"
android:max="100"

style="?android:attr/progressBarStyleHorizontal"

>

android:id="@+id/button_play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5px"
android:layout_x="5px"
android:layout_y="70px"
android:src="@drawable/button_play"

>

android:id="@+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Date"
android:textSize="18sp"
android:layout_x="166px"
android:layout_y="4px"

>

android:id="@+id/user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nom expediteur"
android:textSize="18sp"
android:layout_x="7px"
android:layout_y="4px"

>

android:id="@+id/lu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Lu "
android:typeface="serif"
android:textStyle="italic"
android:gravity="center"
android:layout_x="233px"
android:layout_y="9px"


android:checked="false"
>

Modifié 22 avril 2010 par ulquiorra

[Nivek]

On ne peut pas voir tes images sans identifiant developpez.net ?

[ulquiorra]

ouhlala desolé

j ' edite dessuite

Merci a toi

[Nivek]

Ah ok, je comprends ce que tu veux obtenir. Donc tu as besoin de prévoir un nombre indéterminé de players et tu veux les gérer dans une listview.

Il faut bien que tu comprennes que la ListView fonctionne de pair avec un Adapter.

La ListView est le composant qui gère les interactions avec l'utilisateur (défilement de la liste, sélection d'un item... et c'est à peu près tout) et pour remplir les lignes, elle demande à l'Adapter de lui fournir le contenu de chacune via la méthode getView().

Tu vas alors devoir définir 2 layouts :

- un qui représente le contenu de ton activity (dans ton cas, l'activité contenu dans ton onglet, donc simplement une listview)

- un qui représente une ligne (un player)

Ton adapter aura la responsabilité de gérer la liste des mediaplayers et des propriétés qui leurs sont associées. Il aura également la responsabilité de fournir la View représentant 1 mediaplayer quand la listview en a besoin via la méthode getView().

Je te conseille de commencer simplement (déjà avoir une listview standard qui fonctionne) et de bien étudier le fonctionnement des listviews/adapters ainsi que le concept de viewholder (très important si le nombre de lignes est important).

Un bon exemple pour démarrer : http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/view/List14.html

[ulquiorra]

Grand merci pour ton aide et pour la précision de ton post car j ' étais un peu desespere ^^

Il est vrai que les listview sont quelque chose qui me paraissent assez compliques

Je vais suivre tout tes précieux conseils et le lien que tu m as donne et je te tiens au courant

Merci encore pour ton aide

Modifié 22 avril 2010 par ulquiorra

[Cyril Mottier]

Les ListViews sont probablement un peu compliquées mais c'est un élément vital du framework.

Concernant le code que tu as fournit : évite à tout prix les AbsoluteLayout !

[ulquiorra]

Merci cyril de ta réponse.

Les absolute layout me permettent pourtant d ' avoir des éléments placés ou bon me semble donc j' ai pense que c ' était le plus adéquat pour ce que je voulais faire.

En quoi sont - ils néfaste ?

Merci encore de la précision.

[Nivek]

Tu vas avoir des soucis pour gérer les différentes tailles d'écran (très gênant en particulier pour les écrans QVGA comme celui du Tattoo).

L'idéal est d'utiliser le RelativeLayout mais il est peut-être un peu complexe pour démarrer... au pire des imbrications de LinearLayout, c'est pas ce qu'il y a de plus optimal mais on arrive vite à faire ce qu'on veut.

[ulquiorra]

Bonjour

Je reviens vers vous car je rencontre quelques difficultés quant a l élaboration de ma ListView

Elle se présente comme ca pour l ' instant( grâce a votre excellente aide, merci pour tout encore)

http://img683.imageshack.us/i/listmz.jpg/

Comme on le voit , je ne peux pas enlever mon setContentView(R.layout.mediaplayer);

car sinon j ' ai des nullpointer partout étant donné que les éléments ne seront plus reconnu.

Du coup j ' ai mon component qui s ' affiche par dessus la vue.

J ' ai aussi quelque soucis avec le fonctionnement des listview( qui me sont encore un peu flou) , en particulier en ce qui concerne sa taille.

Je voudrais moi faire en sorte qu ' il y ait autant de ligne que de music dans la sdcard mais sur les exemples donnes ils le font tous avec un string place dans getCount()

Merci a tous de votre aide

voici mon code( j ' ai enlevé le corps des fonctions par souci de visibilité)

Je préfère pour l ' instant continuer avec les AbsoluteLayout( que j ' enlèverai rapidement suite a vos précieux conseils) car je dois présenter une version beta a mon tuteur et je n ' ai pas le temps de faire une refonte graphique

Merci encore pour votre aide

package com.dev;

import java.io.File;
import java.io.FilenameFilter;
import java.util.ArrayList;
import java.util.List;
import android.app.ListActivity;
import android.content.Context;
import android.graphics.Color;
import android.media.MediaPlayer;
import android.os.Bundle;
import android.os.Handler;
import android.os.SystemClock;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.AbsoluteLayout;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.ProgressBar;
import android.widget.TextView;


public class TabVoiceMail extends ListActivity implements FilenameFilter{

      private static final String TAG = "Test";
       private MediaPlayer mMediaPlayer;
       private ImageButton playButton;
       private String path;
       private ProgressBar barre;
       private long lastActionTime=0L;
       private AbsoluteLayout fondEcran;
       private boolean isPaused=false;
       private Handler hand ;
       private static final String MEDIA_PATH=new String("/sdcard");
       private List  songs= new ArrayList();
       private TextView num;

protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);     


   // this.listerSDCard();
        setContentView(R.layout.mediaplayer);
        fondEcran=(AbsoluteLayout)findViewById(R.id.affichage);
        playButton = (ImageButton) findViewById(R.id.button_play);
        playButton.setEnabled(true);
   setListAdapter(new AdapterTest(this));
    //updateSongList();
        this.play();
        this.recupNum();
}



public void updateTime()
private Runnable timer=new Runnable(){
   public void run(){}};

public void play()
 {
public void recupNum()

public void calculProgressBar()


/*public void updateSongList(){*/
public void etatLecteur()
public void listerSDCard()

public class AdapterTest extends BaseAdapter {
   private LayoutInflater inflater;
    private ImageButton playButton;
    public final String[] DATA = {
           "Abbaye de Belloc", "Abbaye du Mont des Cats", "Abertam",
           "Abondance", "Ackawi", "Acorn", "Adelost", "Affidelice au Chablis",
           "Afuega'l Pitu", "Airag", "Airedale", "Aisy Cendre",};

    public AdapterTest(Context context)
    {

        inflater=LayoutInflater.from(context);

    }


   public int getCount() {

       return DATA.length;
   }


   public Object getItem(int position) {

       return position;
   }


   public long getItemId(int position) {

       return position;
   }


   public View getView(int position, View convertView, ViewGroup parent) {

       ViewHolder holder ;


          if (convertView == null) {
              convertView = inflater.inflate(R.layout.mediaplayer, null);

              holder = new ViewHolder();


              convertView.setTag(holder);
          } else {

              holder = (ViewHolder) convertView.getTag();
          }




          return convertView;
      }

      public class ViewHolder {
          TextView text;
          ImageView icon;
      }
}
}

mes xml

liste. xml

<?xml version="1.0" encoding="utf-8"?>
     android:orientation="vertical" android:layout_width="fill_parent"
     android:layout_height="fill_parent">
           android:id="@android:id/list"
           android:layout_width="fill_parent"
           android:layout_height="fill_parent"/>

mediaplayer.xml

<?xml version="1.0" encoding="utf-8"?>
android:id="@+id/affichage"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#070f0000"
android:padding="10px"
xmlns:android="http://schemas.android.com/apk/res/android"
>
android:id="@android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_x="0px"
android:layout_y="-1px"
>



android:id="@+id/progress_bar"
android:layout_width="100px"
android:layout_height="5px"
android:layout_x="52px"
android:layout_y="25px"
style="?android:attr/progressBarStyleHorizontal"
>

android:id="@+id/button_play"
android:layout_width="30px"
android:layout_height="30px"
android:layout_marginTop="5px"
android:layout_x="11px"
android:layout_y="15px"
android:src="@drawable/button_play"
>

android:id="@+id/num"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Num tel"
android:layout_x="163px"
android:layout_y="18px"
>

android:id="@+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Date msg audio"
android:layout_x="228px"
android:layout_y="19px"
>

Modifié 23 avril 2010 par ulquiorra

[popolbx]

wow c est un joli bordel ^^

ton code ne peut pas donner le résultat de la capture, je ne vois pas la tabactivity....

Ah..si j ai compris....c'est l activity contenu dans le tab.... donc ok tu fais une listActivity.

mais dans ce cas fais setContentView(R.id.liste) dans le onCreate au lieu de mediaplayer ça ira beaucoup mieux :p

Modifié 23 avril 2010 par popolbx

[ulquiorra]

Salut

Merci de ta réponse

J ' avais déjà teste avec R.id.liste mais nullpointer car des éléments précisés dans la classe n y figurait pas dans ce xml

Je vais essayer de transvaser toutes mes fonctions dans la classe Adapter et voir si ca fonctionne( j ' ai amene le pc du bureau donc je pourrais taffer dessus ce week)

Merci encore pour ton aide

[popolbx]

ah oui evidement les construction des boutons play doivent se faire dans le getView de l'adapter...

[ulquiorra]

oki

en gros je met tout dans ma classe adapter

merci beaucoup

je vais tester ca

[ulquiorra]

bonsoir

apres quelque test , j ' ai reussi a faire une listeview standard qui s affiche malgre tout, mais lorsque j essaie de lui attribuer mes fonctions crees comme je le faisais avec la vue standard , je me tape des nullpointer en masse :p alors que j ' ai bien déclaré mes elements dans le getview

Merci d avance pour votre aide

mon code

public class AdapterTest extends BaseAdapter {
   private LayoutInflater inflater;
    private ImageButton playButton;
    public final String[] DATA = {
           "Abbaye de Belloc", "Abbaye du Mont des Cats", "Abertam",
           "Abondance", "Ackawi", "Acorn", "Adelost", "Affidelice au Chablis",
           "Afuega'l Pitu", "Airag", "Airedale", "Aisy Cendre",};




    public AdapterTest(Context context)
    {

        inflater=LayoutInflater.from(context);

    }


   public int getCount() {

       return DATA.length;
   }


   public Object getItem(int position) {

       return position;
   }


   public long getItemId(int position) {

       return position;
   }


   public View getView(int position, View convertView, ViewGroup parent) {

       ViewHolder holder ;


          if (convertView == null) {
              convertView = inflater.inflate(R.layout.mediaplayer, null);

              holder = new ViewHolder();
             holder.icon=(ImageButton)convertView.findViewById(R.id.button_play);
             holder.barre=(ProgressBar)convertView.findViewById(R.id.progress_bar);

              convertView.setTag(holder);
          } else {

              holder = (ViewHolder) convertView.getTag();
          }




          return convertView;
      }

      public class ViewHolder {
          TextView text;
          ImageButton icon;
          ProgressBar barre;
      }
}

la partie du code qui me pose probleme(poste plus haut)

 barre=(ProgressBar)findViewById(R.id.progress_bar);
        barre.setMax(mMediaPlayer.getDuration());
        barre.setProgress(0);

           //updateTime();
           playButton.setOnClickListener(new View.OnClickListener() {
                   public void onClick(View view) {

                       fondEcran.setBackgroundColor(Color.BLUE);
                       calculProgressBar();

                       etatLecteur();

         }});}

Modifié 25 avril 2010 par ulquiorra

[popolbx]

ils faut le faire dans le getview et faire view.findView.......

c est pour chaque ligne créée dans getview que tu affecte tes evenement.

[ulquiorra]

salut

désolé de te déranger encore , mais j ' ai toujours mon null pointer malgré les modifs

Je ne comprends pas car j ' ai pourtant bien déclaré les éléments

merci de ta patience

j ' ai teste ca

    public View getView(int position, View convertView, ViewGroup parent) {

       ViewHolder holder ;


          if (convertView == null) {
              convertView = inflater.inflate(R.layout.mediaplayer, null);

              holder = new ViewHolder();
              tab=new TabVoiceMail();
             holder.playButton=(ImageButton)convertView.findViewById(R.id.button_play);
             holder.barre=(ProgressBar)convertView.findViewById(R.id.progress_bar);



             tab.play();




              convertView.setTag(holder);
          } else {

              holder = (ViewHolder) convertView.getTag();
          }




          return convertView;
      }

      public static class ViewHolder {

          ImageButton playButton;
          ProgressBar barre;

      }


}

toujours la meme erreur de nullpointer dans ma fonction play( mon listener est dedans et appelle d autre fonctions)

public void play()
 {

     try {
           path = "/sdcard/audio.mp3";

          mMediaPlayer = new MediaPlayer();
          mMediaPlayer.setDataSource(path);
          mMediaPlayer.prepare();


       } catch (Exception e) {
              Log.e(TAG, "error: " + e.getMessage(), e);
       }

        barre.setMax(mMediaPlayer.getDuration());
        barre.setProgress(0);

           //updateTime();
           playButton.setOnClickListener(new View.OnClickListener() {
                   public void onClick(View view) {

                       //fondEcran.setBackgroundColor(Color.BLUE);
                       calculProgressBar();

                       etatLecteur();

         }});}

j ' ai meme essaye d integrer directement ma fonction dans le convert view comme ca( en rajoutant les accesseurs adequat)

public View getView(int position, View convertView, ViewGroup parent) {

       ViewHolder holder ;


          if (convertView == null) {
              convertView = inflater.inflate(R.layout.mediaplayer, null);

              holder = new ViewHolder();
              tab=new TabVoiceMail();
             holder.playButton=(ImageButton)convertView.findViewById(R.id.button_play);
             holder.barre=(ProgressBar)convertView.findViewById(R.id.progress_bar);

             holder.barre.setMax(tab.getMMediaPlayer().getDuration());
              holder.barre.setProgress(0);

                 //updateTime();
                 holder.playButton.setOnClickListener(new View.OnClickListener() {
                         public void onClick(View view) {

                             //fondEcran.setBackgroundColor(Color.BLUE);
                             tab.calculProgressBar();

                             tab.etatLecteur();

               }});
             //tab.play();




              convertView.setTag(holder);
          } else {

              holder = (ViewHolder) convertView.getTag();
          }




          return convertView;
      }

      public static class ViewHolder {

          ImageButton playButton;
          ProgressBar barre;

      }


}

mais rien n ' y change

merci d avance de votre aide( je debute les listview et c est pas ma tasse de cafe pour l instant ^^)

[Nivek]

Je pense que tu as un souci de compréhension sur la programmation événementielle + objet des listviews.

Le déroulement du code est le suivant :

- A chaque fois que l'interface graphique estime que cela est nécessaire (c'est à dire très souvent), la ListView appelle adapter.getView().

- Ce getView() a la responsabilité de construire les éléments d'interface graphique représentant une ligne de la listview. Dans ce cadre, elle affecte à chaque bouton un OnClickListener dont le code ne sera pas exécuté immédiatement, mais uniquement quand l'utilisateur appuiera sur ce bouton. Donc l'action de lire un flux audio devra être déclenchée dans le onClick(). En résumé, getView() ne doit faire que :

* instancier des view

* positionner dans le setTag() de ces views les éléments qui leur permettent de savoir sur quelles données travailler lorsqu'elles recevront un événement (un identifiant de message devrait être suffisant)

* positionner les OnClickListeners sur ces view qui leur permettront de savoir quelles actions réaliser à la réception d'un click

- Quand l'utilisateur clique sur un bouton, ce bouton exécute le onClick() du OnClickListener qui lui a été fourni. => en fonction de l'identifiant du message récupéré par getTag(), déclencher la lecture du message

[ulquiorra]

Bonjour

Merci beaucoup pour tes precisions NIvek

J ' ai repense un peu a mon algo pour pouvoir positionner directement mes listener dans le getView et non dans des fonctions(comme c etait le cas avant). J ' ai aussi deplace mes fonctions dans ma classe AdapterTest pour eviter les null pointer en masse.

La liste marche a peu pres correctement , mais il semble y avoir un probleme a propos de la position.

En effet , quant je clique sur mon bouton , il enclenche le lecteur 5 liste plus bas ...... comme precise sur cette image

http://img132.imageshack.us/i/listeg.jpg/

comment faire pour faire en sorte qu a chaque lecteur soit associe une musique de ma carte SD et pas une musique pour tous les lecteurs( ca doit provenir de la position je pense)

Merci beaucoup de votre aide

   public int getCount() {

       return 5;
   }

public Object getItem(int position) {

       return position;
   }


   public long getItemId(int position) {

       return position;
   }




public View getView(int position, View convertView, ViewGroup parent) {

       final ViewHolder holder ;


          if (convertView == null) {
              convertView = inflater.inflate(R.layout.mediaplayer, null);

              holder = new ViewHolder();
                  tab=new TabVoiceMail();

             playButton=(ImageButton)convertView.findViewById(R.id.button_play);
             barre=(ProgressBar)convertView.findViewById(R.id.progress_bar);
             fondEcran=(AbsoluteLayout)convertView.findViewById(R.id.affichage);
             this.play();


                 //updateTime();

                 playButton.setOnClickListener(new OnClickListener() {

                         public void onClick(View view) {

                             fondEcran.setBackgroundColor(Color.BLUE);
                             calculProgressBar();
                             etatLecteur();


                             //etatLecteur();

               }});
             //tab.play();




              convertView.setTag(holder);
          } else {

              holder = (ViewHolder) convertView.getTag();
          }




          return convertView;
      }


      public  class ViewHolder {

          ImageButton playButton;
          ProgressBar barre;
          AbsoluteLayout fondEcran;

      }

fonction play

public void play()
     {

         try {
               path = "/sdcard/audio.mp3";

              mMediaPlayer = new MediaPlayer();
              mMediaPlayer.setDataSource(path);
              mMediaPlayer.prepare();


           } catch (Exception e) {
                  Log.e(TAG, "error: " + e.getMessage(), e);
           }

           barre.setMax(mMediaPlayer.getDuration());
           barre.setProgress(0);
               //updateTime();



             }

[Nivek]

Ta fonction play() devrait être appelée dans onClick() et non dans getView(). En l'état, à chaque fois que ton adapter va fabriquer une ligne à afficher, il va en même temps provoquer la lecture d'un mp3.

Pour qu'un bouton puisse connaitre l'élément sur lequel il doit agir, personnellement j'utilise la fonction setTag() pour transmettre un identifiant (dans ton cas ca peut être la position ou même le path du mp3... cela dépendra de ce que tu souhaites faire ensuite sur tes messages.

Ce positionnement doit être réalisé juste avant ton return convertView, pour que à chaque affichage de ligne, que l'on soit dans le cas d'une ligne recyclée ou non, l'identifiant de ton message soit bien réaffecté.

Ensuite, dans ton onClick(), tu peux faire un view.getTag() pour récupérer l'identifiant de ton message et le transmettre à play() pour lancer la lecture.

[ulquiorra]

merci de ton aide

pour la fonction play , c ' est un oubli de ma part , etant donne que j ' avais avant mon listener dedans.

J ' ai oublie de la changer en consequence.

Je vais test tes conseils

Merci beaucoup de ton aide et de la patience dont tu fais preuve a mon egard

[ulquiorra]

merci pour ton aide

j ' ai pu résoudre presque tout mes pbs(ViewHolder , Runnable etc)mais j ai toujours un probleme pour bien positionner ma musique en face du bon lecteur audio

j ' ai tente un truc comme ca

String songPath=(MEDIA_PATH+songs.get(getItem(position).hashCode())); 

mais ca me lance toujours la meme musique( alors que dans le log je vois bien que ca lit toutes les musiques)

fonction play
   public void play(View convertView)
     {

       // songs etant une liste qui contient les noms des fichiers
        String songPath=(MEDIA_PATH+songs.get(getItem(currentPosition).hashCode())); 
        Log.v(TAG, "nom fichier " + MEDIA_PATH+songs.get(getItem(currentPosition).hashCode()));
         try {

             path = "/sdcard/audio.mp3";
              mMediaPlayer = new MediaPlayer();
             // mMediaPlayer.setDataSource(songPath);
              mMediaPlayer.prepare();
             // Log.v(TAG, "liste " + nom);

           } catch (Exception e) {
                  Log.e(TAG, "error: " + e.getMessage(), e);
           }


               //updateTime();



             }

ma view

public View getView( final int position, View convertView, ViewGroup parent) {

       final ViewHolder holder ;


          if (convertView == null) {
              convertView = inflater.inflate(R.layout.mediaplayer, null);

              holder = new ViewHolder();
                  tab=new TabVoiceMail();

             holder.playButton=(ImageButton)convertView.findViewById(R.id.button_play);
             holder.nomFile=(TextView)convertView.findViewById(R.id.num);
             holder.date=(TextView)convertView.findViewById(R.id.date);
             holder.playButton.setClickable(true);
             holder.playButton.setFocusable(true); 
             tempButton=holder.playButton;
             holder.barre=(ProgressBar)convertView.findViewById(R.id.progress_bar);
             tempBarre=holder.barre;
             holder.fondEcran=(AbsoluteLayout)convertView.findViewById(R.id.affichage);

             updateSongList();
             convertView.getTag();


             play(convertView);
             holder.barre.setMax(mMediaPlayer.getDuration());
             holder.barre.setProgress(0);


                 //updateTime();

                 holder.playButton.setOnClickListener(new OnClickListener() {

                         public void onClick(View view) {


                             view.getTag();

                         currentPosition=position;    
                           etatLecteur(holder);
                           holder.fondEcran.setBackgroundColor(Color.BLUE);
                           calculProgressBar(holder);

          }});






          } else {

              holder = (ViewHolder) convertView.getTag();
          }

         holder.nomFile.setText(songs.get(position));
          File home=new File(MEDIA_PATH);
          Date dateModif=new Date(home.lastModified());
          java.text.DateFormat conversion= new SimpleDateFormat("HH:mm");

          Log.v(TAG, "date " + dateModif);
          holder.date.setText(conversion.format(dateModif));
          holder.barre.setTag(position);
          holder.playButton.setTag(position);
          return convertView;

      }

      public   class ViewHolder {

          ImageButton playButton;
          ProgressBar barre;
          TextView nomFile;
          TextView date;

          AbsoluteLayout fondEcran;

      }

merci de votre aide

[ulquiorra]

un petit up car j ' ai essaye aujourd hui encore , sans succes

Merci ^^