Question

我想创建一个分段列表视图，如图中所示。

我已经尝试了

的样本

https://developer.xamarin.com/samples/monodroid/LabelledSections/

并使用它但无法添加图像。我怎样才能实现它？

enter image description here

我必须这样做。

enter image description here

Answer 1

你可以通过制作包含不同项类型的列表来实现这一点。在适配器中需要覆盖两件事（除了通常的东西）：ViewTypeCount（只有get方法并返回视图类型数的属性）和GetItemViewType（返回视图类型唯一的int）。然后在GetView方法中，您可以根据视图类型返回不同的视图。您仍然可以使用ViewHolder模式，因此convertView将始终是您当时需要的类型（或null）。

所以现在你传递一个对象列表（List），并根据类型将它们转换为适当的类型。通过这种方式，您将获得分隔符，项目，项目，项目，分隔符，项目，分隔符，项目，项目的列表......以下是适配器的示例。

public class ExampleAdapter : BaseAdapter
{
    private const int ItemViewTypeListItem = 0;
    private const int ItemViewTypeSeparator = 1;
    private const int ItemViewTypeCount = 2;

    private readonly Activity _context;
    private readonly List<object> _spartendaten;

    public SparendatenAdapter(Activity context, List<object> items)
    {
        _context = context;
        _spartendaten = items;
    }

    public override Object GetItem(int position)
    {
        return null;
    }

    public override long GetItemId(int position)
    {
        return position;
    }

    public override int ViewTypeCount
    {
        get
        {
            return ItemViewTypeCount;
        }
    }

    public override int GetItemViewType(int position)
    {
        return _spartendaten[position] is Separator
            ? ItemViewTypeSeparator
            : ItemViewTypeSpartendaten;
    }

    public override View GetView(int position, View convertView, ViewGroup parent)
    {
        //
    }

    public override int Count
    {
        get { return _spartendaten.Count; }
    }

    private class ViewHolder : Object
    {
        private TextView _tvTitle;
        //... separator and list item declarations

        public void Bind(Activity context, int position, object item, int itemType)
        {
            if (itemType == ItemViewTypeSeparator)
            {
                //bind your separatorview
            }
            else
            {
                //bind your 
            }

        }

        public void Initialize(View view, int itemType)
        {
            if (itemType == ItemViewTypeListItem)
            {
                //initialize list item
            }
            else
            {
                //initialize separator
            }

        }
    }
}

Answer 2

如果要显示包含图像的项目列表以及旁边的文本，则必须将其提供给适配器。

您的列表项布局，我们称之为ImageTextListItem将如下所示：

<?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="wrap_content"
    android:paddingRight="16dp"
    android:paddingLeft="16dp"
    android:paddingTop="8dp"
    android:paddingBottom="8dp"
    android:orientation="vertical">
        <ImageView
            android:src="@android:drawable/ic_menu_gallery"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/ListItem_Icon"
            android:layout_gravity="center_vertical" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:id="@+id/ListItem_Title"
            android:text="PeopleName"
            android:textStyle="bold"
            android:layout_gravity="center_vertical" />
</LinearLayout>

并以LayoutTextListItem.axml

的形式保存在Layout文件夹中

在适配器中，GetView方法如下所示：

public override View GetView(int position, View convertView, ViewGroup parent)
    {
        View view = convertView ?? inflater.Inflate(Resource.Layout.ImageTextListItem, parent, false);

        var people = peopleList[position];

        var name = view.FindViewById<TextView>(Resource.Id.ListItem_Title);
        var icon = view.FindViewById<ImageView>(Resource.Id.ListItem_Icon);

        name.Text = people.Name;
        icon.SetImageResource(people.Image);

        return view;
    }

要实现目标，您必须将链接中的代码与此处编写的代码相结合。这意味着我的ImageTextListItem替换了布局文件夹中的ListItem.axml，如果它不是标题，我的GetView方法就是你需要调用的。

如何创建带有图像和字符串的分段列表视图

2 个答案: