Android中使用ListView实现漂亮的表格效果

在这里我们要使用android listview来实现显示股票行情，效果图如下，红色表示股票价格上涨，绿色表示股票价格下跌。

第一步、定义color.xml如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="color_dark_grey">#808080</color>
    <color name="color_black">#000000</color>
    <color name="color_green">#00ff00</color>
    <color name="color_red">#ff0000</color>
    <color name="color_white">#ffffff</color>
</resources>

第二步、定义style.xml文件如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- define the list items style begin -->
    <style name="list_item_seperator_layout">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">1dip</item>
        <item name="android:background">@color/color_dark_grey</item>
    </style>
    <style name="list_item_cell_seperator_layout">
        <item name="android:layout_width">1dip</item>
        <item name="android:layout_height">fill_parent</item>
        <item name="android:background">@color/color_dark_grey</item>
    </style>
    <!-- define the list items style end -->
</resources>

第三步、定义listheader的layout文件，stock_list_header.xml如下：

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">
    <tablelayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:stretchcolumns="3">
        <tablerow
            android:id="@+id/stock_list_header_row">
            <view
                style="@style/list_item_cell_seperator_layout"
                />
            <textview
                android:id="@+id/stock_list_header_code"
                android:text="@string/stock_code"
                android:layout_width="60dip"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:padding="2dip"
                />
            <view
                style="@style/list_item_cell_seperator_layout"
                />
            <textview
                android:id="@+id/stock_list_header_symbol"
                android:text="@string/stock_symbol"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:padding="2dip"
                />
            <view
                style="@style/list_item_cell_seperator_layout"
                />
            <textview
                android:id="@+id/stock_list_header_last_price"
                android:text="@string/stock_last_price"
                android:layout_width="60dip"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:padding="2dip"
                />
            <view
                style="@style/list_item_cell_seperator_layout"
                />
            <textview
                android:id="@+id/stock_list_header_price_change"
                android:text="@string/stock_price_change"
                android:layout_width="50dip"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:padding="2dip"
                />
            <view
                style="@style/list_item_cell_seperator_layout"
                />
            <textview
                android:id="@+id/stock_list_header_price_change_percentage"
                android:text="@string/stock_price_change_percent"
                android:layout_width="50dip"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:padding="2dip"
                />
            <view
                style="@style/list_item_cell_seperator_layout"
                />
        </tablerow>
    </tablelayout>
</linearlayout>

<view style="@style/list_item_cell_seperator_layout"/>是用来在每个单元格之间显示出一条垂直的分割线，使单元格之间相互分割开来。

第四步、定义listitem的布局文件，stock_list_item.xml如下：

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">
    <tablelayout
        android:id="@+id/stock_list_item_table_layout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:stretchcolumns="3">
        <tablerow
            android:id="@+id/stock_list_row">
            <view
                style="@style/list_item_cell_seperator_layout"
                />
            <textview
                android:id="@+id/stock_code"
                android:layout_width="60dip"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:padding="2dip" />
            <view
                style="@style/list_item_cell_seperator_layout"
                />
            <textview
                android:id="@+id/stock_symbol"
                android:layout_width="1dip"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:padding="2dip"
                />
            <view
                style="@style/list_item_cell_seperator_layout"
                />
            <textview android:id="@+id/stock_last_price"
                android:layout_width="60dip"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:padding="2dip"
                />
            <view
                style="@style/list_item_cell_seperator_layout"
                />
            <textview
                android:id="@+id/stock_change_price"
                android:layout_width="50dip"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:padding="2dip"
                />
            <view
                style="@style/list_item_cell_seperator_layout"
                />
            <textview
                android:id="@+id/stock_change_percentage"
                android:layout_width="50dip"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:padding="2dip"
                />
            <view
                style="@style/list_item_cell_seperator_layout"
                />
        </tablerow>
    </tablelayout>
</linearlayout>

第五步、定义stock list activity的layout文件stock_list.xml如下：

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <view
        style="@style/list_item_seperator_layout"
        />
    <include
        layout="@layout/stock_list_header"
        />
    <view
        style="@style/list_item_seperator_layout"
        />
    <listview
        android:id="@+id/stock_list_view"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scrollingcache="true"
        android:cachecolorhint="#00000000"
        android:fastscrollenabled="true"
        android:focusable="true"
        android:divider="@color/color_dark_grey"
        android:dividerheight="1dip"
        />
</linearlayout>

<view style="@style/list_item_seperator_layout"/>是为了在header的上下方显示一条线来分割header和list.可能有人会问，为什么这里不直接用listview控件的header呢？

这是因为我们为了使listview在滚动过程中header始终固定在list的最上方，不会随着listview的滚动而消失。

到此为止，layout布局文件基本上定义完了，下面就是如何在代码中实现了。

stocklistactivity.java

package com.android.msoft.mfinance.ui;

import com.android.msoft.mfinance.r;
import com.android.msoft.mfinance.provider.stock;
import com.android.msoft.mfinance.provider.stockmarket.stockmarketcolumns;
import com.android.msoft.mfinance.ui.mfinancepreferenceactivity.bgcolor;
import com.android.msoft.mfinance.ui.mfinancepreferenceactivity.textsize;
import com.android.msoft.mfinance.ui.mfinancepreferenceactivity.updowncolor;

import android.app.activity;
import android.content.intent;
import android.content.sharedpreferences;
import android.database.cursor;
import android.os.bundle;
import android.preference.preferencemanager;
import android.util.log;
import android.util.typedvalue;
import android.view.menu;
import android.view.menuinflater;
import android.view.menuitem;
import android.view.windowmanager;
import android.widget.listview;
import android.widget.tablerow;
import android.widget.textview;

public class stocklistactivity extends activity {

 private static final string tag = "com.android.msoft.mfinance.ui.stocklistactivity";
 private sharedpreferences mpreference;
 private textview mcodetextview;
 private textview msymboltextview;
 private textview mlastpricetextview;
 private textview mpricechangetextview;
 private textview mpricechangepercentagetextview;
 private listview mstocklistview;
 private tablerow mstocklistheader;
 private float mtextsize;

 private int mbgcolor;
 private int mdowntextcolor;
 private int muptextcolor;
 private cursor mstocklistcursor;

 @override
 protected void oncreate(bundle savedinstancestate) {
  super.oncreate(savedinstancestate);

  getwindow().setflags(windowmanager.layoutparams.flag_fullscreen,
    windowmanager.layoutparams.flag_fullscreen);
  setcontentview(r.layout.stock_list);

  mpreference = preferencemanager.getdefaultsharedpreferences(this);

  refreshdisplaypreference();

  mstocklistheader = (tablerow) findviewbyid(r.id.stock_list_header_row);
  mcodetextview = (textview) findviewbyid(r.id.stock_list_header_code);
  msymboltextview = (textview) findviewbyid(r.id.stock_list_header_symbol);
  mlastpricetextview = (textview) findviewbyid(r.id.stock_list_header_last_price);
  mpricechangetextview = (textview) findviewbyid(r.id.stock_list_header_price_change);
  mpricechangepercentagetextview = (textview) findviewbyid(r.id.stock_list_header_price_change_percentage);

  mstocklistview = (listview) findviewbyid(r.id.stock_list_view);

  refreshstocklistheader();

  mstocklistcursor = getcontentresolver().query(
    stock.content_uri_stock_with_market, null, null, null,
    stockmarketcolumns.change_price_percent + " desc");

  stocklistadapter listviewadpater = new stocklistadapter(this,
    mstocklistcursor);
  mstocklistview.setadapter(listviewadpater);
 }

 @override
 protected void ondestroy() {
  if (!mstocklistcursor.isclosed()) {
   mstocklistcursor.close();
  }

  super.ondestroy();
 }

 @override
 public boolean oncreateoptionsmenu(menu menu) {

  menuinflater inflater = getmenuinflater();
  inflater.inflate(r.menu.stock_list_option_menu, menu);
  return super.oncreateoptionsmenu(menu);
 }

 @override
 public boolean onoptionsitemselected(menuitem item) {
  switch (item.getitemid()) {
  case r.id.stock_list_option_menu_settings:
   intent intent = new intent(this, mfinancepreferenceactivity.class);
   startactivity(intent);
   break;
  }

  return super.onoptionsitemselected(item);
 }

 private void refreshdisplaypreference() {

  updowncolor upanddowncolor = mfinancepreferenceactivity.updowncolor
    .valueof(mpreference.getstring("up_down_color", "red_green"));

  if (0 == upanddowncolor.value) { // up: red down: green
   muptextcolor = getresources().getcolor(r.color.color_red);
   mdowntextcolor = getresources().getcolor(r.color.color_green);
  } else { // down: red up: green
   muptextcolor = getresources().getcolor(r.color.color_green);
   mdowntextcolor = getresources().getcolor(r.color.color_red);
  }

  textsize textsize = mfinancepreferenceactivity.textsize
    .valueof(mpreference.getstring("text_size", "normal"));
  mtextsize = typedvalue.applydimension(typedvalue.complex_unit_sp,
    textsize.value, getresources().getdisplaymetrics());

  int colorresid = r.color.color_black;
  bgcolor bgcolor = mfinancepreferenceactivity.bgcolor
    .valueof(mpreference.getstring("bg_color", "black"));

  switch (bgcolor.value) {
  case 0:
   colorresid = r.color.color_black;
   break;

  case 1:
   colorresid = r.color.color_white;
   break;

  default:
   log.e(tag, "invalid bg color");
  }

  mbgcolor = getresources().getcolor(colorresid);
 }

 public float gettextsize() {
  return mtextsize;
 }

 public int getbgcolor() {
  return mbgcolor;
 }

 public int getuptextcolor() {
  return muptextcolor;
 }

 public int getdowntextcolor() {
  return mdowntextcolor;
 }

 private void refreshstocklistheader() {

  mcodetextview.settextsize(mtextsize);
  msymboltextview.settextsize(mtextsize);
  mlastpricetextview.settextsize(mtextsize);
  mpricechangetextview.settextsize(mtextsize);
  mpricechangepercentagetextview.settextsize(mtextsize);

  mstocklistheader.setbackgroundcolor(mbgcolor);
  mstocklistview.setbackgroundcolor(mbgcolor);
 }
}

stocklistadapter.java

package com.android.msoft.mfinance.ui;

import com.android.msoft.mfinance.provider.stock.stockcolumns;
import com.android.msoft.mfinance.provider.stockmarket.stockmarketcolumns;
import android.content.context;
import android.database.cursor;
import android.util.log;
import android.view.view;
import android.view.viewgroup;
import android.widget.baseadapter;

public class stocklistadapter extends baseadapter {

 private static final string tag = "com.android.msoft.mfinance.ui.stocklistadapter";
 private cursor mstocklistcursor;
 private context mcontext;

 private final int scodeindex;
 private final int ssymbolindex;
 private final int sboardindex;
 private final int slastpriceindex;
 private final int schangepriceindex;
 private final int schangepricepercentindex;

 public stocklistadapter(context context, cursor cursor) {
  mstocklistcursor = cursor;
  mcontext = context;

  scodeindex = mstocklistcursor.getcolumnindex(stockcolumns.code);
  ssymbolindex = mstocklistcursor.getcolumnindex(stockcolumns.symbol);
  sboardindex = mstocklistcursor.getcolumnindex(stockcolumns.board);
  slastpriceindex = mstocklistcursor
    .getcolumnindex(stockmarketcolumns.last_price);
  schangepriceindex = mstocklistcursor
    .getcolumnindex(stockmarketcolumns.change_price);
  schangepricepercentindex = mstocklistcursor
    .getcolumnindex(stockmarketcolumns.change_price_percent);
 }

 @override
 public int getcount() {
  log.d(tag, "stock list count:" + mstocklistcursor.getcount());
  return mstocklistcursor.getcount();
 }

 @override
 public object getitem(int position) {
  return null;
 }

 @override
 public long getitemid(int position) {
  return position;
 }

 @override
 public view getview(int position, view convertview, viewgroup parent) {
  stocklistitem listitem;

  mstocklistcursor.movetoposition(position);
  if (null == convertview) {
   string code = mstocklistcursor.getstring(scodeindex);
   string symbol = mstocklistcursor.getstring(ssymbolindex);
   string board = mstocklistcursor.getstring(sboardindex);
   float lastprice = mstocklistcursor.getfloat(slastpriceindex);
   float changeprice = mstocklistcursor.getfloat(schangepriceindex);
   float changepercent = mstocklistcursor
     .getfloat(schangepricepercentindex);

   listitem = new stocklistitem(mcontext, code, symbol, board,
     lastprice, changeprice, changepercent);
  } else {
   listitem = (stocklistitem) convertview;
  }

  return listitem;
 }

}

stocklistitem.java

package com.android.msoft.mfinance.ui;

import com.android.msoft.mfinance.r;
import android.content.context;
import android.view.layoutinflater;
import android.widget.linearlayout;
import android.widget.textview;

public class stocklistitem extends linearlayout {

 public stocklistitem(context context, string code, string symbol,
   string board, float lastprice, float changeprice,
   float changepercent) {
  super(context);

  stocklistactivity stocklistactivity = (stocklistactivity) context;
  float textsize = stocklistactivity.gettextsize();

  layoutinflater factory = layoutinflater.from(context);
  factory.inflate(r.layout.stock_list_item, this);

  textview codetextview = (textview) findviewbyid(r.id.stock_code);
  codetextview.settextsize(textsize);
  codetextview.settext(code);

  textview symboltextview = (textview) findviewbyid(r.id.stock_symbol);
  symboltextview.settextsize(textsize);
  symboltextview.settext(symbol);

  textview lastpricetextview = (textview) findviewbyid(r.id.stock_last_price);
  lastpricetextview.settextsize(textsize);
  lastpricetextview.settext(float.tostring(lastprice));

  textview changepricetextview = (textview) findviewbyid(r.id.stock_change_price);
  changepricetextview.settextsize(textsize);
  changepricetextview.settext(float.tostring(changeprice));

  textview changepercenttextview = (textview) findviewbyid(r.id.stock_change_percentage);
  changepercenttextview.settextsize(textsize);
  changepercenttextview.settext(float.tostring(changepercent));

  if (changeprice > 0) {
   int textcolor = stocklistactivity.getuptextcolor();

   // codetextview.settextcolor(textcolor);
   // symboltextview.settextcolor(textcolor);
   lastpricetextview.settextcolor(textcolor);
   changepricetextview.settextcolor(textcolor);
   changepercenttextview.settextcolor(textcolor);
  }
  else if (changeprice < 0)
  {
            int textcolor="stocklistactivity.getdowntextcolor(); codetextview.settextcolor(textcolor);
   symboltextview.settextcolor(textcolor);
   lastpricetextview.settextcolor(textcolor); changepricetextview.settextcolor(textcolor);
      changepercenttextview.settextcolor(textcolor)
     }
    }
 }

到此就大功告成了，这个例子我们是通过view来画线条分割各个单元格的，另外我们还可以通过定义不同的背景色，通过背景色来达到相似的效果，这个不难，就不写了。