歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> Android中利用GridView實現水平和垂直均有滾動條的表格效果

Android中利用GridView實現水平和垂直均有滾動條的表格效果

日期:2017/3/1 10:23:17   编辑:Linux編程

研究了一下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文件 --


imagecell.xml

<?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的機制

package com.xxxx.ui

import xxxx.xxxx

public 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實現有的格子裡顯示文本,有的格子裡顯示圖片, 從而達到圖片和文字同時顯示的效果。


缺點: 每個格子的大小必須相同,同時顯示圖片和文字時,比較難調整顯示效果,當然有耐心的同學可以試試,理論上可以做到圖文同時顯示,而且支持不同格子的大小顯示(即有的格子顯示大,有的格子顯示小,根據格子顯示的內容動態的顯示格子的大小),搞出來的同學請告知我一聲,我學習學習。

Copyright © Linux教程網 All Rights Reserved