3

モノの技術を使ってゲームを作っています。書いている途中で、問題が発生しました。写真付きのグリッド (4 ～ 5)を作成する必要があります。ここで GridLayout または GridView を適用することを考えました。しかし、ViewModel (プロパティ List ) で更新される GridLayout で画像を動的に作成する方法がわかりません。ゲーム中に、リスト内のオブジェクト プロパティ SquareModel、つまり画像へのパスが変更されます。画像をクリックすると画像が変わります。

Windows Phone でやった同様のゲーム。問題はありませんでした。

4

2 に答える 2

2

BindableGridView の例はhttps://github.com/slodge/MvvmCross/issues/37にあります

ファイルの名前がビューモデルに由来する場合に、ボタンに画像をバインドするために使用したソリューションを次に示します。

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）グリッドビュー/リストビューで使用します：

    <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# の初心者です。エラーが見つかった場合は、ご容赦ください :)

于 2012-10-16T13:09:15.957 に答える
1

Androidで利用可能なGridViewがあります-しかし、私は個人的にmvvmcrossでデータバインディングを使用してGridViewを使用したことはありません-しかし、追加するのは非常に簡単だと聞きました-https://github.com/slodge/MvvmCross/issues/37を参照してください

グリッドビューの代わりに、垂直線形レイアウトと水平線形レイアウトの組み合わせを使用して独自のグリッドを作成できます。これを行うには、次のような外側の線形レイアウトを使用します。

<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をリソース描画可能画像にバインドする方法の質問と回答を参照してください。詳細については。

于 2012-10-16T12:45:14.540 に答える