Android列表显示，利用ListView和自定义适配器来构建自定义列表，另也可以设置列表项点击事件监听器

超、凢脫俗 2023-10-09 09:46 90阅读 0赞

原ArrayAdapter适配器列表样式只支持TextView,要自定义列表项,因此自定义一个适配器 :  
**1.创建自定义类  
2.创建这自定义类的ArrayList数组  
3.创建自定义适配器, 重写适配器构造函数将该数组作为输入参数 ；重写自定义适配器中的getView() 方法  
4.创建自定义XML列表布局  
5.ListView设置其适配器**

以Miwok项目为例, 具体项目Example见[http://github.com/uxk0587/miwok.git][http_github.com_uxk0587_miwok.git]

### 1.创建自定义类 ###

//自定义一个类
    public class Word { 
        private String miwokTranslation;
        private String defaultTranslation;
        private int imageResourceId;
        private int audioResourceId;
    
        public Word(String miwokTranslation, String defaultTranslation){ 
            this.miwokTranslation = miwokTranslation;
            this.defaultTranslation = defaultTranslation;
        }
    
        public Word(String miwokTranslation, String defaultTranslation, int audioResourceId){ 
            this.miwokTranslation = miwokTranslation;
            this.defaultTranslation = defaultTranslation;
            this.audioResourceId =audioResourceId;
        }
    
        public Word(String miwokTranslation, String defaultTranslation, int imageResourceId, int audioResourceId) { 
            this.miwokTranslation = miwokTranslation;
            this.defaultTranslation = defaultTranslation;
            this.imageResourceId = imageResourceId;
            this.audioResourceId = audioResourceId;
        }
    
        public String getMiwokTranslation(){ 
            return miwokTranslation;
        }
    
        public String getDefaultTranslation(){ 
            return defaultTranslation;
        }
    
        public int getImageResourceId(){ 
            return imageResourceId;
        }
    
        public int getAudioResourceId(){ 
            return audioResourceId;
        }
    
        public boolean checkImageResource(){ 
            if (imageResourceId == 0) { 
                return false;
            } else
                return true;
        }
    }

### 2.创建这个自定义类的ArrayList数组 ###

ArrayList<Word> words = new ArrayList<Word>();
    words.add( new Word("one", "lutti"))；

**为什么用ArrayList？这里对比一下数组和ArrayList的对比**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTY2MDQxNA_size_16_color_FFFFFF_t_70]  
注意数组列表ArrayList只能存储对象数据类型而不能放原始数据类型（例如整型、布尔型）如果想放整型数据等原始数据类型需要用到对象封装类，是原始数据类型变成对象数据类型。例如是用`ArrayList< Integer>`而不是用`ArrayList< int>`

### 3.创建自定义适配器&修改自定义适配器中的getView() ###

创建一WordApater类, 继承自ArrayAdapter<Word>  
自定义constructor 将Word ArrayList数组作为输入参数

这里在WordAdapter中设置了列表项点击事件监听器，这种方法虽然也可以，但是会占用较多内存资源。**建议在NumbersAcitivity中直接用listView.setOnItemOnclickListener的方法来设置列表项点击事件监听器**

public class WordAdapter extends ArrayAdapter<Word> { 
    
        /** * This is our own custom constructor (it doesn't mirror a superclass constructor). * The context is used to inflate the layout file, and the list is the data we want * to populate into the lists. * * @param context The current context. Used to inflate the layout file. * @param words A List of word objects to display in a list */
        public WordAdapter(Activity context, ArrayList<Word> words){ 
            super(context, 0, words);
        }
    
        /** * Provides a view for an AdapterView (ListView, GridView, etc.) * * @param position The position in the list of data that should be displayed in the list item view. * @param convertView The recycled view to populate. * @param parent The parent ViewGroup that is used for inflation. * @return The View for the position in the AdapterView. */
        @NonNull
        @Override
        public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) { 
            //return super.getView(position, convertView, parent);
    
            // Check if the existing view is being reuse,otherwise inflate the view
            // (if convertView is null,there is no view to reuse, In this case we will need to inflate
            // one from the list item layout from scratch)
            View listItemView = convertView;
            if(listItemView == null){ 
                //LayoutInflater is an abstract class,and have no static method :inflate(),so
                //we should use LayoutInflater.from(getContext()) method to obtain a LayoutInflater
                //from the given context
                //
                //The third param false, because we don't want to attach the list item view to the parent list view.
                //The'getContext()' parameter is defined in ArrayAdapter.
                listItemView = LayoutInflater.from(getContext()).inflate(R.layout.list_item, parent, false);
            }
            //Get the object located at this position in the list. getItem() method from the super class ArrayAdapter
            Word currentWord =  getItem(position);
    
            //Find the TextView in the list_item.xml layout with the id.
            //ArrayAdapter don't have the method of 'findViewById()',
            //so must have to use the method of 'View.findViewById()' to find the TextView
            TextView defaultTextView =  (TextView)listItemView.findViewById(R.id.default_text_view);
            defaultTextView.setText(currentWord.getDefaultTranslation());
    
            //Find the TextView in the list_item.xml layout with the id
            TextView miwokTextView = (TextView)listItemView.findViewById(R.id.miwok_text_view);
            miwokTextView.setText(currentWord.getMiwokTranslation());
    
            if (currentWord.checkImageResource()) { 
                //Find the ImageView in the list_item.xml layout with the id
                ImageView imageView = (ImageView)listItemView.findViewById(R.id.image_view);
                imageView.setImageResource(currentWord.getImageResourceId());
            }else{ 
                ImageView imageView = (ImageView)listItemView.findViewById(R.id.image_view);
                imageView.setVisibility(View.GONE);
            }
    
            RelativeLayout textLinearLayout = (RelativeLayout)listItemView.findViewById(R.id.text_relative_layout);
            textLinearLayout.setBackgroundResource(R.color.category_numbers);
    		//由于下面匿名内部类会用到外部类的变量,外部类被引用的变量必须用final
            final MediaPlayer mediaPlayer = MediaPlayer.create(getContext(), currentWord.getAudioResourceId());
            //设置点击事件监听器
            //Instantiate the View.OnclickListener interface
            //by using the way of creating anonymous class to set on a Listener
            textLinearLayout.setOnClickListener(new View.OnClickListener(){ 
                public void onClick(View view){ 
                    Toast.makeText(view.getContext(), "Play", Toast.LENGTH_SHORT).show();
                    mediaPlayer.start();
                }
            });
    
    
            return listItemView;
        }
    }

### 创建自定义XML列表布局list\_item.xml ###

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tool="http://schemas.android.com/tools" android:id="@+id/list_item" android:layout_width="match_parent" android:layout_height="wrap_content" android:minHeight="@dimen/list_item_height" android:orientation="horizontal">
    
        <ImageView android:layout_width="@dimen/list_item_height" android:layout_height="@dimen/list_item_height" android:id="@+id/image_view" android:background="@color/tan_background" android:src="@mipmap/ic_launcher"/>
    
        <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="@color/category_numbers" android:id="@+id/text_relative_layout" android:paddingLeft="16dp" android:paddingTop="16dp">
    
            <TextView android:id="@+id/miwok_text_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="18sp" android:textColor="@android:color/white" android:textStyle="bold" tool:text="lutti" />
    
            <TextView android:id="@+id/default_text_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="@android:color/white" android:layout_below="@id/miwok_text_view" android:textSize="18sp" tool:text="one" />
    
        </RelativeLayout>
    
    
    </LinearLayout>

### ListView设置其适配器 ###

//实例化自定义适配器
            WordAdapter wordAdapter = new WordAdapter(this, words, R.color.category_numbers);
            
            ListView listView  = (ListView)findViewById(R.id.numbers_list);
            //listview设置适配器
            listView.setAdapter(wordAdapter);

[http_github.com_uxk0587_miwok.git]: http://github.com/uxk0587/miwok.git
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTY2MDQxNA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191108104458578.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTY2MDQxNA==,size_16,color_FFFFFF,t_70