带有图像和文本的 GridView

Question

我是 android 的新手，需要一些帮助来完成这项任务。

我有 gridview 女巫从数据库中提取图像和文本并显示它们。当前显示为图像，图像右侧为文本。我想在图像下制作文字。你能帮我完成这个任务吗？这是gridview.xml

  <LinearLayout
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="0.1" >   

    <GridView
        android:id="@+id/gridView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:horizontalSpacing="5dp"
        android:verticalSpacing="5dp"
        android:numColumns="2" >

    </GridView>             
</LinearLayout>

这就是我在其中显示图像和文本的方式table_column.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/bckimageviw"
>
<ImageView
    android:id="@+id/ColPhoto"
    android:layout_width="0dp"
    android:layout_height="0dp"

/>
<LinearLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

        <TextView android:id="@+id/ColName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="25dp"
            android:text="Name"
        />
</LinearLayout>
</LinearLayout>

如果需要 getView()

        public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub

        LayoutInflater inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);


        if (convertView == null) {
            convertView = inflater.inflate(R.layout.table_column, null); 
        }

        // ColPhoto
        ImageView imageView = (ImageView) convertView.findViewById(R.id.ColPhoto);
        imageView.getLayoutParams().height = 80;
        imageView.getLayoutParams().width = 80;
        imageView.setPadding(10, 10, 10, 10);
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
         try
         {
             imageView.setImageBitmap((Bitmap)MyArr.get(position).get("ImageThumBitmap"));
         } catch (Exception e) {
             // When Error
             imageView.setImageResource(android.R.drawable.ic_menu_report_image);
         }
        // ColName
        TextView txtName = (TextView) convertView.findViewById(R.id.ColName);
        txtName.setPadding(5, 0, 0, 0);
        txtName.setText("" + MyArr.get(position).get("name").toString());       

        return convertView;
    }

Answer 1

尝试将方向更改为 "vertical"。

编辑：

就像，Tr4X 说你不需要第二个 LinearLayout。你可以把两者合二为一。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/bckimageviw" >
<ImageView
    android:id="@+id/ColPhoto"
    android:layout_width="0dp"
    android:layout_height="0dp"/>

<TextView 
    android:id="@+id/ColName"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Name" />
</LinearLayout>

Answer 2

我不知道为什么要在另一个LinearLayout中添加单个元素LinearLayout。如果需要将网格项目放在正确的位置，我想改用 RelativeLayout。 `

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <ImageView
        android:id="@+id/ColPhoto"
        android:layout_width="0dp"
        android:layout_height="0dp"
        />
    <TextView android:id="@+id/ColName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/ColPhoto"
        android:text="Name"
        />
</RelativeLayout>

`

Answer 3

您可以使用相对布局并将对齐 textview 设置为 imageview。

试试这个。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#ff0000"
    android:gravity="center" >

    <ImageView
        android:id="@+id/ColPhoto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/ColName"
        android:layout_alignRight="@+id/ColName"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/ColName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/ColPhoto"
        android:gravity="center"
        android:text="Name name" />

</RelativeLayout>

带有图像和文本的 GridView

GridView with image and text

android

gridview