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还是比较建议多去外网转转，看不看得懂无所谓，先混个脸熟嘛！