android - 带有文本+图像的 Android 自定义 GridLayout

Question

在我的应用程序中，我试图从 Web 服务中获取一组用户的详细信息。然后，我想在 GridLayout 中显示每个用户的图像及其名称。我以前没有使用过 GridLayout，因此尝试浏览在线可用的教程，但其中大多数只处理图像。我需要在网格中显示图像和文本。

如何设置自定义 GridLayout 以显示 Text 和 Images ？

Answer 1

试试这个 ：

  public class GridActivity extends Activity implements AdapterView.OnItemClickListener {
/** Called when the activity is first created. */

Integer[] imageIDs = {
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,

  };

String[] titles = {
        "First",
        "Second",
        "Third",
        "Fourth",
        "Fifth",
        "First",
        "Second",
        "Third",
        "Fourth",
        "Fifth",
        "First",
        "Second",
        "Third",
        "Fourth",
        "Fifth",
        "First",
        "Second",
        "Third",   
        "Fourth",
        "Fifth",
        "First",
        "Second",
        "Third",
        "Fourth",
        "Fifth",
        "First",
        "Second",
        "Third",
        "Fourth",
        "Fifth",

 };
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
  GridView gridView = (GridView) findViewById(R.id.grid);
    gridView.setAdapter(new ImageAdapter(this));


}

public class ImageAdapter extends BaseAdapter 
{
    private Context context;

    public ImageAdapter(Context c) 
    {
        context = c;
    }

    //---returns the number of images---
    public int getCount() {
        return imageIDs.length;
    }

    //---returns the ID of an item--- 
    public Object getItem(int position) {
        return position;
    }

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

    //---returns an ImageView view---
    public View getView(int position, View convertView, ViewGroup parent) 
    { 
        ImageView icon;
    icon = new ImageView(context);

    LayoutInflater inflater = (LayoutInflater)             context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View row=inflater.inflate(R.layout.row, parent, false);
    TextView label=(TextView)row.findViewById(R.id.image_name);
    label.setText(titles[position]);
    icon=(ImageView)row.findViewById(R.id.album_image);

    icon.setImageResource(imageIDs[position]);

    return row;
    }

}

@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
        long arg3) {

    // TODO Auto-generated method stub

}
    }

主文件

    <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical" >   

  <GridView
    android:id="@+id/grid"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_below="@+id/lay"
    android:columnWidth="100px"
    android:horizontalSpacing="5dip"
    android:numColumns="auto_fit"
    android:scrollbars="horizontal"

    android:stretchMode="columnWidth"
    android:verticalSpacing="35px" />
   </LinearLayout>

行.xml

  <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >


  <ImageView
  android:id = "@+id/album_image"
  android:adjustViewBounds="true"
  android:layout_width = "fill_parent"             
  android:layout_height="wrap_content"
  />
  <TextView
  android:id = "@+id/image_name"
  android:layout_width = "fill_parent"             
  android:layout_height="wrap_content"
  android:gravity="center"
  />
  </LinearLayout>

Answer 2

这是带有 ImageView 和 TextView 的 GridView 的一个非常好的示例。

http://mytelcoit.com/2010/02/programming-android-create-icon-with-text-using-gridview-and-layout-inflater/

只需像这样使用 ImageView 和 textView 创建一个 xml 文件，

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/widget44"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_x="201px"
android:layout_y="165px"
android:gravity="center_horizontal">
<ImageView
android:id="@+id/icon_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</ImageView>
<TextView
android:id="@+id/icon_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:gravity="center_horizontal"
android:textColorHighlight="#656565">
</TextView>
</LinearLayout>

然后使用自定义适配器填充它。

@Override
        public View getView(int position, View convertView, ViewGroup parent) {
            // TODO Auto-generated method stub
            View v;
            if(convertView==null){
                LayoutInflater li = getLayoutInflater();
                v = li.inflate(R.layout.icon, null);
                TextView tv = (TextView)v.findViewById(R.id.icon_text);
                tv.setText("Profile "+position);
                ImageView iv = (ImageView)v.findViewById(R.id.icon_image);
                iv.setImageResource(R.drawable.icon);

            }
            else
            {
                v = convertView;
            }
            return v;
        }