`
zhuxinzx
  • 浏览: 293707 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

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

 

 

 

 

 

 

分享到:
评论

相关推荐

    使用ListView控件实现漂亮的自定义表格效果实例源码

    总之,本实例源码提供了一个使用ListView实现自定义表格效果的范例,涉及到了Android开发中的数据绑定、视图复用、事件监听等多个关键知识点,对于学习和提高Android UI设计能力大有裨益。通过深入研究和实践,...

    自定义表格_自定义表格_android_TableView_

    本实例将深入探讨如何在Android中实现自定义表格功能,结合"自定义表格_自定义表格_android_TableView_"这个主题,我们将详细讲解相关的知识点。 1. **Android表格组件基础** - Android原生提供了两种基本的表格...

    使用ListView来实现表格

    在本项目中,“使用ListView来实现表格”这一主题,主要是通过自定义ListView的Adapter来模拟表格的布局和行为。 首先,我们需要了解ListView的基本工作原理。ListView通过Adapter获取数据源,并将其转化为可显示的...

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

    以下是如何在Android中使用ListView实现漂亮的表格效果的详细步骤: 首先,我们需要定义颜色资源以区分不同的视觉效果。在`res/values/color.xml`文件中,定义了不同颜色的值,如深灰色、黑色、绿色和红色。绿色...

    Android中ListView实现表格效果

    本篇文章将详细讲解如何在Android中利用ListView实现表格效果。 首先,我们需要理解ListView的工作原理。ListView通过Adapter来绑定数据,Adapter是连接数据源和视图的桥梁。我们可以通过自定义Adapter来定制...

    android 使用ListView来实现表格

    当需要展示的数据具有表格形式时,尽管Android没有内置的Table控件,但我们可以巧妙地利用ListView来模拟实现表格的效果。本教程将深入探讨如何在Android中使用ListView来构建表格。 首先,我们需要了解ListView的...

    ListView制作陈表格形式

    本教程将详细讲解如何利用ListView来实现表格形式的数据展示,使得信息更加清晰、易于阅读。 首先,我们需要理解ListView的基本结构。ListView通常由一个Adapter驱动,Adapter负责将数据源(如ArrayList)转换为...

    WPF ListView 漂亮样式

    本教程将深入探讨如何利用WPF ListView 创建漂亮的样式,并提供一些自定义的策略。 1. **ListView基本结构** ListView 基于ItemsControl,它的核心是通过ItemsSource属性绑定数据源,ItemTemplate用来定义每个数据...

    SimpleAdapter实现ListView表格效果

    本示例中,我们通过使用SimpleAdapter实现了ListView的表格效果,为用户提供了一种高效且自定义程度较高的展示数据的方式。 首先,SimpleAdapter的基本用法包括以下几个步骤: 1. **创建数据集合**:数据通常以二...

    android--ListView实现带标题栏效果(附源码)

    本教程将详细介绍如何在ListView中实现带标题栏的效果。标题栏通常用于显示分类信息或者操作按钮,为用户提供更好的交互体验。以下是对实现这一功能的详细步骤的阐述: 1. **创建布局文件** 首先,我们需要为每个...

    自定义ItemControl 实例

    在这个实例中,我们可能还涉及到上下文菜单(ContextMenu)的实现。在WPF中,上下文菜单可以附加到任何UI元素上,包括`ItemControl`的子项。通过设置`SubItemControlContextMenuTest`,我们可以为每个子项添加一个...

    Android高级应用源码-自定义表格自动刷新数据.rar

    这个"Android高级应用源码-自定义表格自动刷新数据.rar"压缩包提供了一个实例,可以帮助开发者理解如何实现这样的功能。下面将详细解释相关知识点。 1. **自定义表格组件**: - 自定义View:Android系统提供的`...

    listview显示儿童疫苗表格

    在这个“儿童疫苗表格”的项目中,开发者被要求利用ListView来呈现数据库中存储的儿童疫苗接种信息。这个作业的核心在于结合SQLite数据库管理和ListView的使用,以及实现首次运行检测功能。 首先,我们需要创建一个...

    自定义表格自动刷新数据.zip

    综上所述,这个"自定义表格自动刷新数据"项目可能涵盖了Android数据绑定、自定义Adapter、数据监听、网络请求、数据库操作以及性能优化等多个方面,是学习Android开发中数据处理和界面更新的一个典型实例。...

    Android使用popwindow弹窗显示listview表格

    通过以上步骤,我们就实现了在Android中使用`PopupWindow`弹出一个包含`ListView`表格的效果。实际项目中,你可能需要根据需求调整布局、数据源、适配器等细节,但基本思路就是这样。记得在你的博客或其他平台上分享...

    listview编程实例

    在本文中,我们将深入探讨ListView控件的编程实例,包括如何实现ListView的功能以及如何进行打印。 首先,ListView控件允许我们展示数据项,并提供多种视图模式,如大图标、小图标、列表和详细信息。在“大图标”和...

    listView的表格样式二

    在本教程中,我们将探讨如何利用ListView实现“表格样式二”,并自定义一个控件来增强其功能。 首先,我们要了解ListView的基本结构。ListView通常与Adapter一起使用,Adapter是连接数据源和ListView的桥梁。它可以...

    自定义ListView内嵌GridView,用ExpandableListView实现

    以上就是关于“自定义ListView内嵌GridView”和使用ExpandableListView实现多级菜单设计的相关知识点。通过理解这两种方法的工作原理和实现步骤,开发者可以根据项目需求灵活选择合适的方案,创建出功能丰富的...

    WPF ListView给2各grid的实例

    要实现标题描述中的"2个grid的实例",我们需要创建两个独立的GridView,并将它们配置在同一个ListView中。以下步骤将指导你完成这个过程: 1. **创建XAML布局**: 在XAML文件中,首先声明一个ListView,并为其设置...

Global site tag (gtag.js) - Google Analytics