图标/文本按钮的网格布局 [英] A grid layout of icon/text buttons

问题描述

我正在尝试创建一个 3 x 3 的项目网格.每个 Item 由 TextView 之上的 ImageView 组成.不幸的是，我在让一切正常运行时遇到问题.

I am attempting to create a 3 x 3 grid of items. Each Item consists of an ImageView on top of a TextView. Unfortunately, I am having issues getting everything to play nicely.

这是我尝试并排获得 2 个这样的项目.文本视图甚至不显示，并且图标被挤压在一起(而不是均匀间隔)

Here is my attempt to get 2 such items side by side. The text views don't even show, and the icons are squished together (instead of evenly spaced)

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1" android:gravity="center"
    android:paddingLeft="40px" android:paddingRight="40px" >
<TableRow>
    <LinearLayout android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
        <ImageView 
           android:id="@+id/usertoolsimage"
           android:src="@drawable/ftnicon"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           />
        <TextView
        android:text="User Accounts"
        android:gravity="right"
        android:padding="3dip" android:textColor="#ffffff" />
    </LinearLayout>


   <LinearLayout android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
        <ImageView 
           android:id="@+id/queueimage"
           android:src="@drawable/ftnicon"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           />
        <TextView
        android:text="Queue Management"
        android:gravity="right"
        android:padding="3dip" android:textColor="#ffffff" />
    </LinearLayout>
</TableRow>

<TableRow>
    <TextView
        android:text="test 3"
        android:padding="3dip" android:textColor="#ffffff" />
    <TextView
        android:text="test 4"
        android:gravity="right"
        android:padding="3dip" android:textColor="#ffffff" />
</TableRow>
</TableLayout>

我的最终目标是拥有一个可点击项目的网格，其中项目是主菜单的图像和文本.任何人都可以指导我应该使用哪些布局来实现这一目标?

My goal in the end is to have a grid of clickable items where the item is an image and text for a main menu. Can anyone guide me on what layouts I should use to achieve this?

推荐答案

在我看来，您最好的选择是使用 gridView 支持滚动和间距，并且您可以非常动态地处理每个项目的布局和事件.另一种选择是使用相对/线性布局的组合创建图像布局.

Your best bet in my opinion would be to use the gridView that way it supports scrolling and spacing and you can be very dynamic in what each items layout and events are. Another option is to just create a lay out the images with a combination of Relative/Linear Layouts.

GridView 布局:

GridView layout:

<GridView xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/myGrid"
android:layout_width="match_parent" 
android:layout_height="match_parent"
android:padding="10dp"
android:verticalSpacing="10dp"

android:horizontalSpacing="10dp"
android:numColumns="3"
android:columnWidth="60dp"
android:stretchMode="columnWidth"

android:gravity="center"
/>

然后在您的活动中:

@Override
protected void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
    mGame.status = GameStatus.PLAYING;

    setContentView(R.layout.gridLayout);
    GridView grid = (GridView) findViewById(R.id.myGrid);
    grid.setAdapter(new customAdapter());

    grid.setOnItemClickListener(new OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
                long arg3) {
            //do some stuff here on click
        }
    });
}

public class customAdapter extends BaseAdapter {

    public View getView(int position, View convertView, ViewGroup parent) {
//create a basic imageview here or inflate a complex layout with
//getLayoutInflator().inflate(R.layout...)
        ImageView i = new ImageView(this);

        i.setImageResource(mFams.get(position).imageId);
        i.setScaleType(ImageView.ScaleType.FIT_CENTER);
        final int w = (int) (36 * getResources().getDisplayMetrics().density + 0.5f);
        i.setLayoutParams(new GridView.LayoutParams(w * 2, w * 2));
        return i;
    }

    public final int getCount() {
        return 9;
    }

    public final Family getItem(int position) {
        return mFams.get(position);
    }

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

或者使用线性布局的基本布局:

Or the basic layout using linear layouts:

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

<LinearLayout android:id="@+id/linearLayout1" 
android:layout_height="fill_parent" 
android:layout_weight="1"
android:layout_alignParentLeft="true" 
android:layout_width="fill_parent"
android:orientation="horizontal">

    <ImageView>...</ImageView>
    <ImageView>...</ImageView>
    <ImageView>...</ImageView>

</LinearLayout>

<LinearLayout android:id="@+id/linearLayout2" 
android:layout_height="fill_parent" 
android:layout_weight="1"
android:layout_alignParentLeft="true" 
android:layout_width="fill_parent"
android:orientation="horizontal">

    <ImageView>...</ImageView>
    <ImageView>...</ImageView>
    <ImageView>...</ImageView>

</LinearLayout>

<LinearLayout android:id="@+id/linearLayout3" 
android:layout_height="fill_parent""
android:layout_weight="1"
android:layout_alignParentLeft="true" 
android:layout_width="fill_parent"
android:orientation="horizontal">

    <ImageView>...</ImageView>
    <ImageView>...</ImageView>
    <ImageView>...</ImageView>

</LinearLayout>

这篇关于图标/文本按钮的网格布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！