Android中利用GridView实现水平和垂直均有滚动条的表格效果

文章转载自：http://blog.csdn.net/abnerchai/article/details/7540820，谢谢作者

研究了一下Android的GridView，但是默认的GridView只支持垂直滚动，不支持水平滚动，有时我们为了实现表格效果，想达到水平和垂直均有滚动条，可以利用下面方法实现）。

1）main.xml -- 布局文件

<?xml version="1.0" encoding="utf-8"?><HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:alwaysDrawnWithCache="true"    android:orientation="vertical"    android:scrollbarAlwaysDrawHorizontalTrack="true"    android:scrollbarAlwaysDrawVerticalTrack="true"    android:scrollbars="horizontal|vertical" >    <FrameLayout        android:layout_width="wrap_content"        android:layout_height="fill_parent" >        <GridView            android:id="@+id/data_gridview"            android:layout_width="1395dip"  <!--表格需要45列，每列31dip，所以总的宽度是1395dip-->            android:layout_height="fill_parent"            android:layout_gravity="center"            android:background="#ff0000"            android:columnWidth="31dip" <!--每列的宽度-->            android:gravity="center"            android:numColumns="45"          <!-- 注意这里，指定gridview有45列，每列的宽度是31个dip-->            android:scrollbarAlwaysDrawHorizontalTrack="true"            android:scrollbarAlwaysDrawVerticalTrack="true"            android:scrollbars="horizontal|vertical"            android:horizontalSpacing="1dip"  <!-- 这里和下面的1dip是为了显示表格的格子边框线，做成像表格的效果-->            android:verticalSpacing="1dip" />    </FrameLayout></HorizontalScrollView>

2) 每个gridcell对应的layout文件

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <ImageView android:id="@+id/CellImage"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true" >    </ImageView></RelativeLayout>

3)Activity的代码 -- 这里为了提高性能，实现了重用View的机制

import xxxx.xxxxpublic class GridViewTestActivity extends Activity {    private int disp_rows = 20;  //显示多少行    private final static int COLUMN_CNT = 45; //显示多少列，这个要和layout文件里面对应起来    private GridView dataGridView;            public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);                dataGridView = (GridView) findViewById(R.id.data_gridview);        dataGridView.setNumColumns(COLUMN_CNT);//一共45列                dataGridView.setAdapter(new CellAdapter(getApplicationContext（）));        dataGridView.setOnItemClickListener(new OnItemClickListener() {            @Override            public void onItemClick(AdapterView<?> parent, View v, int position, long id) {                Toast.makeText(GridViewTestActivity.this, "" + position, Toast.LENGTH_SHORT).show();            }        });            } //end onCreate     class CellAdapter extends BaseAdapter {        private Context mContext;        private LayoutInflater mInflater;        public CellAdapter(Context c) {            mContext = c;            mInflater = LayoutInflater.from(c);        }        public int getCount() {            return (disp_rows * COLUMN_CNT);  //行数x列数为一共要显示多少个格子        }        public Object getItem(int position) {            return null; //do nothing now        }        public long getItemId(int position) {            return 0;        }        // create a new ImageView for each item referenced by the Adapter       // ImageView 放在了自定义的格子排版文件中，可以扩展使用，也就是说，格子显示的内容可以自己扩展        @Override        public View getView(int position, View convertView, ViewGroup parent) {            int row = getRow(position); //获取该格子对应表格的行和列            int column = getColumn(position);                        ImageView imageView;            if (convertView == null) {                        convertView = mInflater.inflate(R.layout.imagecell, null);                        //这里也可以不用自己定义的imagecell排版，而直接使用如TextView 或 ImageView等作为一个格子的显示，这里演示自定义排版是为了扩展使用                       //imageView = new ImageView(mContext);  //直接使用ImageView            }  //重用View，提高性能 else  {                   // imageView = (ImageView) convertView;   //直接使用ImageView时           }            imageView = (ImageView) convertView.findViewById(R.id.CellImage); //如果直接使用ImageView,这一行不要            imageView.setBackgroundColor(Color.BLACK);            imageView.setImageResource(R.drawable.cellimage);            imageView.refreshDrawableState();                                return convertView;        }                private final int getRow(int position) {            return (position / COLUMN_CNT);        }        private final int getColumn(int position) {            return (position % COLUMN_CNT);        }    }}

以上即可实现利用GridView实现二维表格效果，性能也不错，而且有垂直和水平均有滚动条。

优点：性能好，可以利用自定义Layout作为每个格子的显示，同时可以进一步扩展CellAdapter 的getView方法，根据convertView instanceOf ImageView 或 TextView实现有的格子里显示文本，有的格子里显示图片, 从而达到图片和文字同时显示的效果。

缺点：每个格子的大小必须相同，同时显示图片和文字时，比较难调整显示效果，当然有耐心的同学可以试试，理论上可以做到图文同时显示，而且支持不同格子的大小显示（即有的格子显示大，有的格子显示小，根据格子显示的内容动态的显示格子的大小），搞出来的同学请告知我一声，我学习学习。

更多相关文章

随机推荐