Question

我使用Mono技术制作游戏。写作的时候，我有一个问题。我需要用图片创建 a grid (4 to 5)。我想在这里应用GridLayout或GridView。但我不知道如何在GridLayout中动态创建图像，这些图像是使用ViewModel（属性列表）更新的。在游戏过程中将更改List中的对象属性SquareModel，即图像的路径。如果单击图像，它将会更改。

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

Answer 1

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

当文件名来自viewmodel时，我们用来绑定按钮上的图像的解决方案：

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＃的新手，如果你发现错误，请放纵：）

Answer 2

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?中的问题和答案以获取更多信息。

绑定到GridLayout到Android的问题

2 个答案: