android GridView两行水平滚动实现效果

https://blog.csdn.net/sungdut/article/details/17995683

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

1)main.xml  -- 布局文件

 

  1.  
    <?xml version="1.0" encoding="utf-8"?>
  2.  
    <HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
  3.  
    android:layout_width="fill_parent"
  4.  
    android:layout_height="fill_parent"
  5.  
    android:alwaysDrawnWithCache="true"
  6.  
    android:orientation="vertical"
  7.  
    android:scrollbarAlwaysDrawHorizontalTrack="true"
  8.  
    android:scrollbarAlwaysDrawVerticalTrack="true"
  9.  
    android:scrollbars="horizontal|vertical" >
  10.  
     
  11.  
    <FrameLayout
  12.  
    android:layout_width="wrap_content"
  13.  
    android:layout_height="fill_parent" >
  14.  
     
  15.  
    <GridView
  16.  
    android:id="@+id/data_gridview"
  17.  
    android:layout_width="1395dip" <!--表格需要45列,每列31dip,所以总的宽度是1395dip-->
  18.  
    android:layout_height="fill_parent"
  19.  
    android:layout_gravity="center"
  20.  
    android:background="#ff0000"
  21.  
    android:columnWidth="31dip" <!--每列的宽度-->
  22.  
    android:gravity="center"
  23.  
    android:numColumns="45" <!-- 注意这里,指定gridview有45列,每列的宽度是31个dip-->
  24.  
    android:scrollbarAlwaysDrawHorizontalTrack="true"
  25.  
    android:scrollbarAlwaysDrawVerticalTrack="true"
  26.  
    android:scrollbars="horizontal|vertical"
  27.  
    android:horizontalSpacing="1dip" <!-- 这里和下面的1dip是为了显示表格的格子边框线,做成像表格的效果-->
  28.  
    android:verticalSpacing="1dip" />
  29.  
    </FrameLayout>
  30.  
     
  31.  
    </HorizontalScrollView>

2) 每个gridcell对应的layout文件 

 

 

  1.  
    <?xml version="1.0" encoding="utf-8"?>
  2.  
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.  
    android:layout_width="match_parent"
  4.  
    android:layout_height="match_parent" >
  5.  
     
  6.  
    <ImageView android:id="@+id/CellImage"
  7.  
    android:layout_width="wrap_content"
  8.  
    android:layout_height="wrap_content"
  9.  
    android:layout_centerInParent="true" >
  10.  
    </ImageView>
  11.  
     
  12.  
    </RelativeLayout>

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

 

 

 

  1.  
    import xxxx.xxxx
  2.  
     
  3.  
    public class GridViewTestActivity extends Activity {
  4.  
     
  5.  
    private int disp_rows = 20; //显示多少行
  6.  
    private final static int COLUMN_CNT = 45; //显示多少列,这个要和layout文件里面对应起来
  7.  
     
  8.  
    private GridView dataGridView;
  9.  
     
  10.  
    public void onCreate(Bundle savedInstanceState) {
  11.  
    super.onCreate(savedInstanceState);
  12.  
     
  13.  
    dataGridView = (GridView) findViewById(R.id.data_gridview);
  14.  
    dataGridView.setNumColumns(COLUMN_CNT);//一共45列
  15.  
     
  16.  
    dataGridView.setAdapter(new CellAdapter(getApplicationContext()));
  17.  
    dataGridView.setOnItemClickListener(new OnItemClickListener() {
  18.  
    @Override
  19.  
    public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
  20.  
    Toast.makeText(GridViewTestActivity.this, "" + position, Toast.LENGTH_SHORT).show();
  21.  
    }
  22.  
    });
  23.  
     
  24.  
    } //end onCreate
  25.  
     
  26.  
    class CellAdapter extends BaseAdapter {
  27.  
    private Context mContext;
  28.  
    private LayoutInflater mInflater;
  29.  
     
  30.  
    public CellAdapter(Context c) {
  31.  
    mContext = c;
  32.  
    mInflater = LayoutInflater.from(c);
  33.  
    }
  34.  
     
  35.  
    public int getCount() {
  36.  
    return (disp_rows * COLUMN_CNT); //行数x列数为一共要显示多少个格子
  37.  
    }
  38.  
     
  39.  
    public Object getItem(int position) {
  40.  
    return null; //do nothing now
  41.  
    }
  42.  
     
  43.  
    public long getItemId(int position) {
  44.  
    return 0;
  45.  
    }
  46.  
     
  47.  
    // create a new ImageView for each item referenced by the Adapter
  48.  
    // ImageView 放在了自定义的格子排版文件中,可以扩展使用,也就是说,格子显示的内容可以自己扩展
  49.  
    @Override
  50.  
    public View getView(int position, View convertView, ViewGroup parent) {
  51.  
    int row = getRow(position); //获取该格子对应表格的行和列
  52.  
    int column = getColumn(position);
  53.  
     
  54.  
    ImageView imageView;
  55.  
    if (convertView == null) {
  56.  
    convertView = mInflater.inflate(R.layout.imagecell, null);
  57.  
     
  58.  
    //这里也可以不用自己定义的imagecell排版,而直接使用如TextView 或 ImageView等作为一个格子的显示,这里演示自定义排版是为了扩展使用
  59.  
     
  60.  
    //imageView = new ImageView(mContext); //直接使用ImageView
  61.  
    } //重用View,提高性能 else {
  62.  
     
  63.  
    // imageView = (ImageView) convertView; //直接使用ImageView时
  64.  
    }
  65.  
    imageView = (ImageView) convertView.findViewById(R.id.CellImage); //如果直接使用ImageView,这一行不要
  66.  
    imageView.setBackgroundColor(Color.BLACK);
  67.  
    imageView.setImageResource(R.drawable.cellimage);
  68.  
    imageView.refreshDrawableState();
  69.  
     
  70.  
    return convertView;
  71.  
    }
  72.  
     
  73.  
    private final int getRow(int position) {
  74.  
    return (position / COLUMN_CNT);
  75.  
    }
  76.  
    private final int getColumn(int position) {
  77.  
    return (position % COLUMN_CNT);
  78.  
    }
  79.  
    }
  80.  
    }

 

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

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

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

android GridView两行水平滚动实现效果

上一篇:10年小米测试工程师心路历程(一)


下一篇:@新金融人,点击翻开未来金融新画卷