Іssue与结合网格布局到Android [英] Іssue with binding to GridLayout to Android

问题描述

我创建一个使用技术单声道的游戏。在写，我有一个问题。我需要创建一个网格（4〜5）与图片。我想在这里运用网格布局或GridView控件。但我不知道该如何动态地在网格布局，这是与视图模型（属性列表）更新创建图像。在游戏过程中会改变对象的属性SquareModel在列表中，即路​​径的形象。如果你点击图片，它会改变。

一个类似的游戏，我在Windows Phone的那样。有没有问题。

解决方案

有在Android平台所提供的GridView - 但我个人从来没有使用GridView控件与数据绑定在mvvmcross - 但我听说这是相当简单的添加 - 见 https://github.com/ slodge / MvvmCross /问题/ 37

作为替代网格视图，您可以使用垂直和水平LinearLayouts的组合可以构建自己的网格。你可能会具有外的LinearLayout像这样：

 < Mvx.MvxBindableLinearLayout 
的android：layout_width =FILL_PARENT 
机器人：layout_height =FILL_PARENT
安卓方向=垂直
地方：MvxItemTemplate =@布局/ listitem_row
地方：MvxBind ={'的ItemsSource ：{'路径'：'行'}}
 /> 
  

含

<$ P $行模板p> < Mvx.MvxBindableLinearLayout
的android：layout_width =FILL_PARENT
机器人：layout_height =WRAP_CONTENT
安卓方向=横向
本地：MvxItemTemplate =@布局/ listitem_cell
地方：MvxBind ={'的ItemsSource：{路径：'细胞'}}
/>


和包含单元格中的ImageView

---

无论您使用的GridView或LinearLayouts，那么你应该能够建立准备好您的个人ImageView的正方形的容器。

一旦准备就绪，然后改变每个方块表示应该是非常直接的形象 - 它应该只是一个的ImageView AssetImagePath结合于一个属性的情况下视图模型对象代表方。

IE浏览器。如果您的视图模型为：

 公共类MyViewModel：MvxViewModel 
 {
公开名单< GameRow>行{获取;私人集;} 
} 
  

其中GameRow是：

 公共类GameRow：MvxNotifyProperty 
 {
公开名单< GameSquare>细胞{获取​​;私人集;} 
} 
  

其中GameSquare是：

 公共类GameSquare：MvxNotifyProperty 
 {
私人字符串_icon; 
公共字符串图标
 {
 {返回_icon; } 
集合{_icon =价值; RaisePropertyChanged（（）=>图标）; 
} 
} 
  

那么每个ImageView的显示屏上的结合应该只是东西这样的：

  {'AssetImagePath：{路径：'图标'}} 
  

显然，你可能不希望直接在您的视图模型使用的图标路径 - 你可能更愿意使用枚举来代替。如果你这样做，那么你可能想使用 ValueConverter 或自定义绑定，以显示基于当前枚举值正确的图像。

请参阅的问题和回答的如何绑定一个图片src与Mvvmcross资源绘制的图像？了解更多的信息。

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.

这篇关于Іssue与结合网格布局到Android的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！