android 九宫格的实现

最近项目中有需要用到九宫格样式布局，所以弄了下，个人觉得这样的布局在许多地方还是很好看的，所以把她分享出来，有需要的朋友可以参考下。

一、基本思路

分3步完成：

1、配置XML文件；2、编写GridView适配器，继承BaseAdapter；3、准备素材，九宫格图片及文字标题。

二、效果图

三、源代码

package com.example.jiugongge;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
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 MainActivity extends Activity {
private ImageAdapter madapter;
private GridView maridview;
private static Integer[] images = {
// 九宫格图片的设置
R.drawable.main_libers, R.drawable.main_libers,
R.drawable.main_libers, R.drawable.main_libers,
R.drawable.main_libers, R.drawable.main_libers,
R.drawable.main_libers, };
private static String[] texts = {
// 九宫格标题
"九宫格1", "九宫格2", "九宫格3", "九宫格4", "九宫格5", "九宫格6", "九宫格7" };

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
madapter = new ImageAdapter(this);
maridview = (GridView) findViewById(R.id.gridView1);
maridview.setAdapter(madapter);
}

/** Custom adapter 九宫格格式 ,extends BaseAdapter calss . */
public class ImageAdapter extends BaseAdapter {
private Context context;

public ImageAdapter(Context context) {
this.context = context;
}

// public void setDevices(List<AirDevice> mDevices) {
// this.mdevices = mDevices;
// Log.d(TAG, "this.mdevices " + mdevices);
// }

// get the show count number
@Override
public int getCount() {
return images.length;
}

@Override
public Object getItem(int position) {
return images.length;
}

// 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;
// init AirDevice object by seted devices.
// AirDevice mdevice = mdevices.get(position);
if (view == null) {
wrapper = new ImgTextWrapper();
LayoutInflater inflater = LayoutInflater.from(context);
view = inflater.inflate(R.layout.mainstyle, null);
view.setTag(wrapper);
view.setPadding(15, 15, 15, 15); // 每格的间距
} else {
wrapper = (ImgTextWrapper) view.getTag();
}
wrapper.imageView = (ImageView) view.findViewById(R.id.Image);
wrapper.imageView.setBackgroundResource(images[position]);
wrapper.textView = (TextView) view.findViewById(R.id.Text);
wrapper.textView.setText(texts[position]);
return view;
}
}

class ImgTextWrapper {
ImageView imageView;
TextView textView;
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

}

四、配置文件XML

1、activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >

<GridView
android:id="@+id/gridView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:numColumns="3" >
</GridView>

</RelativeLayout>

2、mainstyle.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/Image"
android:layout_width="50dp"
android:layout_height="50dp"
android:contentDescription="@string/action_settings"
android:layout_gravity="center_horizontal" />

<TextView
android:id="@+id/Text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="8dp"
android:lines="1"
android:textSize="18sp" />

</LinearLayout>

ok,z这样九宫格就完成了，当然这是固定的，也就是说是静态的，如果要动态加载的话，思路是一样的。