android中九宫格布局的实现

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

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

                            <?xml version="1.0" encoding="utf-8"?> 
                 
                <RelativeLayout 
                 xmlns:android="http://schemas.android.com/apk/res/android" 
                    android:orientation="vertical" 
                    android:layout_width="fill_parent" 
                    android:layout_height="fill_parent" 
                      
                    > 
                    <RelativeLayout 
                     android:id="@+id/MainActivityrlTwo" 
                     android:layout_width="fill_parent" 
                     android:layout_height="45dp" 
                       
                     > 
                       
                     RelativeLayout> 
                       
                 <GridView 
                  android:id="@+id/MainActivityGrid" 
                  android:layout_width="fill_parent" 
                  android:layout_height="wrap_content" 
                  android:numColumns="3" 
                  android:columnWidth="50dp" 
                  android:layout_below="@+id/MainActivityrlTwo" 
                  android:layout_marginTop="5dp" 
                  /> 
                    
                    <RelativeLayout 
                     android:id="@+id/MainActivityrlThree" 
                     android:layout_width="fill_parent" 
                     android:layout_height="60dp" 
                     android:layout_alignParentBottom="true" 
                       
                     > 
                     <TextView 
                      android:id="@+id/tvLineBottom" 
                      android:layout_width="fill_parent" 
                      android:layout_height="wrap_content" 
                      android:text="@string/line_default" 
                      />   
                     <Button 
                      android:id="@+id/btmore_MainActivity" 
                      android:layout_alignParentRight="true" 
                      android:layout_alignParentBottom="true" 
                      android:layout_width="wrap_content" 
                      android:layout_height="wrap_content" 
                      android:text="More" 
                        
                      /> 
                     RelativeLayout> 
                       
                RelativeLayout>

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

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

                            <?xml version="1.0" encoding="utf-8"?> 
                 
                <LinearLayout 
                 xmlns:android="http://schemas.android.com/apk/res/android" 
                    android:orientation="vertical" 
                    android:layout_width="fill_parent" 
                    android:layout_height="fill_parent" 
                    > 
                    <ImageView 
                  android:id="@+id/MainActivityImage" 
                  android:layout_width="50dp" 
                  android:layout_height="50dp" 
                  android:layout_gravity="center_horizontal" 
                  /> 
                 <TextView 
                  android:id="@+id/MainActivityText" 
                  android:layout_width="wrap_content" 
                  android:layout_height="wrap_content" 
                  android:layout_gravity="center_horizontal" 
                  android:textSize="18sp" 
                  android:lines="1" 
                  android:layout_marginTop="8dp" 
                  /> 
                LinearLayout>

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

最后就是adapter的编写：

                            public class ImageAdapter extends BaseAdapter {  
                 private Context context;  
                   
                 public ImageAdapter(Context context) {  
                  this.context=context;  
                 }  
                   
                 private Integer[] images = {  
                   //九宫格图片的设置  
                   R.drawable.icon_1,  
                   R.drawable.icon_2,  
                   R.drawable.icon_3,  
                   R.drawable.icon_4,  
                   R.drawable.icon_5,  
                   R.drawable.icon_6,  
                   R.drawable.icon_7,  
                   R.drawable.icon_8,  
                   R.drawable.icon_9,  
                   };  
                   
                 private String[] texts = {  
                   //九宫格图片下方文字的设置  
                   "记录支出",  
                   "记录收入",  
                   "账本管理",  
                   "类别管理",  
                   "查看图表",  
                   "收支对照",  
                   "记录心得",  
                   "新闻公告",  
                   "系统设置",  
                   };  
                   
                 //get the number  
                 @Override  
                 public int getCount() {  
                  return images.length;  
                 }  
                 
                 @Override  
                 public Object getItem(int position) {  
                  return position;  
                 }  
                 
                 //get the current selector's id number  
                 @Override  
                 public long getItemId(int position) {  
                  return position;  
                 }  
                 
                 //create view method  
                 @Override  
                 public View getView(int position, View view, ViewGroup viewgroup) {  
                  ImgTextWrapper wrapper;  
                  if(view==null) {  
                   wrapper = new ImgTextWrapper();  
                   LayoutInflater inflater = LayoutInflater.from(context);  
                   view = inflater.inflate(R.layout.item, null);  
                   view.setTag(wrapper);  
                   view.setPadding(15, 15, 15, 15);  //每格的间距  
                  } else {  
                   wrapper = (ImgTextWrapper)view.getTag();  
                  }  
                    
                  wrapper.imageView = (ImageView)view.findViewById(R.id.MainActivityImage);  
                  wrapper.imageView.setBackgroundResource(images[position]);  
                  wrapper.textView = (TextView)view.findViewById(R.id.MainActivityText);  
                  wrapper.textView.setText(texts[position]);  
                    
                  return view;  
                 }  
                }  
                 
                class ImgTextWrapper {  
                 ImageView imageView;  
                 TextView textView;  
                   
                }

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

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

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

本人QQ：523072842

本文出自 “这一秒不放弃” 博客，请务必保留此出处http://jackxlee.blog.51cto.com/2493058/674409

更多相关文章

随机推荐