如何使用自动调整大小制作方形按钮列表？

Question

我正在开发一个显示页面的应用程序，该页面具有可变数量的方形按钮，例如“Square MIUI”的第二张图片：

Square MIUI on APP store

我只需要显示三列方形按钮，并使整个列表可滚动。

我首先尝试使用纯 XML：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >



    <ScrollView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_gravity="center"
        android:layout_weight="1.19"
        android:orientation="horizontal" >

        <TableLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center" >

            <TableRow
                android:layout_width="fill_parent"
                android:layout_height="match_parent"
                android:layout_weight="1" >

                <TextView
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="Title"/>

            </TableRow>

            <TableRow
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >

                        <!-- Icon buttons here -->

            </TableRow>


        </TableLayout>

    </ScrollView>

    <Button
        android:layout_width="fill_parent"
        android:layout_height="48dp"
        android:text="Button" />

</LinearLayout>

对于每个按钮（3 个按钮的 4 个 TableRow，图像是使用 Eclipse 图标生成器制作的方形 .png） 编辑：选中，所有屏幕密度的图标都是方形的

            <Button
                android:layout_margin="4dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:background="image"/>

但我平板电脑上的按钮是方形的，而我手机上的按钮比高宽（在 X 轴上拉伸）。

我做错了什么？

TODO：对可变按钮编号进行编码。

提前致谢。

编辑：

我试过这段代码：

private void squareButton() {
    square(R.id.b1);
    square(R.id.b2);
    ....
    square(R.id.b<N>);
}

private void square(int id) {
    ImageButton temp=(ImageButton) findViewById(id);
    int l=temp.getWidth();
    DisplayMetrics metrics = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(metrics);
    int Measuredwidth = metrics.widthPixels;

    l=(int) (Measuredwidth/4);

    temp.setMaxWidth(l);
    temp.setMaxHeight(l);
    temp.setMinimumWidth(l);
    temp.setMinimumHeight(l);

    LayoutParams param = temp.getLayoutParams();
    param.width = l;
    param.height = l;
    temp.setLayoutParams(param);
    temp.requestLayout();

}

但我的手机按钮仍然很奇怪（姜饼）... 我不能只依赖自动调整大小的图标（平板电脑太小，手机太大）

编辑： 我正在寻找这样的代码：

• 方块按钮
• 具有用户可定义的宽度
• 与姜饼一起使用

在我的例子中，button_width = widthPixels/4;

提前谢谢你。

Answer 1

像这样实现你自己的方形按钮类：

public class SquareButton extends Button {
public SquareButton(Context context) {
    super(context);
}

public SquareButton(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public SquareButton(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth()); // Snap to width
}
}

Answer 2

最后，我找到了使用 GridView 的解决方案。

首先，我关注GridView tutorial

然后我从其他答案中得到了一些代码。

现在这段代码创建了一个可滚动和可点击的大方形图标列表，根据屏幕大小调整大小。当一个图标被点击时，改变他的形象。

感谢 Lubos 的建议。

[主要活动]

public class Grid extends Activity {

    public boolean audio=true;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_grid);

        GridView gridview = (GridView) findViewById(R.id.gridview);
        gridview.setAdapter(new ImageAdapter(this));

        // load icons on grid
        ImageAdapter.loadImages(new Integer[] {
                R.drawable.ic_blu_voice_on,
                R.drawable.ic_blu_help,
                R.drawable.ic_blu_save,
                R.drawable.ic_blu_load
        });

        gridview.setOnItemClickListener(new OnItemClickListener() {
            public void onItemClick(AdapterView<?> parent, View imgView, int position, long id) {
                ImageView image=(ImageView) imgView;
                switch (position) {
                    case 0:
                        // switch voice icon on/off when clicked
                        image.setImageResource(voice());
                        break;
                }

                Toast.makeText(Grid.this, "" + position, Toast.LENGTH_SHORT).show();
            }

        });
    }

    private int voice() {
        audio=!audio;
        if (audio) return R.drawable.ic_blu_voice_on;
        return R.drawable.ic_blu_voice_off;
    }

}

[imageadapter.java]

public class ImageAdapter extends BaseAdapter {
    private Context mContext;

    // reference to images (dummy)
    private static Integer[] mThumbIds = {0,0};
    private float px;

    public ImageAdapter(Context c) {
        mContext = c;
        //Calculation of ImageView Size - density independent.
        Resources r = Resources.getSystem();
        px = r.getDisplayMetrics().widthPixels;
        px=px/3;
    }

    public int getCount() {
        return mThumbIds.length;
    }

    public Object getItem(int position) {
        return null;
    }

    public long getItemId(int position) {
        return 0;
    }

    public static void setImage(int position, int id) {
        mThumbIds[position]=id;
    }

    public static void loadImages(Integer[] images) {
        mThumbIds = images;
    }

    // create a new ImageView for each item referenced by the Adapter
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView;
        if (convertView == null) {  // if it's not recycled, initialize some attributes
            imageView = new ImageView(mContext);
            imageView.setLayoutParams(new GridView.LayoutParams((int)px, (int)px));
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            imageView.setPadding(8, 8, 8, 8);
        } else {
            imageView = (ImageView) convertView;
        }

        imageView.setImageResource(mThumbIds[position]);
        return imageView;
    }

}

[activity_grid.xml]

<RelativeLayout xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:layout_gravity="center_horizontal"
    android:orientation="vertical"
    tools:context="${packageName}.${activityClass}">

    <LinearLayout
        android:id="@+id/LinearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center_horizontal"
        android:orientation="vertical"
        tools:context="${relativePackage}.${activityClass}" >

        <TextView
            android:id="@+id/testo1"
            android:layout_width="fill_parent"
            android:layout_height="48dp"
            android:gravity="center_horizontal"
            android:text="@string/hello_world"
            android:textSize="30sp" />

        <GridView
            android:id="@+id/gridview"
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:columnWidth="120dp"
            android:gravity="center"
            android:numColumns="auto_fit"
            android:stretchMode="spacingWidthUniform">

        </GridView>

        <Button
            android:id="@+id/button"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/hello_world"
            android:textSize="30sp" />

    </LinearLayout>

</RelativeLayout>