如何創建一個帶圖像和字符串的分段列表視圖

Question

我想創建一個像圖中所示的分段列表視圖。

我已經嘗試了樣品在

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

，並用它，但無法將圖像添加到它。我怎樣才能實現它？

我不得不這樣做。

Answer 1

如果你想顯示包含的圖片和一些文字旁邊，你必須把它提供給適配器的項目列表。

你的列表項目佈局，讓我們把它叫做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> 

，並保存在佈局文件夾ImageTextListItem.axml

在您的適配器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方法是您需要調用的，如果它不是標題。

Answer 2

您可以通過製作具有不同項目類型的列表來完成此操作。您需要在適配器中重寫2件事（除了常見的東西）：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 
      } 

     } 
    } 
}