Android Custom GridLayout with Text + Image

Question

내 응용 프로그램에서 웹 서비스에서 일련의 사용자에 대한 세부 정보를 얻으려고합니다. 그런 다음 각 사용자의 이미지를 이름과 함께 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

다음은 ImageView 및 TextView가있는 GridView의 좋은 예입니다.

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

는 단순히

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

을 같은 이미지 뷰와 텍스트 뷰와 XML 파일을 만든 다음 그것을 채우기 위해 사용자 정의 어댑터를 사용합니다.

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