Question

我正在尝试创建一个3 x 3网格的项目。每个项目都在ImageView之上包含TextView。不幸的是，我遇到了让一切都很好玩的问题。

这是我尝试并排获得2件这样的物品。文本视图甚至没有显示，图标被挤压在一起（而不是均匀间隔）

<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>

我的目标最终是拥有一个可点击项目网格，其中项目是主菜单的图像和文本。任何人都可以指导我使用什么布局来实现这个目标吗？

Answer 1

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

GridView布局：

<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;
    }
}

使用线性布局的基本布局：

<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>

Answer 2

你应该使用GridView来做网格，而不是TableRows。 Have you seen Android's tutorial for GridView's?为了能够通过覆盖文本的图像实现您想要的效果，您需要使用Frame Android's FrameLayout example.中所示的FrameLayout。但是，这里需要应用此布局将在Gridview中的每个项目。

例如，假设您创建一个名为image_text_view.xml的布局文件，如下所示：

    <FrameLayout
xmlns:android = "http://schemas.android.com/apk/res/android"
android:id="@+id/gridImage"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:gravity="center_horizontal">
<ImageView
android:id="@+id/image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:adjustViewBounds="false">
</ImageView>
<CheckedTextView
android:id="@+id/imageTick"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:textColor="#000000"
android:layout_gravity="center_horizontal|bottom"
android:checkMark="@drawable/icon"
android:checked="false"
android:visibility="invisible"
>
</CheckedTextView>
</FrameLayout>

您需要在每个GridView项目中应用此布局。为此（编辑Android的GridView示例）您需要在ImageAdapter中重新定义getView，如下所示：

public View getView(int position, View convertView, ViewGroup parent) {
View v;
    if(convertView==null){
        v = LayoutInflater.from(mContext).inflate(R.layout.image_text_view,null);
        v.setLayoutParams(new GridView.LayoutParams(100,100));

        ImageView imageView = (ImageView)v.findViewById(R.id.image);
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        imageView.setPadding(8, 8, 8, 8);
        imageView.setImageResource(mThumbsIds[position]);

                    CheckedTextView checkedTextView = (TextView) v.findViewById(R.id.imageTick);
                    checkedTextView.setEnabled(true);
                    checkedTextView.setVisibility(View.VISIBLE);

    }
    else
    {
        v = convertView;
    }


    return v;

例如，使用此功能，您将拥有覆盖网格中每个项目的图像的任何设置（无论是文本还是图标）。您可能需要对此示例进行一些小调整以满足您的确切需求，但这是我将采用的策略。

图标/文本按钮的网格布局

2 个答案: