Статьи

Пользовательский ListView в Android Tutorial

Декабрь 24, 2017

Теперь мы рассмотрим создание пользовательского представления списка — пользовательского макета, пользовательского макета строки и того, как мы привязываем пользовательский держатель данных к этим макетам. (см. предыдущую статью о простом представлении списка для ознакомления с основами представления списка).

Итак, здесь мы снова начнем с расширения ListActivity. 

public class MyCustomListView extends ListActivity {

Теперь давайте создадим настраиваемое представление списка в файле XML — custom_list_view.xml . Это будет установлено с помощью setContentView () в методе onCreate () : 

    <ListView android:id="@id/android:list"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#000fff"
    android:layout_weight="2"
    android:drawSelectorOnTop="false">
    </ListView>
    <TextView android:id="@id/android:empty"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#FFff00"
    android:text="No data"
    />

Обратите внимание, что он должен содержать объект ListView с
android: id = «@ id / android: list».

Я также объявил TextView, который должен быть в списке, если список пуст, объявив с помощью
android: id = «@ id / android: empty «

Теперь мы объявим, как должна отображаться каждая строка в этом ListView, создав новый xml-файл —
custom_row_view.xml.

Я планирую иметь 3 элемента один под другим в каждой строке. Итак, вот декларация для того же:

    <TextView android:id="@+id/text1"
    android:textSize="16sp"
    android:textStyle="bold"
    android:textColor="#FFFF00"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"/>
    <TextView android:id="@+id/text2"
    android:textSize="12sp"
    android:textStyle="bold"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"/>
    <TextView android:id="@+id/text3"
    android:typeface="sans"
    android:textSize="14sp"
    android:textStyle="italic"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

Итак, как мне связать все это вместе? Класс
MyCustomListView , макет списка и макет строки. Как и в предыдущем примере, нам нужен
объект ListAdpater . Здесь я планирую использовать
SimpleAdpater, предоставленный SDK.

Адаптер ожидает контекст, макет и дескриптор данных, которые должны отображаться. Итак, давайте создадим список данных в ArrayList из HashMaps. Таким образом, HashMap может хранить любое количество данных.

    static final ArrayList<HashMap<String,String>> list =

    new ArrayList<HashMap<String,String>>();

Это просто объявление объекта списка. Нам нужно заполнить его данными. Наш пользовательский макет строки предполагает, что каждая строка будет иметь 3 цены данных …

Этот список заполняется методом, как показано ниже, с 3 клавишами «
перо» , «
цена» и «
цвет» :
 

private void populateList() {

    HashMap<String,String>  temp = new HashMap<String,String>();
    temp.put("pen","MONT Blanc");
    temp.put("price", "200.00$");
    temp.put("color", "Silver, Grey, Black");
    list.add(temp);
    HashMap<String,String> temp1 = new HashMap<String,String>();
    temp1.put("pen","Gucci");
    temp1.put("price", "300.00$");
    temp1.put("color", "Gold, Red");
    list.add(temp1);
    HashMap<String,String> temp2 = new HashMap<String,String>();
    temp2.put("pen","Parker");
    temp2.put("price", "400.00$");
    temp2.put("color", "Gold, Blue");
    list.add(temp2);
    HashMap<String,String> temp3 = new HashMap<String,String>();
    temp3.put("pen","Sailor");
    temp3.put("price", "500.00$");
    temp3.put("color", "Silver");
    list.add(temp3);
    HashMap<String,String> temp4 = new HashMap<String,String>();
    temp4.put("pen","Porsche Design");
    temp4.put("price", "600.00$");
    temp4.put("color", "Silver, Grey, Red");
    list.add(temp4);
    }

Итак, как нам связать данные с макетом строки и макетом списка. Именно в этом простом куске кода в
OnCreate () методе
MyCustomListView класса:

    setContentView(R.layout.custom_list_view);

    SimpleAdapter adapter = new SimpleAdapter(
    this,
    list,
    R.layout.custom_row_view,
    new String[] {"pen","price","color"},
    new int[] {R.id.text1,R.id.text2, R.id.text3}

    );

    populateList();


    setListAdapter(adapter);

Здесь мы установили представление по умолчанию на custom_list_view.

Затем, используя
SimpleAdapter , мы установили контекст, список, содержащий данные для отображения,
custom_row_view , ключи, по которым данные должны выбираться из списка, TextView, в которые должны отображаться соответствующие данные.

Теперь выполните, и у вас будет собственный список. Вот что вы увидите:

ПРИМЕЧАНИЕ: если вы не заполните список какими-либо данными, вы увидите другое представление — пустое представление списка, которое мы определили в
custom_list_view.xml.

Вы можете
скачать полный исходный код для этого примера
здесь .

Добавлено позже:

Основываясь на приведенном ниже вопросе, я хотел бы добавить, что элемент можно щелкнуть даже в этом настраиваемом списке и даже зафиксировать его путем переопределения метода onListItemClick () в классе ListActivity.

Вот фрагмент кода, который вы можете добавить к моему образцу, если вы загрузили его, и вы увидите сообщение о том, что было выбрано:

protected void onListItemClick(ListView l, View v, int position, long id) {

    super.onListItemClick(l, v, position, id);
    Object o = this.getListAdapter().getItem(position);
    String pen = o.toString();
    Toast.makeText(this, "You have chosen the pen: " + " " + pen, Toast.LENGTH_LONG).show();
}

Наслаждаться….

28
Share: