定制ListView的界面(使用自定义的列表项布局,一边显示水果图片,一边显示水果文字)以及ListView的点击事件
只能顯示一段文本的ListView實在是太過單調,我們現在就來對ListView的界面進行定制,讓它可以顯示更加豐富的內容。
首先,我們需要準備好一組水果圖片,分別對應上面提供的每一種水果,待會我們要讓這些水果名稱的旁邊都有一個圖樣。
?
接著定義一個實體類,作為ListView適配器的適配類型。新建類Fruit,代碼如下:
package com.example.administrator.activitydemo;public class Fruit {private String name;private int imageId;public Fruit(String name, int imageId) {this.name = name;this.imageId = imageId;}public String getName() {return name;}public int getImageId() {return imageId;} }Fruit類中只有兩個字段,name表示水果的名字,imageId表示水果對應圖片的資源id。
然后需要為ListView的子項指定一個我們自定義的布局,在layout目錄下新建fruit_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"><ImageViewandroid:id="@+id/iv_name"android:layout_width="wrap_content"android:layout_height="wrap_content" /><TextViewandroid:id="@+id/tv_name"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:layout_marginLeft="10dp" /></LinearLayout>在這個布局中,我們定義了一個ImageView用于顯示水果的圖片,又定義了一個TextView用于顯示水果的名稱,并讓TextView在垂直方向上居中顯示。
接下來需要創建一個自定義的適配器,這個適配器繼承自ArrayAdapter,并將泛型指定為Fruit類。新建FruitAdapter,代碼如下所示:
package com.example.administrator.activitydemo;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;import java.util.List;public class FruitAdapter extends ArrayAdapter<Fruit> {private int resourceId;private List<Fruit> list;public FruitAdapter(Context context, int textViewResourceId, List<Fruit> list) {super(context, textViewResourceId, list);this.resourceId = textViewResourceId;this.list = list;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {Fruit fruit = list.get(position);//獲取當前項的Fruit實例View view = LayoutInflater.from(getContext()).inflate(resourceId, parent, false);ImageView iv_name = (ImageView) view.findViewById(R.id.iv_name);//初始化圖片TextView tv_name = (TextView) view.findViewById(R.id.tv_name);//初始化文字iv_name.setImageResource(fruit.getImageId());//為ImageView設置圖片tv_name.setText("" + fruit.getName());//為TextView設置文字return view;} }FruitAdapter重寫了父類的一組構造函數,用于將上下文、ListView子項布局的id和數據都傳遞進來。另外又重寫了getView()方法,這個方法在每個子項被滾動到屏幕內的時候會被調用。在getView()方法中,首先通過get()方法獲得到當前項的Fruit實例,然后使用LayoutInflater來為這個子項加載我們傳入的布局。
MainActivity.java代碼:
package com.example.administrator.activitydemo;import android.app.ProgressDialog; import android.content.DialogInterface; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v7.app.AlertDialog; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.ArrayAdapter; import android.widget.Button; import android.widget.ListView; import android.widget.Toast;import java.util.ArrayList; import java.util.List;public class MainActivity extends AppCompatActivity {private ListView listView;private String[] data = {"Apple", "Banana", "Orange", "Watermelon","Pear", "Grape", "Pineapple", "Strawberry", "Cherry", "Mango","Apple", "Banana", "Orange", "Watermelon","Pear", "Grape", "Pineapple", "Strawberry", "Cherry", "Mango"};private int[] res = {R.drawable.apple, R.drawable.banana, R.drawable.orange, R.drawable.watermelon,R.drawable.pear, R.drawable.grape, R.drawable.pineapple, R.drawable.strawberry, R.drawable.cherry, R.drawable.mango,R.drawable.apple, R.drawable.banana, R.drawable.orange, R.drawable.watermelon,R.drawable.pear, R.drawable.grape, R.drawable.pineapple, R.drawable.strawberry, R.drawable.cherry, R.drawable.mango};private List<Fruit> fruitList;@Overrideprotected void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initView();//初始化UI控件initData();//初始化數據}private void initView() {listView = (ListView) findViewById(R.id.listView);}private void initData() {initFruits();//初始化水果數據FruitAdapter adapter = new FruitAdapter(MainActivity.this, R.layout.fruit_item, fruitList);listView.setAdapter(adapter);}private void initFruits() {fruitList = new ArrayList<>();for (int i = 0; i < data.length; i++) {Fruit fruit = new Fruit(data[i], res[i]);fruitList.add(fruit);}}}運行程序,效果圖:
是不是稍微好看了一點。
ListView的點擊事件:
修改MainActivity.java中的代碼:
package com.example.administrator.activitydemo;import android.app.ProgressDialog; import android.content.DialogInterface; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v7.app.AlertDialog; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.Button; import android.widget.ListView; import android.widget.Toast;import java.util.ArrayList; import java.util.List;public class MainActivity extends AppCompatActivity {private ListView listView;private String[] data = {"Apple", "Banana", "Orange", "Watermelon","Pear", "Grape", "Pineapple", "Strawberry", "Cherry", "Mango","Apple", "Banana", "Orange", "Watermelon","Pear", "Grape", "Pineapple", "Strawberry", "Cherry", "Mango"};private int[] res = {R.drawable.apple, R.drawable.banana, R.drawable.orange, R.drawable.watermelon,R.drawable.pear, R.drawable.grape, R.drawable.pineapple, R.drawable.strawberry, R.drawable.cherry, R.drawable.mango,R.drawable.apple, R.drawable.banana, R.drawable.orange, R.drawable.watermelon,R.drawable.pear, R.drawable.grape, R.drawable.pineapple, R.drawable.strawberry, R.drawable.cherry, R.drawable.mango};private List<Fruit> fruitList;@Overrideprotected void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initView();//初始化UI控件initData();//初始化數據}private void initView() {listView = (ListView) findViewById(R.id.listView);}private void initData() {initFruits();//初始化水果數據FruitAdapter adapter = new FruitAdapter(MainActivity.this, R.layout.fruit_item, fruitList);listView.setAdapter(adapter);}private void initFruits() {fruitList = new ArrayList<>();for (int i = 0; i < data.length; i++) {Fruit fruit = new Fruit(data[i], res[i]);fruitList.add(fruit);}}@Overrideprotected void onResume() {super.onResume();listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?> parent, View view, int position, long id) {Fruit fruit = fruitList.get(position);Toast.makeText(MainActivity.this, "" + fruit.getName(), Toast.LENGTH_SHORT).show();}});} }效果圖:
總結
以上是生活随笔為你收集整理的定制ListView的界面(使用自定义的列表项布局,一边显示水果图片,一边显示水果文字)以及ListView的点击事件的全部內容,希望文章能夠幫你解決所遇到的問題。
 
                            
                        - 上一篇: ListView控件的基本使用(方式一:
- 下一篇: 提升ListView的运行效率
