android - 如何突出显示 MvxListView 中的选定项

Question

如何在 MvxListView 中保持项目突出显示，直到它被取消选中或直到另一个项目被选中？

我的程序有一个 MvxListView 可以正确显示项目列表。用户可以通过单击来选择一个项目，然后单击保存按钮。所选项目存储在 MyChosenItem 中，直到保存按钮代码需要它为止。目前，选中的项目在返回未选中的颜色之前会在一瞬间保持高亮。

MvxListView 是这样创建的:

<Mvx.MvxListView
    android:layout_width="match_parent"
    android:layout_height="260dp"
    android:layout_marginTop="40dp"
    android:id="@+id/MyMvxListViewControl"
    local:MvxBind="ItemsSource MyItems; SelectedItem MyChosenItem"
    local:MvxItemTemplate="@layout/my_item_layout" />

这是Layout/my_item_layout.xaml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res/Project.Ui.Droid"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">
    <TextView
        android:layout_width="300.0dp"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:textSize="20dp"
        android:textColor="#000000"
        local:MvxBind="Text Field1" />
    <TextView
        android:layout_width="250.0dp"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:textSize="20dp"
        android:textColor="#000000"
        local:MvxBind="Text Field2" />
</LinearLayout>

Answer 1

此方法提供了一种自定义哪些项目保持突出显示的简便方法。我决定这样做是因为它让我可以完全控制突出显示的内容以及它在列表中的显示方式。 (此示例仅突出显示一项，但可以轻松扩展以突出显示更多项。)

1. 在原始问题中，MvxListView 链接到关联 View 模型中的 MyItems 和 MyChosenItem。 MyItems 是 Item 的集合，MyChosenItem 只是一个 Item。我将 isItemSelected 添加到 Item。 Item 类现在如下所示:

   public class Item : MvxViewModel           
   {
       private string _field1;
       private string _field2;
       private bool _isItemSelected = false;
   
       public string Field1
       {
           get { return _field1; }
           set
           {
               _field1= value;
               RaisePropertyChanged("Field1");
           }
       }
   
       public string Field2
       {
           get { return _field2; }
           set
           {
               _field2= value;
               RaisePropertyChanged("Field2");
           }
       }
   
       public bool isItemSelected
       {
           get { return _isItemSelected; }
           set
           {
               _isItemSelected = value;
               RaisePropertyChanged("isItemSelected");
           }
       }
   }
   

   注意:Item 类扩展了 MvxViewModel，因此可以调用 RaisePropertyChange()。这允许 my_item_layout.xaml 在该属性更改时收到通知。

2. 从 MvxListView 的 SelectedItem 绑定(bind)到的属性更新 isItemSelected 的每个实例。在本例中，它是关联 View 模型中的 MyChosenItem 属性。这是新代码的样子:

   public Item MyChosenItem
   {
       get { return _myChosenItem; }
       set
       {
           if (_myChosenItem != value)
           {
               _myChosenItem = value;
               UpdateItemSelections();
               RaisePropertyChanged("MyChosenItem");
           }
       }
   }
   
   // Select MyChosenItem and unselect all other items
   private void UpdateItemSelections()
   {
       if( MyItems.Count > 0)
       {
           for (int index = 0; index < MyItems.Count; index++)
           {
               // If the chosen item is the same, mark it as selected
               if (MyItems[index].Field1.Equals(MyChosenItem.Field1)
                   && MyItems[index].Field2.Equals(MyChosenItem.Field2))
               {
                   MyItems[index].isItemSelected = true;
               }
               else
               {
                   // Only trigger the property changed event if it needs to change
                   if (MyItems[index].isItemSelected)
                   {
                       MyItems[index].isItemSelected = false;
                   }
               }
           }
       }
   }
   

   将 UpdateItemSelections() 修改为您想要的任何选择行为将非常容易。

3. 让每一行根据 isItemSelected 属性做一些事情。我只是通过控制 View 的可见性属性来改变背景颜色。然而，一切皆有可能。 isItemSelected 甚至可以传递给自定义控件以获得一些非常有趣的视觉效果。我的新 Layout/my_item_layout.xaml 如下所示:

   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:local="http://schemas.android.com/apk/res/Project.Ui.Droid"
       android:orientation="horizontal"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content">
   
       <!-- SELECTED BACKGROUND COLOR -->
       <View
           android:layout_width="fill_parent"
           android:layout_height="fill_parent"
           android:background="#FF0000"
           local:MvxBind="Visibility isItemSelected,Converter=BoolToViewStates" />
   
       <TextView
           android:layout_width="300.0dp"
           android:layout_height="wrap_content"
           android:padding="5dp"
           android:textSize="20dp"
           android:textColor="#000000"
           local:MvxBind="Text Field1" />
       <TextView
           android:layout_width="250.0dp"
           android:layout_height="wrap_content"
           android:padding="5dp"
           android:textSize="20dp"
           android:textColor="#000000"
           local:MvxBind="Text Field2" />
   </LinearLayout>
   

---

编辑

在设置 SelectedItem 时，最好使用 MvxCommand 而不是触发突出显示的操作。似乎 SelectedItem 只有在尚未被选中时才会被设置。点击一个项目将选中它。点击另一个项目将改变选择。再次点击同一项目不会取消选择。这意味着一旦选择了一项，就必须保持选中一项。如果您需要能够取消选择列表中的所有项目，请按照对原始说明的这些修改进行操作:

1. 将 MvxCommand 添加到 View 模型。从 MvxCommand 而不是从 MyChosenItem 调用 UpdateItemSelections()。

   public MvxCommand ItemSelectedCommand { get; private set; }
   
   // Constructor
   public ItemSelectionViewModel()
   {
       ItemSelectedCommand = new MvxCommand(OnItemSelected);
   }
   
   public Item MyChosenItem
   {
       get { return _myChosenItem; }
       set
       {
           if (_myChosenItem != value)
           {
               _myChosenItem = value;
               //UpdateItemSelections();    // Move this to OnItemSelected()
               RaisePropertyChanged("MyChosenItem");
           }
       }
   }
   
   private void OnItemSelected()
   {
       UpdateItemSelections();
   }
   

2. 更改 UpdateItemSelections() 以切换 isItemSelected 属性，而不是始终将其设置为 true:

   // Select MyChosenItem and unselect all other items
   private void UpdateItemSelections()
   {
       if( MyItems.Count > 0)
       {
           for (int index = 0; index < MyItems.Count; index++)
           {
               // If the chosen item is the same, mark it as selected
               if (MyItems[index].Field1.Equals(MyChosenItem.Field1)
                   && MyItems[index].Field2.Equals(MyChosenItem.Field2))
               {
                   // Toggle selected status
                   MyItems[index].isItemSelected = !MyItems[index].isItemSelected;
               }
               else
               {
                   // Only trigger the property changed event if it needs to change
                   if (MyItems[index].isItemSelected)
                   {
                       MyItems[index].isItemSelected = false;
                   }
               }
           }
       }
   }
   

3. 在保存或对列表中的选定项目执行任何操作时，请记住检查 MyChosenItem.isItemSelected == true。 MyChosenItem 中可能有一个值在用户看到的 ListView 中未被选中。

4. 在 MvxListView 的布局定义中将 MvxCommand 绑定(bind)到 ItemClick:

   <Mvx.MvxListView
       android:layout_width="match_parent"
       android:layout_height="260dp"
       android:layout_marginTop="40dp"
       android:id="@+id/MyMvxListViewControl"
       local:MvxBind="ItemsSource MyItems; SelectedItem MyChosenItem; ItemClick ItemSelectedCommand"
       local:MvxItemTemplate="@layout/my_item_layout" />