Android自定义ListView并且适配

时间：2022-07-07 19:34:35

Android开发中经常使用到ListView来展示一些信息，最近做这部分的时候，总结一下，记录一下，不足之处逐步改进学习吧。

首先，ListView的使用，先声明一个ListView的布局。

<?xml version="1.0" encoding="utf-8"?>
<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/list_message"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </ListView>
</RelativeLayout>

listview 的效果图：

Android自定义ListView并且适配

这样的一个listview声明结束，我们要自定义listview中的item的布局，以及效果。listview_item的布局如下： 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="80dp">

        <RelativeLayout
            android:id="@+id/rela_msg_left"
            android:layout_width="wrap_content"
            android:layout_height="80dp"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="10dp">

            <ImageView
                android:id="@+id/img_msg_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@mipmap/ic_launcher" />

            <TextView
                android:id="@+id/text_type"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/img_msg_icon"
                android:layout_marginTop="3dp"
                android:text="呜呜呜" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/rela_msg_center"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="31dp"
            android:layout_toRightOf="@id/rela_msg_left">

            <RelativeLayout
                android:id="@+id/rela_msg_right_top"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/text_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="发发发"
                    android:textColor="#cccccc"
                    android:textSize="15sp" />

                <TextView
                    android:id="@+id/text_time"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:text="2016.05.01 08:00"
                    android:textSize="12sp" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/rela_msg_right_top"
                android:layout_marginTop="6dp">

                <TextView
                    android:id="@+id/text_content"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:text="发的撒可减肥大赛非打死你费瓦放大放大无缝"
                    android:textColor="#8e8e8e"
                    android:textSize="14sp" />
            </RelativeLayout>

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerInParent="true"
            android:layout_marginRight="13dp">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@mipmap/icon_right" />
        </RelativeLayout>
    </RelativeLayout>


</RelativeLayout>

item的布局效果：

Android自定义ListView并且适配

然后我们需要对这个item的上面的数据进行后台数据的更新等，以及图片的修改等，就需要用到我们的适配器了。

ListMsgAdapter：

public class ListMsgAdapter extends BaseAdapter {
private Context context;   //运行上下文
    private List<Map<String, Object>> listItems;    //评论回复集合
    private LayoutInflater listContainer;     //视图容器

    //自定义控件集合
    public final class ListItemView {
public ImageView img_icon;
        public TextView text_type, text_title, text_time, text_content;
        public ImageView img_right;
    }

public ListMsgAdapter(Context context, List<Map<String, Object>> listItems) {
this.context = context;
        listContainer = LayoutInflater.from(context);    //创建视图容器并设置上下文
        this.listItems = listItems;
    }

@Override
    public int getCount() {
return listItems.size();
    }

@Override
    public Object getItem(int position) {
return null;
    }

@Override
    public long getItemId(int position) {
return 0;
    }

@Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ListItemView listItemView = null;
        if (convertView == null) {
            listItemView = new ListItemView();
            //获取list_message_item布局文件的视图
            convertView = listContainer.inflate(R.layout.list_message_item, null);
            //获取控件对象
            listItemView.img_icon = (ImageView) convertView.findViewById(R.id.img_msg_icon);
            listItemView.text_type = (TextView) convertView.findViewById(R.id.text_type);
            listItemView.text_title = (TextView) convertView.findViewById(R.id.text_title);
            listItemView.text_time = (TextView) convertView.findViewById(R.id.text_time);
            listItemView.text_content = (TextView) convertView.findViewById(R.id.text_content);
            //设置控件集到convertView
            convertView.setTag(listItemView);
        } else {
            listItemView = (ListItemView) convertView.getTag();
        }
//设置文字和图片
//        listItemView.img_icon.setBackgroundResource((Integer) listItems.get(
//                position).get("image"));
        listItemView.text_title.setText((String) listItems.get(position)
                .get("title"));
//        listItemView.info.setText((String) listItems.get(position).get("info"));
        return convertView;
    }
}

关键部分就是上面的getView中的代码，将我们的控件集部署到convertView上以后，要对我们的文字和图片进行设置。这部分图片文字等的设置的话，我们需要在Activity的代码中进行初始化。

如下：

private ListView listView;
private ListMsgAdapter listMsgAdapter;
private List<Map<String, Object>> listItems;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_message);
    listView = (ListView) findViewById(R.id.list_message);
    listItems = getListItems();
    listMsgAdapter = new ListMsgAdapter(this, listItems);    //创建适配器
    listView.setAdapter(listMsgAdapter);
}

/**
 * 初始化商品信息
 */
 private List<Map<String, Object>> getListItems() {
        List<Map<String, Object>> listItems = new ArrayList<Map<String, Object>>();
        for(int i = 0; i < 3; i++) {
            Map<String, Object> map = new HashMap<String, Object>();
            map.put("", "");
//            map.put("image", imgeIDs[i]);               //图片资源
            map.put("title", "五月五"+i);              //物品标题
//            map.put("info", goodsNames[i]);     //物品名称
//            map.put("detail", goodsDetails[i]); //物品详情
            listItems.add(map);
        }
return listItems;
    }
这里初始化，是将我们的信息put到key,value的Map中，然后适配器中是get我们的key值来获取value。这样来实现我们的listview的适配以及图片文字等的变更。

这是自己的一些理解与示例代码，希望能对大家有所帮助。实现后的效果图就不发了。自己看自己实现的会是一种另外的心情。

标签：

相关文章