java - 如何以编程方式绘制 ImageButtons 的 5x5 矩阵？

Question

我需要 ImageButtons 具有相同的高度和宽度，彼此之间没有空格，如下图所示，并且矩阵的开头和结尾不能有这样的空格

非常感谢!附言我在这里使用的代码是`

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

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:stretchColumns="*" 
        android:layout_marginTop="-4.5dp"
        android:paddingBottom="-5dp"
        android:paddingLeft="-5dp"
        android:paddingRight="-5dp"
        android:paddingTop="-5dp" >

        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
             >

            <ImageButton
                android:layout_height="fill_parent"
                android:id="@+id/ImageButton_11"
                android:layout_width="0dp"
                android:layout_weight="1"
                />

            <ImageButton
                android:id="@+id/ImageButton_12"
                android:layout_width="0dp"
                android:layout_height="fill_parent"
                android:layout_marginLeft="-8.5dp"
                android:layout_weight="1" />

            <ImageButton
                android:id="@+id/ImageButton_13"
                android:layout_width="0dp"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:layout_marginLeft="-8.5dp"
                />

            <ImageButton
                android:id="@+id/ImageButton_14"
                android:layout_width="0dp"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:layout_marginLeft="-8.5dp"
                 />

            <ImageButton
                android:id="@+id/ImageButton_15"
                android:layout_width="0dp"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:layout_marginLeft="-8.5dp"
                 />

        </TableRow>

                <TableRow
                    android:id="@+id/tableRow2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="-10dp" >

            <ImageButton
                android:id="@+id/ImageButton_21"
                android:layout_width="0dp"
                android:scaleType="centerCrop"
                android:layout_height="fill_parent"

                android:layout_weight="1" />

            <ImageButton
                android:id="@+id/ImageButton_22"
                android:layout_width="0dp"
                android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                 android:layout_marginLeft="-8.5dp"
                />

            <ImageButton
                android:id="@+id/ImageButton_23"
                android:layout_width="0dp"
                android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                 android:layout_marginLeft="-8.5dp"
                 />

            <ImageButton
                android:id="@+id/ImageButton_24"
                android:layout_width="0dp"
                android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                 android:layout_marginLeft="-8.5dp"
                />

            <ImageButton
                android:id="@+id/ImageButton_25"
                android:layout_width="0dp"
                android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                 android:layout_marginLeft="-8.5dp"
                 />

        </TableRow>

        <TableRow
            android:id="@+id/tableRow3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="-10dp" >

            <ImageButton
                android:id="@+id/ImageButton_31"
                android:layout_width="0dp"
                android:scaleType="centerCrop"
                android:layout_height="fill_parent"

                android:layout_weight="1" />

            <ImageButton
                android:id="@+id/ImageButton_32"
                android:layout_width="0dp"
                android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                 android:layout_marginLeft="-8.5dp"
                />

            <ImageButton
                android:id="@+id/ImageButton_33"
                android:layout_width="0dp"
               android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                  android:layout_marginLeft="-8.5dp"
                  />

            <ImageButton
                android:id="@+id/ImageButton_34"
                android:layout_width="0dp"
                android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                 android:layout_marginLeft="-8.5dp"
                 />

            <ImageButton
                android:id="@+id/ImageButton_35"
                android:layout_width="0dp"
               android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                 android:layout_marginLeft="-8.5dp"
                 />

        </TableRow>

                <TableRow
                    android:id="@+id/tableRow4"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="-10dp"
                     >

            <ImageButton
                android:id="@+id/ImageButton_41"
                android:layout_width="0dp"
               android:scaleType="centerCrop"
                android:layout_height="fill_parent"

                android:layout_weight="1" />

            <ImageButton
                android:id="@+id/ImageButton_42"
                android:layout_width="0dp"
                android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                 android:layout_marginLeft="-8.5dp"
                />

            <ImageButton
                android:id="@+id/ImageButton_43"
                android:layout_width="0dp"
               android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                 android:layout_marginLeft="-8.5dp"
                />

            <ImageButton
                android:id="@+id/ImageButton_44"
                android:layout_width="0dp"
                android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                 android:layout_marginLeft="-8.5dp"
                 />

            <ImageButton
                android:id="@+id/ImageButton_45"
                android:layout_width="0dp"
                android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                 android:layout_marginLeft="-8.5dp"
                 />

        </TableRow>

                <TableRow
                    android:id="@+id/tableRow5"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="-10dp" >

            <ImageButton
                    android:id="@+id/ImageButton_51"
                    android:layout_width="0dp"
                    android:scaleType="centerCrop"
                    android:layout_height="fill_parent"

                    android:layout_weight="1" />

            <ImageButton
                android:id="@+id/ImageButton_52"
                android:layout_width="0dp"
                android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                 android:layout_marginLeft="-8.5dp"
                 />

            <ImageButton
                android:id="@+id/ImageButton_53"
                android:layout_width="0dp"
                android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                 android:layout_marginLeft="-8.5dp"
                 />

            <ImageButton
                android:id="@+id/ImageButton_54"
                android:layout_width="0dp"
                android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                 android:layout_marginLeft="-8.5dp"
                 />

            <ImageButton
                android:id="@+id/ImageButton_55"
                android:layout_width="0dp"
                android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                 android:layout_marginLeft="-8.5dp"
                 />

        </TableRow>
    </TableLayout>

    <ImageButton 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:id="@+id/refresh_ImageButton"

        />

</LinearLayout>

现在我希望它以编程方式完成。

Answer 1

我的回答有点延迟(与上面的非常相似，所以很抱歉，但我正在寻找另一种方法来删除按钮的边距:)

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

    LinearLayout mainContainer = (LinearLayout)findViewById(R.id.main_container);

    int cols = 5;
    int rows = 5;


    //Params used for cells
    TableRow.LayoutParams params = new TableRow.LayoutParams(
            0, ViewGroup.LayoutParams.WRAP_CONTENT, 1.0f
    );
    int pixelsToDp = convertToPixelsDp(-4.5f);
    params.setMargins(pixelsToDp, pixelsToDp, pixelsToDp, pixelsToDp);

    //Params used for rows
    TableRow.LayoutParams rowParams = new TableRow.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT
    );
    rowParams.setMargins(0, 0, 0, 0);

    //Params used for table
    TableLayout.LayoutParams tableParams = new TableLayout.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT
    );
    tableParams.setMargins(0, 0, 0, 0);

    //Table generation
    TableLayout table = new TableLayout(this);
    table.setLayoutParams(tableParams);
    table.setShowDividers(TableLayout.SHOW_DIVIDER_NONE);
    table.setStretchAllColumns(true);

    for(int i = 0; i < rows; i++){

        TableRow row = new TableRow(this);

        row.setShowDividers(TableRow.SHOW_DIVIDER_NONE);
        row.setLayoutParams(rowParams);

        for(int j = 0; j < cols; j++){

            ImageButton btn = new ImageButton(this);

            btn.setPadding(0, 0, 0, 0);
            btn.setLayoutParams(params);
            btn.setScaleType(ImageView.ScaleType.CENTER_CROP);

            //The button's background has the unneeded margin
            //so if you set correct background drawable I think
            //you might achieve what you want API lvl 16 above
            //btn.setBackground(null);

            //API Level 17 and above
            //If you want id's for some reason you could store them in
            //some kind of Dictionary or you could store the UI elements
            //to have access to them

            //int id = btn.generateViewId();
            //btn.setId(id);

            row.addView(btn);
        }

        table.addView(row);
    }

    mainContainer.addView(table);

}

public int convertToPixelsDp(float pixels){
    int px = (int)TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP,
            pixels,
            this.getResources().getDisplayMetrics());
    return px;
}

免责声明 - 这只是给你一个想法，不解决边距提到的问题

我建议您从 FrameLayout 或 LinearLayout 等基本布局类型创建按钮，以便更好地控制它们这是我在我的项目中所做的:

此代码使用不同的可绘制对象来定义我的按钮状态，这些按钮只是普通布局 View ，如果需要，您可以在选择器中添加更多状态，但我只使用按下和普通状态。

因此对于选择器中定义的每个状态，都会使用另一个可绘制文件。

给出的示例是为我的按钮创建圆角边框并为它们指定颜色

---

可绘制对象中的 down_button_lesser_opacity_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Pressed -->
    <item 
        android:state_pressed="true"
        android:drawable="@drawable/down_button_lesser_opacity_red_pressed"
        />
<!-- Normal -->
    <item
        android:drawable="@drawable/down_button_lesser_opacity_red_normal"/>
</selector>

---

down_button_lesser_opacity_red_pressed.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <stroke android:width="0dp" android:color="@color/transparent" />
    <solid android:color="#55FF0000"/>
    <corners 
        android:topLeftRadius="0dp" android:topRightRadius="0dp" 
        android:bottomLeftRadius="6dp" android:bottomRightRadius="6dp" 
        />
    <padding 
        android:left="6dp" android:top="0dp"
        android:right="6dp" android:bottom="6dp" 
        />
    </shape> 

---

down_button_lesser_opacity_red_normal.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <stroke android:width="0dp" android:color="@color/transparent" />
    <solid android:color="@color/feature_normal_item"/>
    <corners 
        android:topLeftRadius="0dp" android:topRightRadius="0dp" 
        android:bottomLeftRadius="6dp" android:bottomRightRadius="6dp" 
        />
    <padding 
        android:left="6dp" android:top="0dp"
        android:right="6dp" android:bottom="6dp" 
        />
</shape> 

---

如何使用它:

• 创建 FrameLayout 并将背景设置为 android:background="@drawable/down_button_lesser_opacity_selector"
• 将 ImageView 放在里面和/或更多控件(如果你想模拟图像按钮或其他东西)

编辑

我第一次错过的简短补充和一些包含可绘制对象的示例代码

• 您需要将框架布局设置为可点击
• 您需要更改我示例中的颜色(我正在使用我的样式中定义的颜色)。因此，将红色放在一个可绘制对象中，将蓝色放在另一个可绘制对象中，看看它的行为如何

生成时把这个放在按钮的地方

FrameLayout btn = new FrameLayout(this);
btn.setPadding(0, 0, 0, 0);
btn.setLayoutParams(new TableRow.LayoutParams(
    ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT
));

TextView text = new TextView(this);
text.setText("Button: " + i + j);

btn.addView(text);
btn.setBackgroundResource(R.drawable.down_button_lesser_opacity_selector);
btn.setClickable(true);

编辑2

class MyFrameLayout extends FrameLayout
{
    MyFrameLayout(Context context){
        super(context);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh){
        Log.v("measure", "width:" + w + " height:" + h);
        if(w != h) {
            this.setLayoutParams(new TableRow.LayoutParams(
                    w, w
            ));

        }
    }
}

您可以以更好的方式进行覆盖以使其更通用，但对于您的情况而言，这是可行的