登录
当前位置： 首页 > 编程笔记 >

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

宋正真
2023-03-14
本文向大家介绍Android中使用ListView实现漂亮的表格效果，包括了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来画线条分割各个单元格的，另外我们还可以通过定义不同的背景色，通过背景色来达到相似的效果，这个不难，就不写了。

 类似资料：
  • Android网格布局GridView实现漂亮的多选效果

    本文向大家介绍Android网格布局GridView实现漂亮的多选效果，包括了Android网格布局GridView实现漂亮的多选效果的使用技巧和注意事项，需要的朋友参考一下 上一篇文章中主要讲了GridView的简单应用，以网格的形式展示了一些图片，对于图片也有点击监听操作。但是，如果我们在浏览图片的时候需要一些选中操作、甚至是多选操作的时候。这样的功能我们又该如何实现呢？ 可以使用Action

  • jQuery实现的漂亮表单效果代码

    本文向大家介绍jQuery实现的漂亮表单效果代码，包括了jQuery实现的漂亮表单效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现的漂亮表单效果代码。分享给大家供大家参考。具体如下： 这是一款基于jQuery的漂亮的表单效果，将表单的输入框换成了横线，加入了背景，引入了jQuery插件，样式上特别漂亮，是一个值得借鉴的jQuery表单美化实例，而且本表单在布局上完全

  • 使用StringBuilder的漂亮表

    问题内容： 我知道“ printf”方法可以使用字符串格式。 我的问题是：有没有办法用StringBuilder类创建漂亮的表？ 例如： 在该行下，我必须添加各列的值！ 做这样的事情：示例，但使用StringBuilder 所以社区希望看到我的答案（我不明白为什么……但是我会以任何方式表示出来！） 现在向我解释，为什么看到我的答案会对我有所帮助？我真的很想看看你的答案！ 问题答案： 当然，一种简单

  • js实现YouKu的漂亮搜索框效果

    本文向大家介绍js实现YouKu的漂亮搜索框效果，包括了js实现YouKu的漂亮搜索框效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现YouKu的漂亮搜索框效果。分享给大家供大家参考。具体如下： 运行效果如下图所示： 在线演示地址如下： http://demo.jb51.net/js/2015/js-youku-search-style-codes/ 具体代码如下： 希望本文所

  • 非常漂亮的新年祝福!C语言实现漂亮的烟花效果

    本文向大家介绍非常漂亮的新年祝福!C语言实现漂亮的烟花效果，包括了非常漂亮的新年祝福!C语言实现漂亮的烟花效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了C语言实现漂亮的烟花效果展示的具体代码，供大家参考，具体内容如下 程序名称：祝福烟花，祝福朋友 编译环境：VC++6.0 && easyx(立冬版)  以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程

  • 微信小程序实现漂亮的弹窗效果

    本文向大家介绍微信小程序实现漂亮的弹窗效果，包括了微信小程序实现漂亮的弹窗效果的使用技巧和注意事项，需要的朋友参考一下 最近项目里需要实现一个带着logo的美美哒弹窗，可是翻遍小程序的文档也只能见到wx.showModal这个丑丑的东西…… 场面一度十分尴尬 可是得做啊，要不然产品大姐又要暴走了…… 好吧，来研究一下模态对话框的性质自己DIY吧~ 实现思路 模态对话框之所以被叫做“模态”，就是因为

相关阅读

非常漂亮的新年祝福!C语言实现漂亮的烟花效果微信小程序实现漂亮的弹窗效果NumPy：漂亮的打印表格数据Android应用中通过Layout_weight属性用ListView实现表格android listview实现新闻列表展示效果

相关文章

AngularJS 表格Bootstrap 表格Bootstrap4 表格Bootstrap5 表格HTML 表格

相关问答

用漂亮的汤刮Flipkart网页如何高效地漂亮打印JSON对象列表？[副本]如何使用Go漂亮地打印JSON？用漂亮的汤从div tag刮href用漂亮的汤抓取Python数据

相关工具

Android Horizontal ListView瀑布效果，不同的实现方式读取txt并实现翻页效果最简单代码实现九宫格taro-listview

相关文档

Android Studio 使用艺术Android RoboGuice 使用指南好用的中文速查表常用算法实现方法Gradle Android Plugin 使用手册
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.