gridview的使用

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



效果图如下：



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

1、activity_more_type_grid_view.xml

[java] view
plain copy

<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="@+
4000
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

[java] view
plain copy

<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

[java] view
plain copy

<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

[java] view
plain copy

<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

[java] view
plain copy

<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、为每种模式定义一个常量

[java] view
plain copy

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界面效果实现：

[java] view
plain copy

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：

[html] view
plain copy

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