Android-ListView的圖文列表顯示
阿新 • • 發佈：2018-12-30
目標效果：
ListView如果內容過多，可以滑動螢幕來顯示，並且點選某一行可使用吐司方法彈出對應的水果名字。
1.新建專案，新建entity實體類包，包中建儲存每行水果資訊的Fruit類。
Fruit.java頁面：
2.在activity_main.xml頁面新增ListView控制元件，用於顯示所有的水果即水果名稱。 activity_main.xml頁面：package com.example.entity; public class Fruit { private int imageId; //使用id鎖定水果圖片 private String imageName; //對應的水果名字 public Fruit(int imageId, String imageName) { super(); this.imageId = imageId; this.imageName = imageName; } public int getImageId() { return imageId; } public void setImageId(int imageId) { this.imageId = imageId; } public String getImageName() { return imageName; } public void setImageName(String imageName) { this.imageName = imageName; } }
3.一個ListView中有多行資訊，每行資訊可以看成一個LinearLayout子佈局，子佈局中有兩個控制元件ImageView和TextView，按照水平排列。 listview_item.xml頁面：<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <ListView android:id="@+id/lvFruits" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" > </ListView> </RelativeLayout>
<?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" android:orientation="horizontal" > <ImageView android:id="@+id/ivImage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" /> <TextView android:id="@+id/tvName" android:layout_marginLeft="10dp" android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView" /> </LinearLayout>
4.新建adaptor包，包中建FruitAdaopter.java類，新增介面卡，連線佈局和資料。 FruitAdaopter.java頁面：
package com.example.adapter;
import java.util.List;
import com.example.entity.Fruit;
import com.example.listview.R;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
public class FruitAdaoper extends ArrayAdapter<Fruit> { // 介面卡，泛型表示想要適配的資料型別
private int resourceId;
public FruitAdaoper(Context context, int textViewResourceId,
List<Fruit> objects) { // 第一個引數是上下文環境，第二個引數是每一項的子佈局，第三個引數是資料
super(context, textViewResourceId, objects);
resourceId = textViewResourceId; //獲取子佈局
}
@Override //getView方法在每個子項被滾動到螢幕內的時候都會被呼叫，每次都將佈局重新載入一邊
public View getView(int position, View convertView, ViewGroup parent) {//第一個引數表示位置，第二個引數表示快取佈局，第三個表示繫結的view物件
View view;
ViewHolder viewHolder; //例項ViewHolder，當程式第一次執行，儲存獲取到的控制元件，提高效率
if(convertView==null){
viewHolder=new ViewHolder();
view = LayoutInflater.from(getContext()).inflate(//convertView為空代表佈局沒有被載入過，即getView方法沒有被呼叫過，需要建立
resourceId, null); // 得到子佈局，非固定的，和子佈局id有關
viewHolder.ivImage = (ImageView) view.findViewById(R.id.ivImage);//獲取控制元件,只需要呼叫一遍，呼叫過後儲存在ViewHolder中
viewHolder.tvName = (TextView) view.findViewById(R.id.tvName); //獲取控制元件
view.setTag(viewHolder);
}else{
view=convertView; //convertView不為空代表佈局被載入過，只需要將convertView的值取出即可
viewHolder=(ViewHolder) view.getTag();
}
Fruit fruit = getItem(position);//例項指定位置的水果
viewHolder.ivImage.setImageResource(fruit.getImageId());//獲得指定位置水果的id
viewHolder.tvName.setText(fruit.getImageName()); //獲得指定位置水果的名字
return view;
}
}
class ViewHolder{ //當佈局載入過後，儲存獲取到的控制元件資訊。
ImageView ivImage;
TextView tvName;
}
5.在MainActivity.java頁面初始化資料資訊，並新增點選每一行的點選事件。 MainActivity.java頁面：
package com.example.listview;
import java.util.ArrayList;
import java.util.List;
import com.example.adapter.FruitAdaoper;
import com.example.entity.Fruit;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;
public class MainActivity extends Activity {
private ListView lvFruits;
private List<Fruit> fruitList = new ArrayList<Fruit>(); //建立集合儲存水果資訊
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
lvFruits = (ListView) findViewById(R.id.lvFruits); //獲得子佈局
getData();
FruitAdaoper fruitAdapter = new FruitAdaoper(this,
R.layout.listview_item, fruitList); //關聯資料和子佈局
lvFruits.setAdapter(fruitAdapter); //繫結資料和介面卡
lvFruits.setOnItemClickListener(new OnItemClickListener() { //點選每一行的點選事件
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int position,
long id) {
Fruit fruit=fruitList.get(position); //獲取點選的那一行
Toast.makeText(MainActivity.this,fruit.getImageName(),Toast.LENGTH_LONG).show();//使用吐司輸出點選那行水果的名字
}
});
}
private void getData() {
int[] imageIds = { R.drawable.apple_pic, R.drawable.banana_pic,
R.drawable.cherry_pic, R.drawable.grape_pic,
R.drawable.mango_pic, R.drawable.orange_pic,
R.drawable.pear_pic, R.drawable.pineapple_pic,
R.drawable.strawberry_pic, R.drawable.watermelon_pic };
String[] names = { "蘋果", "香蕉", "櫻桃", "葡萄", "芒果", "橘子", "梨", "菠蘿", "草莓",
"西瓜" };
for(int i=0;i<imageIds.length;i++){ //將資料新增到集合中
fruitList.add(new Fruit(imageIds[i],names[i])); //將圖片id和對應的name儲存到一起
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
6.執行就可以出現目標效果了。 7.注意FruitAdaopter.java類中的getView方法在每個子項被滾動到螢幕內的時候都會被呼叫，每次都將佈局重新載入一邊，所以為了提高效率可以進行判斷，如果程式執行過一次就將佈局儲存在引數convertView中。 8.同樣，getView中的獲取控制元件id如果每次執行都要執行，會降低效率，所以也需要定義ViewHolder類儲存獲取的控制元件資訊，當第一次執行時執行findViewById()後，將所有的控制元件資訊儲存到例項的ViewHolder中，後邊每次進行呼叫即可。