如何使用 imagebuttons 制作这个 UI？

Question

我想创建这样的主 UI： http://lh3.ggpht.com/RYB2ckycDc_4rb2bmsDzqLLmYcj37xDOA7d7sR6XIVfwRb3a44_HqMqfb1vdmtxTEidenVY4C9RcTREl

是否可以使用 ImageButton 做到这一点？图像必须具有相同的分辨率？ 非常感谢。

XML文件，一行图片按钮：

<?xml version="1.0" encoding="UTF-8"?>

<RelativeLayout android:id="@+id/acceuil"
   android:layout_width="fill_parent" android:layout_height="fill_parent"
   android:orientation="vertical"
   xmlns:android="http://schemas.android.com/apk/res/android">


<ImageButton

    android:id="@+id/consom" 

    android:layout_alignParentLeft="true"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/consom_icon">
</ImageButton>
<ImageButton

    android:id="@+id/param" 

    android:layout_alignParentRight="true"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
     android:src="@drawable/consom_icon" >
 </ImageButton>

 </RelativeLayout>

这是我所拥有的： http://imageshack.us/f/856/imagebutton.png/

Answer 1

使用 GridView，您可以使用 res/ 文件夹中 hdpi、mdpi 和 ldpi 中的一组图标来填充它。填充列表时，请确保提供图标和 ID，以便确定单击了哪个按钮来启动该按钮应该完成的活动/意图。

Android 有一个关于我所说的要点的可靠示例。 http://developer.android.com/resources/tutorials/views/hello-gridview.html

关于如何使用 switch 语句处理点击的示例：

    GridView gridView = (GridView) findViewById(R.id.gridview);
    gridView.setAdapter(new MyGridViewAdapter(this));
    gridView.setOnItemClickListener(new OnItemClickListener() {
        public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
            switch (v.getId()) {
            case R.drawable.my_button:
                startActivity(new Intent("com.awesome.Activity"));
            }
        }
    });

Answer 2

你有没有这样尝试过，

android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">

android:orientation="horizo​​ntal ......>

android:id="@+id/consom" 
android:layout_alignParentLeft="true"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@drawable/consom_icon">

图像按钮>

android:id="@+id/param" 
android:layout_alignParentRight="true"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
 android:src="@drawable/consom_icon" >

图像按钮>

线性布局>

android:orientation="horizo​​ntal ......>

android:id="@+id/consom" 
android:layout_alignParentLeft="true"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@drawable/consom_icon">

图像按钮>

android:id="@+id/param" 
android:layout_alignParentRight="true"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
 android:src="@drawable/consom_icon" >

图像按钮>

线性布局>

Answer 3

您可以使用 TableLayout 中的 ImageButtons 来制作像这样的“仪表板”类型的 UI，但我认为如果您希望部分图像显示在按钮的边缘上方，您会遇到问题。你可能会更好地使用 ImageViews，它有一个按钮类型的图像，上面有另一个图像。

查看 android UI 设计模式，他们在其中讨论类似 twitter 的应用设计。

编辑： 尝试类似下面的 TableLayout

<TableLayout>
 <TableRow>
  <ImageButton />
  <ImageButton />
 </TableRow>
 <TableRow>
  <ImageButton />
  <ImageButton />
 </TableRow> 
</TableLayout>