Android的自定义GridLayout的文字+图片(Android Custom GridLay

在我的应用程序，我想从web服务的一组用户的详细信息。 然后，我想他们在GridLayout名一起显示每个用户的图像。 我没有使用网格布局之前，因此试图去通过网上提供的教程，但大多处理只是形象。 我需要同时显示图片，并在网格中的文本。

如何设置自定义网格布局，以显示与图像一起的文本？

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

}
    }

main.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" >   

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

Row.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:

这里是一个很好的例子fo与ImageView的和TextView的GridView控件。

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

只需创建一个XML文件的ImageView和TextView的这个样子，

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

文章来源: Android Custom GridLayout with Text+Image