ListView con diseño de filas personalizado - Android

Question

Me gustaría crear un Activity que contenga una lista en la que las filas tengan un diseño personalizado. Por eso hemos creado el archivo list_entry_layout.xml definir el diseño que cada fila de la lista debe tener (en mi ejemplo cada fila debe tener un título y un resumen):

<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" > 

    <TextView 
     android:id="@+id/list_entry_title" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:textSize="20dp" > 
    </TextView> 

    <TextView 
     android:id="@+id/list_entry_summary" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:textSize="10dp" > 
    </TextView> 

</LinearLayout> 

Mi problema es que no sé cómo agregar los datos a cada fila en la clase ListActivity. Con el siguiente fragmento de código que soy capaz de añadir los títulos de cada fila:

public class MyActivity extends ListActivity 
{ 

    @Override 
    protected void onCreate(Bundle savedInstanceState) 
    { 

     super.onCreate(savedInstanceState); 
     setContentView(R.layout.list_activity); 

     ListView listView = (ListView) findViewById(android.R.id.list); 
     String[] values = new String[] { "Android", "iPhone", "WindowsMobile", 
      "Blackberry", "WebOS", "Ubuntu", "Windows7", "Max OS X", 
      "Linux", "OS/2" }; 

     ArrayAdapter<String> titleAdapter = new ArrayAdapter<String>(this, R.layout.list_entry_layout, R.id.list_entry_title, values); 
     // Assign adapter to ListView 
     listView.setAdapter(titleAdapter); 

    } 
} 

Para añadir también el resumen de cómo debo hacer?

Si añado este código habré los resúmenes visualizados, y no los títulos:

String[] values = new String[] { "Android_summary", "iPhone_summary", "WindowsMobile_summary", "Blackberry_summary", "WebOS_summary", "Ubuntu_summary", "Windows7_summary", "Max OS X_summary", "Linux_summary", "OS/2_summary" }; 
ArrayAdapter<String> summaryAdapter = new ArrayAdapter<String>(this, R.layout.list_entry_layout, R.id.list_entry_summary, values); 
// Assign adapter to ListView 
listView.setAdapter(summaryAdapter); 

El siguiente es el resultado que me gustaría obtener:

Answer 1

Es necesario crear su propia ArrayAdapter:

private class YourAdapter extends ArrayAdapter<String> { 
    // do some work 
} 

entonces usted debe especificar cómo se verá su fila con XML, precisamente por su objetivo, recomiendo que utilice RelativeLayout y puede se parece a esto:

fila .xml

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"> 

    <TextView 
     android:id="@+id/name" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentLeft="true" 
     /> 

    <TextView 
     android:id="@+id/email" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentLeft="true" 
     android:layout_below="@id/name" 
     /> 

</RelativeLayout> 

Entonces en YourAdapter usted tiene que fijar súper Constuctor:

public YourAdapter() { 
    super(YourActivity.this, R.layout.row, data); 
} 

Entonces, para personalizar los datos en ListView aplicación + más efectiva te recomiendo anular getView() método y también se utiliza Holder design pattern.

@Override 
public View getView(int position, View convertView, ViewGroup parent) {   
    ViewHolder holder = null; 
    LayoutInflater inflater = getLayoutInflater(); 
     if (convertView == null) { 
     convertView = inflater.inflate(R.layout.row, null, false); 
     holder = new ViewHolder(convertView); 
     convertView.setTag(holder); 
     } 
     else { 
     holder = (ViewHolder) convertView.getTag(); 
     }  
     holder.getUpperText().setText(dataSource[position]); 
     holder.getLowerText().setText(dataSource[position]); 

    return convertView; 
} 

Finalmente solo inicializar ListView y establecer Adapter:

ListView list = (ListView) findViewById(R.id.list); 
list.setAdapter(new YourAdapter()); 

Nota:Design pattern Holder representa objeto arbitrario que contiene widgets hijos de cada fila, por lo que necesita para encontrar sólo una vez y luego con Holder objeto, siempre tendrá acceso a ellos.

Implementación de Holder lata tiene el siguiente aspecto:

public class ViewHolder { 
    private View row; 
    private TextView upperText = null, lowerText = null; 

    public ViewHolder(View row) { 
     this.row = row; 
    } 

    public TextView getUpperText() { 
     if (this.upperText == null) { 
     this.upperText = (TextView) inView.findViewById(R.id.someId); 
     } 
     return this.upperText; 
    } 

    public TextView getLowerText() { 
     if (this.lowerText == null) { 
     this.lowerText = (TextView) inView.findViewById(R.id.someId); 
     } 
     return this.lowerText; 
    } 
} 

espero que ayude.

Answer 2

Crea tu propio ArrayAdapter.
Ver por ejemplo http://www.ezzylearning.com/tutorial.aspx?tid=1763429.

Answer 3

Puede lograr este diseño utilizando android.R.layout.simple_list_item_2 en lugar de crear un diseño de fila personalizado.

De todas formas, si quieres ir con un enfoque de diseño de filas personalizado, entonces tengo un fragmento listo para ti.

Aquí tienes.

SampleActivity.java

package org.sample; 

import java.util.ArrayList; 

import android.app.ListActivity; 
import android.content.Context; 
import android.os.Bundle; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.BaseAdapter; 
import android.widget.TextView; 
import android.widget.TwoLineListItem; 

public class SampleActivity extends ListActivity { 

    @Override 
    public void onCreate(Bundle icicle) { 
     super.onCreate(icicle); 

     Mobile mobile; 

     ArrayList<Mobile> mobiles new ArrayList<Mobile>(); 

     mobile = new Mobile(); 
     mobile.setName("Android"); 
     mobile.setSummary("summary goes here"); 
     mobiles.add(mobile); 

     mobile = new Mobile(); 
     mobile.setName("Blackberry"); 
     mobile.setSummary("summary goes here"); 
     mobiles.add(mobile); 

     setListAdapter(new MyAdapter(this, mobiles)); 
    } 

} 

Mobile.java

class Mobile { 
    String name; 
    String summary; 

    public String getName() { 
     return name; 
    } 

    public void setName(String name) { 
     this.name = name; 
    } 

    public String getSummary() { 
     return summary; 
    } 

    public void setSummary(String summary) { 
     this.summary = summary; 
    } 

} 

MyAdapter.java

class MyAdapter extends BaseAdapter { 

    private Context context; 
    private ArrayList<Mobile> mobiles; 

    public MyAdapter(Context context, ArrayList<Mobile> mobiles) { 
     this.context = context; 
     this.mobiles = mobiles; 
    } 

    @Override 
    public int getCount() { 
     return mobiles.size(); 
    } 

    @Override 
    public Object getItem(int position) { 
     return mobiles.get(position); 
    } 

    @Override 
    public long getItemId(int position) { 
     return 0; 
    } 

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


     if (convertView == null) { 
      LayoutInflater inflater = (LayoutInflater) context 
        .getSystemService(Context.LAYOUT_INFLATER_SERVICE); 
      convertView = (View) inflater.inflate(
        R.layout.list_entry_layout, null); 
     } 

     TextView name = (TextView)convertView.findViewById(R.id.list_entry_title); 
     TextView summary=(TextView)convertView.findViewById(R.id.list_entry_summary); 

     name.setText(mobiles.get(position).getName()); 
     summary.setText(mobiles.get(position).getSummary()); 

     return convertView; 
    } 
}