绑定到GridLayout到Android的问题

Question

我使用技术Mono创建游戏。在写作的时候，我遇到了一个问题。我需要创建带有图片的 a grid (4 to 5)。我想申请这里的GridLayout或GridView。在游戏过程中会在列表中更改对象属性SquareModel，即图像的路径。如果你点击图像，它将会改变。

我在Windows Phone上做了一个类似的游戏​​。没有问题。

Answer 1

在Android中有一个GridView --但是我个人从来没有在mvvmcross中使用过绑定数据的GridView --但是我听说添加它非常简单--参见https://github.com/slodge/MvvmCross/issues/37

作为网格视图的替代方案，您可以使用垂直和水平LinearLayouts的某种组合来构建自己的网格。您可以通过使用外部线性布局来完成此操作，如：

<Mvx.MvxBindableLinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    local:MvxItemTemplate="@layout/listitem_row"
    local:MvxBind="{'ItemsSource':{'Path':'Rows'}}"
  />

使用行模板，其中包含

<Mvx.MvxBindableLinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    local:MvxItemTemplate="@layout/listitem_cell"
    local:MvxBind="{'ItemsSource':{'Path':'Cells'}}"
  />

和只包含ImageView的单元格

无论您使用的是GridView还是LinearLayouts，您都应该能够为您的单个ImageView正方形构建一个容器。

一旦准备就绪，那么更改每个正方形中显示的图像应该非常简单--只需将ImageView的AssetImagePath绑定到表示正方形的ViewModel对象上的属性即可。

即。如果您的ViewModel为：

public class MyViewModel : MvxViewModel
{
    public List<GameRow> Rows {get;private set;}
}

其中，GameRow是：

public class GameRow : MvxNotifyProperty
{
    public List<GameSquare> Cells {get;private set;}
}

其中，GameSquare是：

public class GameSquare : MvxNotifyProperty
{
    private string _icon;
    public string Icon 
    {
       get { return _icon; }
       set { _icon = value; RaisePropertyChanged(() => Icon);
    }
}

然后，每个ImageView显示上的绑定应该类似于：

 {'AssetImagePath':{'Path':'Icon'}}

显然，您可能不希望在ViewModel中直接使用图标路径-您可能更喜欢使用枚举。如果执行此操作，则可能需要使用ValueConverter或自定义绑定来根据当前枚举值显示正确的图像。

有关更多信息，请参阅how to bind an image src to resource drawable image with Mvvmcross?中的问题和答案。

Answer 2

现在，https://github.com/slodge/MvvmCross/issues/37上的BindableGridView示例

以下是当文件名来自视图模型时，我们用来在按钮上绑定图像的解决方案：

1)创建绑定

public class MvxButtonIconBinding: MvxBaseAndroidTargetBinding
{
    private readonly View _view;

    public MvxButtonIconBinding(View view)
    {
        _view = view;
    }

    public override void SetValue(object value)
    {
        string path = System.Environment.GetFolderPath(System.Environment.SpecialFolder.Personal);
        path = Path.Combine(path, "pictures");
        path = Path.Combine(path, (string)value);
        if (File.Exists(path))
        {
            var dr = Drawable.CreateFromPath(path);
            Button b = _view as Button;
            var drawables = b.GetCompoundDrawables();
            foreach (var d in drawables)
                if (d!=null)
                    d.Dispose(); // To avoid "out of memory" messages
            b.SetCompoundDrawablesWithIntrinsicBounds(null, dr, null, null);
        }
        else
        {
            Console.WriteLine("File {0} does not exists", path);
        } 
    }

    public override MvxBindingMode DefaultMode
    {
        get { return MvxBindingMode.OneWay; }
    }

    public override Type TargetType
    {
        get { return typeof(string); }
    }

    protected override void Dispose(bool isDisposing)
    {
        if (isDisposing)
        {
        }
        base.Dispose(isDisposing);
    }
}

2)设置绑定：

 registry.RegisterFactory(new MvxCustomBindingFactory<View>("ButtonIcon", view => new MvxButtonIconBinding(view)));

3)在你的gridview/listview中使用它：

    <ShopBazarAndroid.MvvmCross.MvxBindableGridView
        android:layout_width="0dp"
        android:layout_weight="8"
        android:layout_height="fill_parent"
        android:id="@+id/ArticleLayout"
        android:columnWidth="170dp"
        android:numColumns="auto_fit"
        android:verticalSpacing="5dp"
        android:horizontalSpacing="5dp"
        android:stretchMode="columnWidth"
        android:gravity="center"
        local:MvxItemTemplate="@layout/article_buttonlayout"
        local:MvxBind="{&apos;ItemsSource&apos;:{&apos;Path&apos;:&apos;VisualArticles&apos;}}" />

"article_buttonlayout“：

 <Button
    android:id="@+id/ButtonArticle"
    android:layout_width="fill_parent"
    android:layout_height="160dp"
    android:gravity="bottom|center"
    android:paddingBottom="5dp"
    android:paddingTop="5dp"
    local:MvxBind="{'Click':{'Path':'Command1'},'ButtonIcon':{'Path':'Item.PictureFileName'}}"
    android:textSize="14dip"
    android:textColor="@drawable/ToggleButtonSelector" />

其中"Item“是我的对象，"PictureFileName”是本地文件系统上的文件名。

我是C#的新手，如果你发现错误，请放纵一下:)