如何在Android的可扩展列表中的父项中添加图片？

Question

在可扩展列表中，是否可以自定义子项？

- Raj

Answer 1

使用 SimpleExpandableListAdapter 并不简单。以下是一些代码示例，假设您正在使用 ExpandableListActivity。

在此示例中，我们使用标准的 android.R.layout.simple_expandable_list_item_1 作为组标题视图，但对于子项我们使用自定义布局。

    // Construct Expandable List
    final String NAME = "name";
    final String IMAGE = "image";
    final LayoutInflater layoutInflater = (LayoutInflater) this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    final ArrayList<HashMap<String, String>> headerData = new ArrayList<HashMap<String, String>>();

    final HashMap<String, String> group1 = new HashMap<String, String>();
    group1.put(NAME, "Group 1");
    headerData.add( group1 );

    final HashMap<String, String> group2 = new HashMap<String, String>();
    group2.put(NAME, "Group 2");
    headerData.add( group2);


    final ArrayList<ArrayList<HashMap<String, Object>>> childData = new ArrayList<ArrayList<HashMap<String, Object>>>();

    final ArrayList<HashMap<String, Object>> group1data = new ArrayList<HashMap<String, Object>>();
    childData.add(group1data);

    final ArrayList<HashMap<String, Object>> group2data = new ArrayList<HashMap<String, Object>>();
    childData.add(group2data);


    // Set up some sample data in both groups
    for( int i=0; i<10; ++i) {
        final HashMap<String, Object> map = new HashMap<String,Object>();
        map.put(NAME, "Child " + i );
        map.put(IMAGE, getResources().getDrawable(R.drawable.icon));
        ( i%2==0 ? group1data : group2data ).add(map);
    }

    setListAdapter( new SimpleExpandableListAdapter(
            this,
            headerData,
            android.R.layout.simple_expandable_list_item_1,
            new String[] { NAME },            // the name of the field data
            new int[] { android.R.id.text1 }, // the text field to populate with the field data
            childData,
            0,
            null,
            new int[] {}
        ) {
            @Override
            public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
                final View v = super.getChildView(groupPosition, childPosition, isLastChild, convertView, parent);

                // Populate your custom view here
                ((TextView)v.findViewById(R.id.name)).setText( (String) ((Map<String,Object>)getChild(groupPosition, childPosition)).get(NAME) );
                ((ImageView)v.findViewById(R.id.image)).setImageDrawable( (Drawable) ((Map<String,Object>)getChild(groupPosition, childPosition)).get(IMAGE) );

                return v;
            }

            @Override
            public View newChildView(boolean isLastChild, ViewGroup parent) {
                 return layoutInflater.inflate(R.layout.expandable_list_item_with_image, null, false);
            }
        }
    );

在您的自定义子布局中，名为expandable_list_item_with_image.xml：

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_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="right" />

</RelativeLayout>

- emmby

---

只是想说这是一个很好的例子，真的很有帮助！谢谢。 - Alex Florescu

@emmby 你好，如何为父元素的每个子元素添加不同的图像和文本？ - Sasha

你知道有关编程的任何教程吗？ - Sasha

Answer 2

您可以尝试创建自己的列表适配器，该适配器扩展了BaseExpandableListAdapter，就像文档中所描述的那样。

然后覆盖getGroupView(..)（用于父项）或getChildView（用于子项）函数，在此函数中，您可以填充自己的布局xml。

类似于这样：

public View getGroupView(int groupPosition, boolean isExpanded, View convertView,
            ViewGroup parent) 
        {
            View v = convertView;
            if (v == null) {
    //sender is activity from where you call this adapter. Set it with construktor.
                LayoutInflater vi = (LayoutInflater)sender.getSystemService(Context.LAYOUT_INFLATER_SERVICE); 
                v = vi.inflate(R.layout.row, null);
            }
//children = arraylists of Child 
            Child c = children.get(childPosition);
            if (c != null) {
                    TextView tt = (TextView) v.findViewById(R.id.toptext);
                    TextView bt = (TextView) v.findViewById(R.id.bottomtext);
                    ImageView icon = (ImageView) v.findViewById(R.id.rowicon);
                    if (tt != null) {
                          tt.setText(c.text1);                            }
                    if(bt != null){
                          bt.setText(c.text2);
                    }
                    if (icon != null) 
                    {
                        icon.setImageResource(R.drawable.rowicon);
                    }
            }
            return v;
        }

布局XML：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="?android:attr/listPreferredItemHeight"
    android:padding="6dip">
    <ImageView
        android:id="@+id/rowicon"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_marginRight="6dip" />
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="0dip"
        android:layout_weight="1"
        android:layout_height="fill_parent">
        <TextView
            android:id="@+id/toptext"
            android:layout_width="fill_parent"
            android:layout_height="0dip"
            android:layout_weight="1"
            android:gravity="center_vertical"
        />
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="0dip"
            android:layout_weight="1" 
            android:id="@+id/bottomtext"
            android:singleLine="true"
            android:ellipsize="marquee"
        />
    </LinearLayout>
</LinearLayout>

- Tine M.

Answer 3

在你重写 getGroupView 后，你可以使用 setCompoundDrawablesWithIntrinsicBounds 函数来添加图片。

@Override
public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) 
{
  View v = super.getGroupView(groupPosition, isExpanded, convertView, parent);
  TextView tv = (TextView) v.findViewById(R.id.textViewId);

  tv.setCompoundDrawablesWithIntrinsicBounds(R.drawable.imageToAdd, 0, 0, 0);

  return v;
}

- penguru

Answer 4

我刚刚发现了一个更好的方法，你可以在列表组的布局xml文件中添加以下代码行：android:drawableRight="@drawable/icon"。

- penguru

Answer 5

试试这个>>> 教程

你可以更新它，以便在子XML文件中添加图像而不是文本

- Amt87