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>

score 7 · Accepted Answer

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

原始问题中的 MvxListView 链接到关联的视图模型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在该属性更改时得到通知。

isItemSelected从 MvxListViewSelectedItem绑定到的属性中更新每个实例。在这种情况下，这是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()修改为您想要的任何选择行为都非常容易。

让每一行根据isItemSelected属性做一些事情。我只是通过控制视图的可见性属性来改变背景颜色。然而，各种事情都是可能的。 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>

编辑

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

MvxCommand向视图模型添加一个。UpdateItemSelections()从MvxCommand而不是从调用MyChosenItem。

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();
}

更改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;
                }
            }
        }
    }
}

请记住MyChosenItem.isItemSelected == true在保存或对列表中的选定项目执行任何操作时进行检查。MyChosenItem用户看到的列表视图中可能存在未选择的值。

将 to绑定MvxCommand到ItemClick布局定义中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; ItemClick ItemSelectedCommand"
    local:MvxItemTemplate="@layout/my_item_layout" />

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

1 回答 1

Related

Reference