使用圖像和文本的Android網格視圖

Question

我需要在網格視圖中的每個圖像下方顯示文本。我已經能夠在網格視圖中放置圖像，但是如何將文本放在它下面？下面我發佈代碼片段。

fragment_facility_grid.xml

<?xml version="1.0" encoding="utf-8"?> 
<GridView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/grid_view" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:numColumns="auto_fit" 
    android:columnWidth="90dp" 
    android:horizontalSpacing="10dp" 
    android:verticalSpacing="10dp" 
    android:gravity="center" 
    android:stretchMode="columnWidth" > 

</GridView> 

FacilityAdapter.class

package com.androidbelieve.HIT_APP; 

/** 
* Created by Akash on 2/13/2016. 
*/ 
import android.content.Context; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.BaseAdapter; 
import android.widget.GridView; 
import android.widget.ImageView; 
import android.widget.TextView; 

public class FacilityAdapter extends BaseAdapter { 
    private Context mContext; 


    // Keep all Images in array 
    public Integer[] mThumbIds = { 
      R.drawable.bank, R.drawable.bus, 
      R.drawable.girlshostel , R.drawable.guesthouse, 
      R.drawable.gym , R.drawable.library,R.drawable.sports 

    }; 

    public String[] mThumbNames = { 
      "Bank", "Bus Service","Guest House", "GYM","Fac1","Fac2" 

    }; 

    // Constructor 
    public FacilityAdapter(Context c){ 
     mContext = c; 
    } 

    @Override 
    public int getCount() { 
     return mThumbIds.length; 
    } 

    @Override 
    public Object getItem(int position) { 
     return mThumbIds[position]; 
    } 

    @Override 
    public long getItemId(int position) { 
     return 0; 
    } 

    @Override 
    public View getView(int position, View convertView, ViewGroup parent) { 

     View gridView; 
     gridView = new View(mContext); 



     ImageView imageView = new ImageView(mContext); 
     imageView.setImageResource(mThumbIds[position]); 
     imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); 
     imageView.setLayoutParams(new GridView.LayoutParams(300, 300)); 
     return imageView; 
    } 

} 

謝謝

Answer 1

儘量延長這一點：

SimpleAdapter

或默認喜歡使用它：

private Context mContext; 
// Keep all Images in array 
public Integer[] mThumbIds = { 
    R.drawable.bank, R.drawable.bus, 
    R.drawable.girlshostel , R.drawable.guesthouse, 
    R.drawable.gym , R.drawable.library,R.drawable.sports 
}; 
public String[] mThumbNames = {"Bank", "Bus Service","Guest House", "GYM","Fac1","Fac2"}; 
Simple adapter= new SimpleAdapter(mContext, List<?> your_list, R.layout.your_layout_file, from, to); 

你也必須做一個佈局文件，並確定如何將圖像和文字，你想看看像這樣每個gridview的項目：

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

    <ImageView 
     android:id="@+id/this_image_id_have_to_be_used_in_your_to_array" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:scaleType="centerCrop"/> 

    <TextView 
     android:id="@+id/this_text_id_have_to_be_used_in_your_to_array" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="5dp" 
     android:gravity="center"/> 

</LinearLayout> 

希望它有助於！！！

Answer 2

我寧願建議，而不是在運行時創建ImageView動態，並返回從getView()方法，你應該爲你的list items的每一個xml。下面是示例xml與ImageView和TextView

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

    <ImageView 
     android:id="@+id/image" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:scaleType="centerCrop"/> 

    <TextView 
     android:id="@+id/text" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="5dp" 
     android:gravity="center"/> 

</LinearLayout> 

，也應該遵循ViewHolder Pattern，讓您GridView內存使用效率。你getView()方法看上去都差不多這個

@Override 
    public View getView(int arg0, View convertView, ViewGroup arg2) { 
     ViewHolder holder; 
     if (convertView == null) { 
      holder = new ViewHolder(); 
      convertView = layoutInflater.inflate(R.layout.yourxml, 
        null); 
      holder.textview= (TextView) convertView.findViewById(R.id.text); 
      holder.imageview= (ImageView) convertView.findViewById(R.id.image); 
      holder.imageView.getLayoutParams().width = yourImageWidth; 
      holder.imageView.getLayoutParams().height = yourImageHeight; 
      convertView.setTag(holder); 
     } else { 
      holder = (ViewHolder) convertView.getTag(); 
     } 

     holder.imageView.setImageResource(mThumbIds[position]); 
     holder.textview.setText(mThumbNames[position]); 
     return convertView; 
    } 

    static class ViewHolder { 
     ImageView imageView; 
     TextView textView; 
    }