我该如何制作一个>在一个单元格中使用Xamarin.Forms?

时间:2017-08-18 17:35:31

标签: xamarin xamarin.forms

我有一个应用程序,我可以更改顺序和卡片的显示方式。对于拥有iOS的任何人,我需要一些非常类似于Settings>的方式。联系人>排序顺序页面有效。

这显示了两行。一个是First,Last,另一个是Last,First。当用户点击一行时,它就像一个单选按钮,并在行的末尾出现一个刻度线。

我想尝试实现此功能,但我不知道从哪里开始。我应该使用ViewCell还是TextCell来做这件事,以及如何有任何关于如何实现它的想法

2 个答案:

答案 0 :(得分:13)

编辑1 :iOS渲染器中的简化属性更改逻辑;现在没有清理的参考或处理程序。

延伸到@ hankide的答案:

您可以在扩展IsCheckedTextCell的同时创建可绑定属性ViewCell,并将VM状态绑定到该属性。

public class MyTextCell : TextCell
{
    public static readonly BindableProperty IsCheckedProperty =
        BindableProperty.Create(
            "IsChecked", typeof(bool), typeof(MyTextCell),
            defaultValue: false);

    public bool IsChecked
    {
        get { return (bool)GetValue(IsCheckedProperty); }
        set { SetValue(IsCheckedProperty, value); }
    }
}

下一步是创建侦听此属性并在iOS级别显示复选标记的渲染器。

[assembly: ExportRenderer(typeof(MyTextCell), typeof(SampleApp.iOS.MyTextCellRenderer))]
namespace SampleApp.iOS
{
    public class MyTextCellRenderer : TextCellRenderer
    {
        public override UITableViewCell GetCell(Cell item, UITableViewCell reusableCell, UITableView tv)
        {
            var nativeCell = base.GetCell(item, reusableCell, tv);

            var formsCell = item as MyTextCell;
            SetCheckmark(nativeCell, formsCell);

            return nativeCell;
        }

        protected override void HandlePropertyChanged(object sender, PropertyChangedEventArgs args)
        {
            base.HandlePropertyChanged(sender, args);

            System.Diagnostics.Debug.WriteLine($"HandlePropertyChanged {args.PropertyName}");
            if (args.PropertyName == MyTextCell.IsCheckedProperty.PropertyName)
            {
                var nativeCell = sender as CellTableViewCell;
                if (nativeCell?.Element is MyTextCell formsCell)
                    SetCheckmark(nativeCell, formsCell);
            }
        }

        void SetCheckmark(UITableViewCell nativeCell, MyTextCell formsCell)
        {
            if (formsCell.IsChecked)
                nativeCell.Accessory = UITableViewCellAccessory.Checkmark;
            else
                nativeCell.Accessory = UITableViewCellAccessory.None;
        }
    }
}

样本用法1

并且,样本用法如下:

<TableView Intent="Settings">
    <TableSection Title="Sort Order">
        <local:MyTextCell Text="First Last" IsChecked="false" />
        <local:MyTextCell Text="Last, First" IsChecked="true" />
    </TableSection>
</TableView>

样本用法2

您还可以收听Tapped事件,以确保IsChecked属性按预期工作。

例如,您将此属性绑定到ViewModel:

<TableView Intent="Settings">
    <TableSection Title="Sort Order">
        <local:MyTextCell Tapped="Handle_Tapped" Text="{Binding [0].Name}" IsChecked="{Binding [0].IsSelected}" />
        <local:MyTextCell Tapped="Handle_Tapped" Text="{Binding [1].Name}" IsChecked="{Binding [1].IsSelected}" />
    </TableSection>
</TableView>

并处理点击事件:

public SettingViewModel[] Settings = new []{
    new SettingViewModel { Name = "First Last", IsSelected = false },
    new SettingViewModel { Name = "Last First", IsSelected = true },
};

void Handle_Tapped(object sender, System.EventArgs e)
{
    var cell = sender as TextCell;
    if (cell == null)
        return;

    var selected = cell.Text;
    foreach(var setting in Settings)
    {
        if (setting.Name == selected)
            setting.IsSelected = true;
        else
            setting.IsSelected = false;
    }
}

enter image description here

答案 1 :(得分:7)

您所描述的排序顺序设置页面是使用UIKit UITableView实现的。在Xamarin.Forms中,您可以使用TableView控件来获得相同的结果。

您很快就会注意到,无法使用Xamarin.Forms设置复选标记图标,因此您可能需要创建一个custom cell,其左侧有文字,右边的复选标记图片。

如果你真的想按书完成所有事情,你应该创建一个自定义渲染器,允许你设置当前ViewCell的{​​{3}}属性。但是,对于这么小的功能,这会有点复杂。