将 GridLayout 绑定到 Android 的问题 [英] Issue with binding to GridLayout to Android

问题描述

我使用 Mono 技术创建游戏.在写的时候，我有一个问题.我需要创建带有图片的 一个网格(4 到 5).我想在这里应用 GridLayout 或 GridView.但是我不知道如何在 GridLayout 中动态创建图像，这些图像是用 ViewModel(属性 List )更新的.游戏过程中会改变List中对象属性SquareModel，即图片的路径.如果你点击图片，它会改变.

我在Windows Phone上做过的一个类似的游戏.没有问题.

解决方案

Android 中有一个 GridView 可用 - 但我个人从未在 mvvmcross 中使用带有数据绑定的 GridView - 但我听说添加它很简单 -参见 https://github.com/slodge/MvvmCross/issues/37>

作为网格视图的替代方案，您可以使用垂直和水平线性布局的某种组合来构建自己的网格.您可以通过使用类似的外部线性布局来做到这一点:

包含行模板

和仅包含 ImageView

的单元格<小时>

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

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

即.如果您的 ViewModel 是:

公共类 MyViewModel : MvxViewModel{公共列表行 {get;private set;}}

GameRow 在哪里:

公共类 GameRow : MvxNotifyProperty{公开列表<GameSquare>细胞 {get;private set;}}

GameSquare 在哪里:

公共类 GameSquare : MvxNotifyProperty{私人字符串_icon;公共字符串图标{得到 { 返回 _icon;}设置 { _icon = 值；RaisePropertyChanged(() => Icon);}}

那么每个 ImageView 显示上的绑定应该是这样的:

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

显然，您可能不想直接在 ViewModel 中使用图标路径 - 您可能更喜欢使用枚举.如果您这样做，那么您可能希望使用 ValueConverter 或自定义绑定来根据当前枚举值显示正确的图像.

见如何使用 Mvvmcross 将图像 src 绑定到资源可绘制图像? 了解更多信息.

I create game using technology Mono. While writing, I have a problem. I need create a grid (4 to 5) with pictures. I thought to apply here GridLayout or GridView. But I do not know how to dynamically create images in GridLayout, which are updated with ViewModel (properties List ). During the game will change object properties SquareModel in List, namely the path to the image. If you click on the image, it will change.

A similar game I did ​​in Windows Phone. There did not have problems.

解决方案

There is a GridView available in Android - but I've personally never used the GridView with databinding in mvvmcross - but I've heard it's quite simple to add - see https://github.com/slodge/MvvmCross/issues/37

As an alternative to the grid view, you could build your own Grid using some combination of vertical and horizontal LinearLayouts. You might do this by having an outer linearlayout like:

<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'}}"
  />

with the row template containing

<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'}}"
  />

and the cell containing just the ImageView

---

Regardless of whether you use GridView or LinearLayouts, then you should be able to build a container ready for your individual ImageView squares.

Once this is ready then changing the image shown in each square should be very straight-forward - it should just be a case of binding an ImageView's AssetImagePath to a property on the ViewModel object representing the square.

ie. if your ViewModel is:

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

where GameRow is:

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

where GameSquare is:

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

then the binding on each ImageView display should just be something like:

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

Obviously you might not want to use icon paths directly in your ViewModel - you might prefer to use an enumeration instead. If you do this, then you might want to use a ValueConverter or a custom binding to display the correct image based on the current enumeration value.

See the question and answer in how to bind an image src to resource drawable image with Mvvmcross? for some more information.

这篇关于将 GridLayout 绑定到 Android 的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！