当前位置：首页 > 资讯 > 技术文档

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

时间：2022-12-22 07:55 编辑：来源：阅读：
扫一扫，手机访问

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

在这里我们要使用Android ListView来实现显示股票行情，效果图如下，红色表示股票价格上涨，绿色表示股票价格下跌。 [img]http://files.jb51.net/file_images/article/201410/20141010133052125.gif?201491013314[/img] [b]第一步、定义color.xml如下： [/b]

[u]复制代码[/u] 代码如下:

<?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>

[b]第二步、定义style.xml文件如下： [/b]

[u]复制代码[/u] 代码如下:

<?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>

[b]第三步、定义ListHeader的layout文件，stock_list_header.xml如下： [/b]

[u]复制代码[/u] 代码如下:

<?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"/>是用来在每个单元格之间显示出一条垂直的分割线，使单元格之间相互分割开来。 [b]第四步、定义ListItem的布局文件，stock_list_item.xml如下：[/b]

[u]复制代码[/u] 代码如下:

<?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>

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

[u]复制代码[/u] 代码如下:

<?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布局文件基本上定义完了，下面就是如何在代码中实现了。 [b]StockListActivity.java[/b]

[u]复制代码[/u] 代码如下:

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);

 }

}

[b]StockListAdapter.java[/b]

[u]复制代码[/u] 代码如下:

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;

 }

}

[b]StockListItem.java[/b]

[u]复制代码[/u] 代码如下:

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来画线条分割各个单元格的，另外我们还可以通过定义不同的背景色，通过背景色来达到相似的效果，这个不难，就不写了。

全部评论(0)

上一篇：Android WebView 应用界面开发教程
下一篇：Android中捕获全局异常实现代码

资讯排行榜
更多>>