【求助啊】求助一个布局问题，类似于美团的原型按钮那里

求助一个布局问题，类似于美团的原型按钮那里

如何这样的均匀排列，
前提：
是园的个数不定，不过最多8个，
我的做法是在设定一个
<TableLayout
android:id="@+id/index_item_table"
android:layout_width="fill_parent"
android:layout_height="match_parent"
/>
然后创建一个ItemButton继承ImageButton
public class ItemButton extends ImageButton{
/**
* 商城的名字
*/
private String mName;
/**
* 商城图片
*/
private Bitmap mImage;
public ItemButton(Context context,Bitmap image, String name) {
super(context);
mImage = image;
mName = name;
}
public ItemButton(Context context, AttributeSet attrs) {
super(context, attrs);
}
public ItemButton(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onDraw(Canvas canvas) {
Paint paint = new Paint();
int imgX = (this.getWidth()-mImage.getWidth())/2;
canvas.drawBitmap(mImage, imgX, 0, paint);
canvas.drawText(mName,mImage.getHeight(),0,paint);
}
}
然后再Fragment中找出TableLayout，添加ItemButton
private void initView() {
//获取图片
Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.mipmap.index_five_item);
//获取tableLayout
ItemButton itemButton = new ItemButton(getActivity(),bitmap,"天河城");
TableLayout tableLayout = (TableLayout) mView.findViewById(R.id.index_item_table);
//创建Row
TableRow tableRow = new TableRow(getActivity());
tableLayout.addView(tableRow);
tableRow.addView(itemButton);
}
可是结果却是这样

请问哪里出错了