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

问题描述

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

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

解决方案

Android中提供了GridView-但我个人从未将GridView与mvvmcross中的数据绑定一起使用-但我听说添加它非常简单-参见 https://github.com/slodge/MvvmCross/issues/37

作为网格视图的替代方法，您可以使用垂直和水平LinearLayouts的某种组合来构建自己的Grid.您可以通过使用外部线性布局来实现此目的，例如:

<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或自定义绑定来基于当前枚举值显示正确的图像.

在如何使用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屋！