Android GridView九宫格 图片加文字

http://blog.sina.com.cn/s/blog_8c3095e601019bpx.html

Android GridView九宫格 图片加文字

(2013-07-17 12:26:38)

转载▼

标签： android gridview 九宫格

分类：Android

 前段时间研究了下android中九宫格布局的实现。纵观现在的应用程序,九宫格是非常常见的一种布局方式。很多优秀的手机应用程序都采用了这一布局。下面就android中九宫格布局方式的实现和大家做一个简单的介绍。

首先是main.xml的布局方式如下：

1. <?xml version="1.0" encoding="utf-8"?> 
2. <!--主界面的布局--> 
3. <RelativeLayout 
4.  xmlns:android="http://schemas.android.com/apk/res/android" 
5.     android:orientation="vertical" 
6.     android:layout_width="fill_parent" 
7.     android:layout_height="fill_parent" 
8.      
9.     > 
10.     <RelativeLayout 
11.      android:id="@+id/MainActivityrlTwo" 
12.      android:layout_width="fill_parent" 
13.      android:layout_height="45dp" 
14.       
15.      > 
16.       
17.      </RelativeLayout> 
18.       
19.  <GridView 
20.   android:id="@+id/MainActivityGrid" 
21.   android:layout_width="fill_parent" 
22.   android:layout_height="wrap_content" 
23.   android:numColumns="3" 
24.   android:columnWidth="50dp" 
25.   android:layout_below="@+id/MainActivityrlTwo" 
26.   android:layout_marginTop="5dp" 
27.   /> 
28.     
29.     <RelativeLayout 
30.      android:id="@+id/MainActivityrlThree" 
31.      android:layout_width="fill_parent" 
32.      android:layout_height="60dp" 
33.      android:layout_alignParentBottom="true" 
34.       
35.      > 
36.      <TextView 
37.       android:id="@+id/tvLineBottom" 
38.       android:layout_width="fill_parent" 
39.       android:layout_height="wrap_content" 
40.       android:text="@string/line_default" 
41.       />  
42.      <Button 
43.       android:id="@+id/btmore_MainActivity" 
44.       android:layout_alignParentRight="true" 
45.       android:layout_alignParentBottom="true" 
46.       android:layout_width="wrap_content" 
47.       android:layout_height="wrap_content" 
48.       android:text="More" 
49.        
50.       /> 
51.      </RelativeLayout> 
52.       
53. </RelativeLayout> 

--------------------------------------------------------------------------------------------------

其次就是每一格九宫格的布局方式：

1. <?xml version="1.0" encoding="utf-8"?> 
2. <!--九宫格每一格的布局--> 
3. <LinearLayout 
4.  xmlns:android="http://schemas.android.com/apk/res/android" 
5.     android:orientation="vertical" 
6.     android:layout_width="fill_parent" 
7.     android:layout_height="fill_parent" 
8.     > 
9.     <ImageView 
10.   android:id="@+id/MainActivityImage" 
11.   android:layout_width="50dp" 
12.   android:layout_height="50dp" 
13.   android:layout_gravity="center_horizontal" 
14.   /> 
15.  <TextView 
16.   android:id="@+id/MainActivityText" 
17.   android:layout_width="wrap_content" 
18.   android:layout_height="wrap_content" 
19.   android:layout_gravity="center_horizontal" 
20.   android:textSize="18sp" 
21.   android:lines="1" 
22.   android:layout_marginTop="8dp" 
23.   /> 
24. </LinearLayout> 
25.  

--------------------------------------------------------------------------------------------------

最后就是adapter的编写：

1. public class ImageAdapter extends BaseAdapter { 
2.  private Context context; 
3.    
4.  public ImageAdapter(Context context) { 
5.   this.context=context; 
6.  }  
7.    
8.  private Integer[] images = { 
9.    //九宫格图片的设置 
10.    R.drawable.icon_1, 
11.    R.drawable.icon_2, 
12.    R.drawable.icon_3, 
13.    R.drawable.icon_4, 
14.    R.drawable.icon_5, 
15.    R.drawable.icon_6, 
16.    R.drawable.icon_7, 
17.    R.drawable.icon_8, 
18.    R.drawable.icon_9, 
19.    }; 
20.    
21.  private String[] texts = { 
22.    //九宫格图片下方文字的设置 
23.    "记录支出", 
24.    "记录收入", 
25.    "账本管理", 
26.    "类别管理", 
27.    "查看图表", 
28.    "收支对照", 
29.    "记录心得", 
30.    "新闻公告", 
31.    "系统设置", 
32.    }; 
33.    
34.  //get the number 
35.  @Override  
36.  public int getCount() { 
37.   return images.length; 
38.  }  
39.  
40.  @Override  
41.  public Object getItem(int position) { 
42.   return position; 
43.  }  
44.  
45.  //get the current selector's id number 
46.  @Override  
47.  public long getItemId(int position) { 
48.   return position; 
49.  }  
50.  
51.  //create view method 
52.  @Override  
53.  public View getView(int position, View view, ViewGroup viewgroup) { 
54.   ImgTextWrapper wrapper; 
55.   if(view==null) { 
56.    wrapper = new ImgTextWrapper(); 
57.    LayoutInflater inflater = LayoutInflater.from(context); 
58.    view = inflater.inflate(R.layout.item, null); 
59.    view.setTag(wrapper); 
60.    view.setPadding(15, 15, 15, 15);  //每格的间距 
61.   } else { 
62.    wrapper = (ImgTextWrapper)view.getTag(); 
63.   } 
64.     
65.   wrapper.imageView = (ImageView)view.findViewById(R.id.MainActivityImage); 
66.   wrapper.imageView.setBackgroundResource(images[position]); 
67.   wrapper.textView = (TextView)view.findViewById(R.id.MainActivityText); 
68.   wrapper.textView.setText(texts[position]); 
69.     
70.   return view; 
71.  }  
72. }  
73.  
74. class ImgTextWrapper { 
75.  ImageView imageView; 
76.  TextView textView; 
77.    
78. }  

--------------------------------------------------------------------------------------------------main

public class MainActivity extends Activity {
    GridViewgridView;
    ImageAdapteradapter;
   @Override
    protectedvoid onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
       gridView =(GridView) findViewById(R.id.MainActivityGrid);
       adapter =new ImageAdapter(this);
      gridView.setAdapter(adapter);
    }
}

当然最后的最后就是你得自己准备九张漂亮的图片啦！

九宫格的主界面大功告成！如果还有什么疑问可以留言哈…欢迎交流