Android Custom GridLayout with Text + Image

Question

在我的應用程序中，我試圖從Web服務中獲取一組用戶的詳細信息。 然後，我想在GridLayout中顯示每個用戶的圖像以及他們的名字。 我之前沒有使用GridLayout，因此試圖通過在線提供的教程，但其中大多數只處理圖像。我需要在網格中顯示圖像和文本。

如何設置自定義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

這是GridView與ImageView和TextView的很好的例子。

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