使用Grid按钮创建自定义对话框

时间:2013-07-23 19:34:58

标签: xamarin.android xamarin android-gridview

我正在尝试使用自定义按钮添加自定义对话框,这可能吗?如果是这样,我们怎么做呢?

enter image description here

1 个答案:

答案 0 :(得分:2)

当然有可能。请查看GridView您需要创建自定义Adapter,以便为网格中的每个项目加载图片和标题。

我会这样做。

创建一个简单的类,用于保存有关Grid中每个项目的信息。我们称之为GridItem

public class GridItem
{
    public string Title { get; set; }
    public int ImageResourceId { get; set; }
    public Action ClickAction { get; set; }
}

Title是图片下的标题,ImageResoruceId是项目中的资源可绘制ID,即:Resource.Drawable.googleplusClickActionAction到单击该项时执行。

现在为网格中的项目创建布局。 grid_item.axml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <TextView
        android:id="@+id/grid_item_title"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:layout_marginTop="2dp"
        android:layout_marginBottom="2dp"
        android:layout_alignParentBottom="true"
        android:gravity="center_horizontal"
        android:layout_centerHorizontal="true" />
    <ImageView
        android:id="@+id/grid_item_image"
        android:layout_above="@+id/grid_item_title"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent" />
</RelativeLayout>

现在是自定义AdapterGridAdapter

public class GridAdapter : BaseAdapter<GridItem>
{
    private readonly IList<GridItem> _items;
    private readonly Context _context;

    public GridAdapter(Context context, IList<GridItem> items)
    {
        _context = context;
        _items = items;
    }

    public override long GetItemId(int position)
    {
        return position;
    }

    public override View GetView(int position, View convertView, ViewGroup parent)
    {
        var item = _items[position];
        var view = convertView;
        if (view == null)
        {
            var inflater = LayoutInflater.FromContext(_context);
            view = inflater.Inflate(Resource.Layout.grid_item, parent, false);
            view.Clickable = true;
            view.Click += (s, a) => item.ClickAction.Invoke();
        }

        var image = view.FindViewById<ImageView>(Resource.Id.grid_item_image);
        var title = view.FindViewById<TextView>(Resource.Id.grid_item_title);

        title.Text = item.Title;
        image.SetImageResource(item.ImageResourceId);

        return view;
    }

    public override int Count
    {
        get { return _items.Count; }
    }

    public override GridItem this[int position]
    {
        get { return _items[position]; }
    }
}

GridView本身的布局,CustomGridViewDialog.axml

<GridView
  android:id="@+id/gridview"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:numColumns="2"
  android:verticalSpacing="10dp"
  android:horizontalSpacing="10dp"
  android:stretchMode="columnWidth"
  android:gravity="center"/>

然后在创建Dialog时,你会得到类似这样的代码:

var customView = LayoutInflater.Inflate (Resource.Layout.CustomGridViewDialog, null);
var items = new List<GridItem>
{
    new GridItem
    {
        Title = "Google",
        ItemResourceId = Resource.Drawable.google,
        ClickAction = () => { Google(); }
    },
    ...
};
(customView.FindViewById<GridView>(Resource.Id.gridview)).Adapter = new GridAdapter(this, items);

var builder = new AlertDialog.Builder(this);
builder.SetTitle("Share");
builder.SetView(customView);

那应该是它。