'[안드로이드] GridView 활용'에 해당되는 글 1건

  1. 2011.05.30 [안드로이드] GridView 활용
  

How to create Icon With text like home screen, here is my example screen:

Icon with Text Programming Android: Create Icon with Text Using GridView and Layout Inflater

To do something like this we need to use GridView and make The Icon with text using the XML layout and then using LayoutInflater to read the XML and put it into the Adapter. Lets begin with the icon.xml(we put it into /res/layout/) that will be the view to show ImageView and Text together.

01 <LinearLayout
03 android:id="@+id/widget44"
04 android:layout_width="wrap_content"
05 android:layout_height="wrap_content"
06 android:orientation="vertical"
07 android:layout_x="201px"
08 android:layout_y="165px"
09 android:gravity="center_horizontal">
10 <ImageView
11 android:id="@+id/icon_image"
12 android:layout_width="wrap_content"
13 android:layout_height="wrap_content">
14 </ImageView>
15 <TextView
16 android:id="@+id/icon_text"
17 android:layout_width="wrap_content"
18 android:layout_height="wrap_content"
19 android:text="TextView"
20 android:gravity="center_horizontal"
21 android:textColorHighlight="#656565">
22 </TextView>
23 </LinearLayout>

Here we put the ImageView and TextView into Linear Layout. In line 7 and 8 we define how big is our icon with layout_x and layout_y. Thats all, this icon.xml file next we will use in the Adapter to fill in our GridView.

Lets go to our GridView XML. I name it main_switch.xml, this locate in /res/layout/.

01 <?xml version="1.0" encoding="utf-8"?>
02 <GridView
04     android:id="@+id/GridView01"
05     android:layout_width="fill_parent"
06     android:layout_height="fill_parent"
07     android:padding="10dp"
08     android:verticalSpacing="10dp"
09     android:horizontalSpacing="10dp"
10     android:numColumns="auto_fit"
11     android:columnWidth="60dp"
12     android:stretchMode="columnWidth"
13     android:gravity="center">
14 </GridView>

In this XML file we define the main layout of our screen, and how will be the grid will be display. This will be load to our main Activity.

Lets go to our Activity Class

01 public class MainSwitch extends Activity{
02     GridView grid_main;
03     @Override
04     public void onCreate(Bundle savedInstanceState){
05         super.onCreate(savedInstanceState);
06         setContentView(R.layout.main_switch);
07  
08         grid_main = (GridView)findViewById(R.id.GridView01);
09         grid_main.setAdapter(new ImageAdapter(this));
10     }
11     public class ImageAdapter extends BaseAdapter{
12         Context mContext;
13         public static final int ACTIVITY_CREATE = 10;
14         public ImageAdapter(Context c){
15             mContext = c;
16         }
17         @Override
18         public int getCount() {
19             // TODO Auto-generated method stub
20             return 5;
21         }
22  
23         @Override
24         public View getView(int position, View convertView, ViewGroup parent) {
25             // TODO Auto-generated method stub
26             View v;
27             if(convertView==null){
28                 LayoutInflater li = getLayoutInflater();
29                 v = li.inflate(R.layout.icon, null);
30                 TextView tv = (TextView)v.findViewById(R.id.icon_text);
31                 tv.setText("Profile "+position);
32                 ImageView iv = (ImageView)v.findViewById(R.id.icon_image);
33                 iv.setImageResource(R.drawable.icon);
34  
35             }
36             else
37             {
38                 v = convertView;
39             }
40             return v;
41         }
42     }
43 }

Line 4 – line 10 : we overide onCreate() from the Activity class, here we setContentView() to main_switch.xml, get the GridView and then fill it with the ImageAdapter class that extend from BaseAdapter.

line 24-41 : we define the view that will display on the grid, we use LayoutInflater to get view from icon.xml file that we already define before. We also can manipulate both ImageView and TextView with what parameter that we want to set, for example we can set the text or change the ImageView Resource, etc.

line 18-21 : we set how many icon we want to display.



또는



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

 

package com.MyImgGrid;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.*;
import android.widget.*;

public class MyImgGrid extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
       
        GridView myGrid = (GridView) findViewById(R.id.GridView01);
        myGrid.setAdapter(new ImageAdapter(this));
    }
   
    public class ImageAdapter extends BaseAdapter {
       private Context mContext;
     
       // 추가
       public ImageAdapter(Context c) {
           mContext = c;
       }
     
       // 수정
       public int getCount() {
          return mThumbs.length;
       }

 

       public Object getItem(int position) {
             return null;
       }

 

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

 

       // 수정
      public View getView(int position, View convertView, ViewGroup parent) {
           ImageView imgView;
          if (convertView == null) {
               imgView = new ImageView(mContext);
               imgView.setLayoutParams(new GridView.LayoutParams(110, 110));
               imgView.setScaleType(ImageView.ScaleType.CENTER_CROP);
               imgView.setPadding(4, 4, 4, 4);
           }
           else {
              imgView = (ImageView) convertView;
           }

           imgView.setImageResource(mThumbs[position]);
           return imgView;
       }
  
       // 추가
      private Integer[] mThumbs = {
           R.drawable.f1, R.drawable.f2, R.drawable.f3, R.drawable.f4,
           R.drawable.f5,  R.drawable.f6
       };
   }
}

 

Posted by 예배하는 프로그래머