溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Android UI 中的 ListView列表控件的示例

發(fā)布時(shí)間：2020-10-10 06:28:52 來(lái)源：腳本之家 閱讀：192 作者：deniro 欄目：移動(dòng)開(kāi)發(fā)

當(dāng)程序中有大量的數(shù)據(jù)需要展示時(shí)，就需要用到 ListView 啦。ListView 允許用戶通過(guò)手指上下滑動(dòng)的方式將屏幕外的數(shù)據(jù)滾動(dòng)到屏幕內(nèi)，同時(shí)屏幕上原有的數(shù)據(jù)則會(huì)滾動(dòng)出屏幕。

1 基本用法

布局文件中加入 ListView：

<?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"
  >

  <ListView
    android:id="@+id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  </ListView>

</LinearLayout>

這里將寬度和高度都設(shè)置為 match_parent，這樣 ListView 就會(huì)占據(jù)了整個(gè)布局的空間。

活動(dòng)代碼：

public class MainActivity extends AppCompatActivity {

  private String[] data = {"暹羅貓", "布偶貓", "折耳貓", "短毛貓", "波斯貓", "藍(lán)貓", "森林貓", "孟買(mǎi)貓","緬因貓","埃及貓","伯曼貓","緬甸貓","新加坡貓","美國(guó)短尾貓","巴厘貓"};

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

    ArrayAdapter<String> adapter = new ArrayAdapter<String>(
        MainActivity.this, android.R.layout.simple_list_item_1, data);
    ((ListView) findViewById(R.id.list)).setAdapter(adapter);
  }
}

ListView 是用于展示大量數(shù)據(jù)的，這些數(shù)據(jù)可以一般是來(lái)源于服務(wù)端，實(shí)際是由具體的應(yīng)用場(chǎng)景來(lái)決定。這里我們就使用了一個(gè)簡(jiǎn)單的 data 數(shù)組來(lái)模擬。

數(shù)組中的數(shù)據(jù)需要借助適配器來(lái)傳遞。Android 中提供了很多適配器的實(shí)現(xiàn)類(lèi)，其中最好用的就是 ArrayAdapter。它可以通過(guò)泛型來(lái)指定要適配的數(shù)據(jù)類(lèi)型，然后在構(gòu)造函數(shù)中把要適配的數(shù)據(jù)傳入即可。ArrayAdapter 有多個(gè)構(gòu)造函數(shù)的重載，我們應(yīng)該根據(jù)實(shí)際情況選擇最合適的一種。

我們使用了 android.R.layout.simple_list_item_1作為 ListView 子項(xiàng)布局的 id，這是一個(gè) Android內(nèi)置的布局文件，里面只有一個(gè) TextView，用于顯示一段文本。

Android UI 中的 ListView列表控件的示例

ListView 示例

2 定制界面

現(xiàn)在讓 ListView 可以顯示更加豐富的內(nèi)容。

準(zhǔn)備好一組圖片，分別對(duì)應(yīng)上面提供的每一種貓，我們要讓這些貓的名稱(chēng)旁邊都有一張圖。

首先定義一個(gè)實(shí)體類(lèi)，作為 ListView 適配器的適配類(lèi)型：

public class Cat {
  /**
   * 名字
   */
  private String name;

  /**
   * 圖片 ID
   */
  private int imageId;

  public Cat(String name, int imageId) {
    this.name = name;
    this.imageId = imageId;
  }

  public String getName() {
    return name;
  }

  public int getImageId() {
    return imageId;
  }
}

我們?yōu)?ListView 的子項(xiàng)建一個(gè)自定義的布局，在 layout 目錄下新建 cat_item.xml ：

<?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="wrap_content">

  <ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

  <TextView
    android:id="@+id/name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:layout_marginLeft="10dp" />

</LinearLayout>

在這個(gè)布局中，我們定義了一個(gè) ImageView 用于顯示貓的圖片，又定義了一個(gè) TextView 用于顯示貓的名稱(chēng)。

接著創(chuàng)建一個(gè)自定義的適配器，這個(gè)適配器繼承 ArrayAdapter，并將泛型指定為 Cat 類(lèi)：

public class CatAdapter extends ArrayAdapter<Cat> {

  private int resourceId;

  public CatAdapter(Context context, int resource, List<Cat> objects) {
    super(context, resource, objects);
    resourceId = resource;
  }

  @NonNull
  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
    Cat cat = getItem(position);//獲取當(dāng)前項(xiàng)的實(shí)例
    View view = LayoutInflater.from(getContext()).inflate(resourceId, parent, false);
    ((ImageView) view.findViewById(R.id.image)).setImageResource(cat.getImageId());
    ((TextView) view.findViewById(R.id.name)).setText(cat.getName());
    return view;
  }
}

CatAdapter 重寫(xiě)了 ArrayAdapter 的一組構(gòu)造函數(shù)，用于將上下文、ListView 子項(xiàng)布局的 id 和數(shù)據(jù)都傳遞進(jìn)來(lái)。另外又重寫(xiě)了 getView() 方法，這個(gè)方法在每個(gè)子項(xiàng)被滾動(dòng)到屏幕內(nèi)時(shí)會(huì)被調(diào)用。在 getView 方法中，首先通過(guò) getItem() 方法得到當(dāng)前項(xiàng)的 Cat 實(shí)例，然后使用

LayoutInflater 來(lái)為這個(gè)子項(xiàng)加載傳入的布局。inflate() 的第三個(gè)參數(shù)表示不添加父布局，因?yàn)檫@個(gè) View 一旦有了父布局之后，就不能再添加到 ListView 中咯。

最后修改活動(dòng)類(lèi)的代碼：

private List<Cat> cats = new ArrayList<>();

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

  init();

  CatAdapter adapter = new CatAdapter(MainActivity.this, R.layout.cat_item, cats);
  ((ListView) findViewById(R.id.list)).setAdapter(adapter);
}

/**
 * 初始化數(shù)據(jù)
 */
private void init() {
  cats.add(new Cat("暹羅貓", R.drawable.cat1));
  cats.add(new Cat("布偶貓", R.drawable.cat2));
  cats.add(new Cat("蘇格蘭折耳貓", R.drawable.cat3));
  cats.add(new Cat("英國(guó)短毛貓", R.drawable.cat4));
  cats.add(new Cat("波斯貓", R.drawable.cat5));
  cats.add(new Cat("俄羅斯藍(lán)貓", R.drawable.cat6));
  cats.add(new Cat("美國(guó)短毛貓", R.drawable.cat7));
  cats.add(new Cat("異國(guó)短毛貓", R.drawable.cat8));
  cats.add(new Cat("挪威森林貓", R.drawable.cat9));
  cats.add(new Cat("孟買(mǎi)貓", R.drawable.cat10));
  cats.add(new Cat("緬因貓", R.drawable.cat11));
  cats.add(new Cat("埃及貓", R.drawable.cat12));
}

我們?cè)?onCreate() 方法中創(chuàng)建了 CatAdapter 對(duì)象，并將 CatAdapter 作為適配器傳遞給了ListView 。

Android UI 中的 ListView列表控件的示例

定制 ListView 界面

3 提升運(yùn)行效率

目前運(yùn)行效率是很低的，有以下原因：

  1. 在 CatAdapter 的 getView() 方法中，每次都將布局重新加載了一遍，當(dāng) ListView 快速滾動(dòng)時(shí)，就會(huì)成為性能的瓶頸。
  2. 每次在 getView() 方法中會(huì)調(diào)用一次 View 的 findViewById() 方法來(lái)獲取一次控件的實(shí)例。

我們可以這樣解決：

  1. getView() 方法中有一個(gè) convertView 參數(shù)，這個(gè)參數(shù)會(huì)將之前加載好的布局進(jìn)行緩存，以便之后可以進(jìn)行重用。
  2. 新增了一個(gè)內(nèi)部類(lèi) ViewHolder，緩存控件的實(shí)例。
public class CatAdapter extends ArrayAdapter<Cat> {

  private int resourceId;

  public CatAdapter(Context context, int resource, List<Cat> objects) {
    super(context, resource, objects);
    resourceId = resource;
  }

  @NonNull
  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
    Cat cat = getItem(position);//獲取當(dāng)前項(xiàng)的實(shí)例
    View view;
    ViewHolder viewHolder;

    if (convertView == null) {
      view = LayoutInflater.from(getContext()).inflate(resourceId, parent, false);
      viewHolder = new ViewHolder();
      viewHolder.image = (ImageView) view.findViewById(R.id.image);
      viewHolder.name = (TextView) view.findViewById(R.id.name);
      view.setTag(viewHolder);//保存
    } else {
      view = convertView;
      viewHolder = (ViewHolder) view.getTag();//取出
    }

    viewHolder.image.setImageResource(cat.getImageId());
    viewHolder.name.setText(cat.getName());
    return view;
  }

  private class ViewHolder {
    ImageView image;
    TextView name;
  }
}

4 點(diǎn)擊事件

我們來(lái)實(shí)踐在 ListView 中響應(yīng)用戶的點(diǎn)擊事件。為活動(dòng)類(lèi)的 onCreate 方法新增以下代碼：

listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
      Cat cat = cats.get(position);
      Toast.makeText(MainActivity.this, cat.getName(), Toast.LENGTH_SHORT).show();
    }
  });

這里為 ListView 注冊(cè)了一個(gè)監(jiān)聽(tīng)器，當(dāng)用戶點(diǎn)擊了 ListView 中的任一個(gè)子項(xiàng)時(shí)就會(huì)回調(diào)

onItemClick() 方法，在這個(gè)方法中可以通過(guò) position 參數(shù)判斷用戶點(diǎn)擊的是哪一個(gè)子項(xiàng)。

Android UI 中的 ListView列表控件的示例

點(diǎn)擊 ListView 子項(xiàng)

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手