Android GridView实现多种不同布局样式显示数据

刚刚步入Android开发领域的时候，一次一个项目需要用一个GridView实现多种不同的布局样式效果，当时看到这个需求直接就懵了，感觉挺不可思议的想法。下面就来看下这个多重布局在同一个GridView中如何实现，实现是一种方式，具体的到项目中要做适应性修改。

效果图如下：



具体UI的只是变换了下不同的位置，有兴趣的同行可以自己去调试。

1、activity_more_type_grid_view.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=".MoreTypeGridView" >

<GridView
android:id="@+id/gridview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:horizontalSpacing="10dp"
android:verticalSpacing="10dp"
android:numColumns="2"
android:padding="5dp"
android:fadingEdge="none"
android:scrollbars="none"/>

</RelativeLayout>

2、Item第一种样式布局：adapter_grid_item_one.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="1dp"
android:background="#f47920" >

<ImageView
android:id="@+id/AdapterGridItemOneImage"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:scaleType="fitXY" />

<TextView android:id="@+id/AdapterGridItemOneText"
android:layout_width="fill_parent"
android:layout_height="30dp"
android:gravity="center"
android:textColor="#FFF"
android:textSize="18sp"
android:layout_below="@id/AdapterGridItemOneImage"/>
</RelativeLayout>

3、Item第二种样式布局：adapter_grid_item_two.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="1dp"
android:background="#f47920" >

<TextView android:id="@+id/AdapterGridItemTwoText"
android:layout_width="30dp"
android:layout_height="150dp"
android:gravity="center"
android:textColor="#FFF"
android:textSize="18sp"
android:layout_alignParentRight="true"/>

<ImageView
android:id="@+id/AdapterGridItemTwoImage"
android:layout_width="match_parent"
android:layout_height="150dp"
android:scaleType="fitXY"
android:layout_toLeftOf="@id/AdapterGridItemTwoText" />

</RelativeLayout>

4、Item第三种样式布局：adapter_grid_item_three.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#f47920"
android:padding="1dp" >

<TextView
android:id="@+id/AdapterGridItemThreeText"
android:layout_width="fill_parent"
android:layout_height="30dp"
android:gravity="center"
android:textColor="#FFF"
android:textSize="18sp" />

<ImageView
android:id="@+id/AdapterGridItemThreeImage"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:scaleType="fitXY"
android:layout_below="@id/AdapterGridItemThreeText"/>

</RelativeLayout>

5、Item第四种样式布局：adapter_grid_item_four.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#f47920"
android:padding="1dp" >

<TextView
android:id="@+id/AdapterGridItemFourText"
android:layout_width="30dp"
android:layout_height="150dp"
android:gravity="center"
android:textColor="#FFF"
android:textSize="18sp" />

<ImageView
android:id="@+id/AdapterGridItemFourImage"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:scaleType="fitXY"
android:layout_toRightOf="@id/AdapterGridItemFourText" />

</RelativeLayout>

样式基本相同，就是TextView与ImageView所处的位置关系变化了。

6、为每种模式定义一个常量

public class Constants {

public static final int TYPENUM_CONTENT = 5;

public static final int NUMFIRST = 1;
public static final int NUMSECONd = 2;
public static final int NUMTHREE = 3;
public static final int NUMFOURTH = 4;
}

常量TYPENUM_CONTENT是定义总共有多少种样式布局，这个值要在总体样式布局的基础上加一。

7、Activity界面效果实现：

public class MoreTypeGridView extends Activity {

private GridView  gv;
private MoreTypeGridAdapter adapter;
private List<Map<String,Object>> list;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_more_type_grid_view);

gv = (GridView) findViewById(R.id.gridview);

list = new ArrayList<Map<String,Object>>();
new Thread(new Runnable(){

@Override
public void run() {
Bundle b = new Bundle();
try{Map<String,Object> map = null;
for(int i=0;i<5;i++){
map = new HashMap<String,Object>();
map.put("image", R.drawable.griditem1);
map.put("text", "流星雨的季节"+i);
map.put("Type", getMathRandom());
//					map.put("Type", Constants.NUMFIRST);
list.add(map);

map = new HashMap<String,Object>();
map.put("image", R.drawable.griditem2);
map.put("text", "流星雨的季节"+i);
map.put("Type", getMathRandom());
//					map.put("Type", Constants.NUMSECONd);
list.add(map);

map = new HashMap<String,Object>();
map.put("image", R.drawable.griditem3);
map.put("text", "流星雨的季节"+i);
map.put("Type", getMathRandom());
//					map.put("Type", Constants.NUMTHREE);
list.add(map);

map = new HashMap<String,Object>();
map.put("image", R.drawable.griditem4);
map.put("text", "流星雨的季节"+i);
map.put("Type", getMathRandom());
//					map.put("Type", Constants.NUMFOURTH);
list.add(map);
}
b.putBoolean("bindGrid", true);
}catch(Exception e){}finally{
Message msg = handler.obtainMessage();
msg.setData(b);
handler.sendMessage(msg);
}
}}).start();
}

public int getMathRandom(){
int num = (int)(Math.random()*10);
switch(num%4){
case 0:
return Constants.NUMFIRST;
case 1:
return Constants.NUMSECONd;
case 2:
return Constants.NUMTHREE;
case 3:
return Constants.NUMFOURTH;
}
return Constants.NUMFIRST;
}

private void bindGrid(){
adapter = new MoreTypeGridAdapter(this, list);
gv.setAdapter(adapter);
}

private Handler handler = new Handler(Looper.getMainLooper()){

@Override
public void handleMessage(Message msg) {
try{
if(msg.getData().containsKey("bindGrid")){
bindGrid();
}
}catch(Exception e){}
}

};

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

}

8、适配器Adapter：

public class MoreTypeGridAdapter extends BaseAdapter {

private Context con;
private List<Map<String,Object>> list;
private LayoutInflater inflater;

public MoreTypeGridAdapter(Context context,List<Map<String,Object>> list){
this.con = context;
this.list = list;
inflater = (LayoutInflater)con.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}

@Override
public int getItemViewType(int position) {
return Integer.parseInt(list.get(position).get("Type").toString());
}

@Override
public int getViewTypeCount() {
return Constants.TYPENUM_CONTENT;
}

@Override
public int getCount() {
return list.size();
}

@Override
public Object getItem(int position) {
if(position>=getCount()){
return null;
}
return position;
}

@Override
public long getItemId(int position) {
return position;
}

@Override
public View getView(int arg0, View convertView, ViewGroup arg2) {

viewHolder vh = null;
Map<String,Object> map = list.get(arg0);
if(convertView == null){
vh = new viewHolder();
switch(Integer.parseInt(map.get("Type").toString())){
case Constants.NUMFIRST:
convertView = inflater.inflate(R.layout.adapter_grid_item_one, null);

vh.tv = (TextView) convertView.findViewById(R.id.AdapterGridItemOneText);
vh.iv = (ImageView) convertView.findViewById(R.id.AdapterGridItemOneImage);
break;
case Constants.NUMSECONd:
convertView = inflater.inflate(R.layout.adapter_grid_item_two, null);

vh.tv = (TextView) convertView.findViewById(R.id.AdapterGridItemTwoText);
vh.iv = (ImageView) convertView.findViewById(R.id.AdapterGridItemTwoImage);
break;
case Constants.NUMTHREE:
convertView = inflater.inflate(R.layout.adapter_grid_item_three, null);

vh.tv = (TextView) convertView.findViewById(R.id.AdapterGridItemThreeText);
vh.iv = (ImageView) convertView.findViewById(R.id.AdapterGridItemThreeImage);
break;
case Constants.NUMFOURTH:
convertView = inflater.inflate(R.layout.adapter_grid_item_four, null);

vh.tv = (TextView) convertView.findViewById(R.id.AdapterGridItemFourText);
vh.iv = (ImageView) convertView.findViewById(R.id.AdapterGridItemFourImage);
break;
}
LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT,
getDipConversionPx(con,180));
convertView.setLayoutParams(lp);

convertView.setTag(vh);
}else{
vh = (viewHolder) convertView.getTag();
}

vh.tv.setText(map.get("text").toString());
vh.iv.setImageResource(Integer.parseInt(map.get("image").toString()));

return convertView;
}

public class viewHolder{
public TextView tv;
public ImageView iv;
}

public int getDipConversionPx(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}

}

总体上来说没有多少技术难点，基本就是API多读两遍，里面很多出人意料的方法，学习android还是比较建议多去外网转转，看不看得懂无所谓，先混个脸熟嘛！