如何在xamarin android中创建单项选择mvx列表?

时间:2018-02-13 13:56:45

标签: android xamarin mvvmcross

所以我用Xamarin和MvvmCross创建了android应用程序。我需要制作一个显示所有项目的列表,并且您只能选择一个项目。如果您已经选择了一个项目并尝试选择另一个项目,则不再选择第一个项目并选择新项目。

列表视图模型:

    public class ManagedPagesSelectViewModel : SharedViewModel
    {
        private ICollection<ManagedPagesSelectItemViewModel> _pages;

        public ICollection<ManagedPagesSelectItemViewModel> Pages { get => _pages; set => SetProperty(ref _pages, value); }

        public ManagedPagesSelectViewModel() : base(navigation)
        {
        }

        public override async Task Initialize()
        {
            var tempPages = new Collection<ManagedPagesSelectItemViewModel>();
            await base.Initialize();
            IsLoading = true;

            try
            {

                tempPages.Add(new ManagedPagesSelectItemViewModel { Name = "testName", PhotoUrl = "asdasdasd", AccessToken = "asdasdasdasdasd" });
                tempPages.Add(new ManagedPagesSelectItemViewModel { Name = "testName1", PhotoUrl = "asdasdasd1", AccessToken = "asdasdasdasdasd1" });

                Pages = tempPages;
            }
            catch (Exception ex)
            {
                Error = "Could not load managed pages list";
            }

            IsLoading = false;
        }    
    }

项目视图模型:

public class ManagedPagesSelectItemViewModel : MvxViewModel
{
    private string _name;
    private string _url;
    private string _accessToken;
    private bool _isSelected;

    public string Name { get => _name; set => SetProperty(ref _name, value); }
    public string PhotoUrl { get => _url; set => SetProperty(ref _url, value); }
    public string AccessToken { get => _accessToken; set => SetProperty(ref _accessToken, value); }
    public bool IsSelected { get => _isSelected; set => SetProperty(ref _isSelected, value); }

    public IMvxCommand SelectCommand => new MvxCommand(SelectCommandHandler);

    public void SelectCommandHandler()
    {
        IsSelected = !IsSelected;
    }
}

列表视图:

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent">
        <RelativeLayout
        android:layout_width="match_parent"
        android:background="@color/abc_search_url_text_normal"
        android:layout_height="50dp" />
       <RelativeLayout
       android:layout_width="match_parent"
       android:layout_height="200dp"
       android:paddingTop="50dp">
       <Mvx.MvxListView
        android:padding="5dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        local:MvxItemTemplate="@layout/managedpagelistitem"
        android:layout_gravity="bottom"
        local:MvxBind="ItemsSource Pages"
        android:choiceMode="singleChoice" />
</RelativeLayout>
<RelativeLayout
    android:layout_width="match_parent"
    android:background="@color/abc_search_url_text_normal"
    android:layout_height="50dp"
    android:layout_alignParentBottom="true"
    android:minWidth="25px"
    android:minHeight="25px">
</RelativeLayout>

并列出项目视图:

<?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-auto"
android:orientation="vertical"
local:MvxBind="Click SelectCommand"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="25px"
android:minHeight="25px">
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@drawable/block"
    android:elevation="2dp"
    android:orientation="horizontal"
    android:gravity="center_vertical">
    <TextView
        local:MvxBind="Text Name"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:textColor="#000000"
        android:layout_marginLeft="20dp"
        android:gravity="center_vertical" />
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="1" />
    <CheckBox
        local:MvxBind="Checked IsSelected"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:id="@+id/checkBox1" />
</LinearLayout>

我做错了什么?如果选择了新项目,我就无法弄清楚如何从旧项目中删除IsSelected ....

1 个答案:

答案 0 :(得分:1)

一种方法是将您的SelectCommand放在ManagedPagesSelectViewModel项目中并相应地切换选择,同时保存选择并考虑在选择当前项目之前将其选择切换为false

public class ManagedPagesSelectViewModel : SharedViewModel
{
    ...

    private ManagedPagesSelectItemViewModel lastSelectedItem;

    public MvxCommand<ManagedPagesSelectItemViewModel> SelectCommand => new MvxCommand<ManagedPagesSelectItemViewModel>(SelectCommandHandler);

    public void SelectCommandHandler(ManagedPagesSelectItemViewModel  item)
    {
        if(this.lastSelectedItem != null)
            this.lastSelectedItem.IsSelected = false;

        item.IsSelected = !item.IsSelected;
        this.lastSelectedItem = item;
    }    
}

此外,我们必须将其绑定在ItemClick中,如下所示:

<Mvx.MvxListView
    android:padding="5dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    local:MvxItemTemplate="@layout/managedpagelistitem"
    android:layout_gravity="bottom"
    local:MvxBind="ItemsSource Pages; ItemClick SelectCommand"
    android:choiceMode="singleChoice" />

另一种方法是在select命令处理程序中使用相同的绑定&#34;取消选择&#34;所有项目并选择当前项目:

public class ManagedPagesSelectViewModel : SharedViewModel
{
    ...

    public MvxCommand<ManagedPagesSelectItemViewModel> SelectCommand => new MvxCommand<ManagedPagesSelectItemViewModel>(SelectCommandHandler);

    public void SelectCommandHandler(ManagedPagesSelectItemViewModel  item)
    {
        foreach(ManagedPagesSelectItemViewModel i in this.Pages)
            i.IsSelected = false;

        item.IsSelected = !item.IsSelected;
    }    
}

HIH