Android中用ListView实现表格部局

分类：Android 阅读 (3,051) Add comments

8月 202012

转载请注明原文地址：http://bcoder.com/java/android-java/use-listview-to-implement-table-layout-in-android

* 本例使用ListView和自定义的行部局实现了一个最基本的表格部局
* 和一个可变长度的表格部局
* 并实现的简单的行组件的单击事件

XML文件1 activity_list_view_table.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent" >

 <ListView
 android:id="@+id/listView1"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_alignParentLeft="true"
 android:layout_alignParentTop="true" >

 </ListView>

</RelativeLayout>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent" >

<ListView

android:id="@+id/listView1"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentLeft="true"

android:layout_alignParentTop="true" >

</ListView>

</RelativeLayout>

XML文件2 listview_row_basic.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 顶层使用RelativeLayout布局，用于自定义的listview的行 -->
<!-- layout_height用于设置行的高度，可以根据需要设置 -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="30dip" >

    <!-- 最左侧的TextView，宽度固定。layout_alignParentLeft和layout_alignParentTop用于对齐左上角 -->
    <!-- layout_margin用于和其他的组件隔开一定的距离 -->
    <!-- gravity属于用于设置内容的重心，此处为垂直居中，此外layout_height属于必须设置为match_parent即等于RelativeLayout的高度 -->
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_margin="5dip"
        android:gravity="center_vertical"
        android:text="Small Text"
        android:textAppearance="?android:attr/textAppearanceSmall" />

    <!-- 最右侧的Button，设置layout_alignParentRight和layout_alignParentTop为true -->
    <Button
        android:id="@+id/button1"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="Delete" />

    <!-- 右数第二个Button，设置layout_toLeftOf为Button1 -->
    <Button
        android:id="@+id/button2"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@+id/button1"
        android:text="Edit" />

    <!-- 此TextView的内容比较长，layout_toLeftOf为@+id/button2， layout_toRightOf为@+id/textView1 -->
    <!-- 即占据了Button2和TextView1之间的全部空间 -->
    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_margin="5dip"
        android:layout_toLeftOf="@+id/button2"
        android:layout_toRightOf="@+id/textView1"
        android:gravity="center_vertical"
        android:text="Small Text"
        android:textAppearance="?android:attr/textAppearanceSmall" />

</RelativeLayout>

<?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="30dip" >

<TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_alignParentLeft="true"

android:layout_alignParentTop="true"

android:layout_margin="5dip"

android:gravity="center_vertical"

android:text="Small Text"

android:textAppearance="?android:attr/textAppearanceSmall" />

<Button

android:id="@+id/button1"

style="?android:attr/buttonStyleSmall"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentRight="true"

android:layout_alignParentTop="true"

android:text="Delete" />

<Button

android:id="@+id/button2"

style="?android:attr/buttonStyleSmall"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentTop="true"

android:layout_toLeftOf="@+id/button1"

android:text="Edit" />

<TextView

android:id="@+id/textView2"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_alignParentTop="true"

android:layout_margin="5dip"

android:layout_toLeftOf="@+id/button2"

android:layout_toRightOf="@+id/textView1"

android:gravity="center_vertical"

android:text="Small Text"

android:textAppearance="?android:attr/textAppearanceSmall" />

</RelativeLayout>

XML文件3 listview_row.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 使用RelativeLayout做为顶层布局元素 -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <!-- 二级布局窗体加一个LinearLayout是为了使子LinearLayout能使用layout_weight来控制宽度 -->
    <LinearLayout
        android:id="@+id/linear_class_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:gravity="fill_vertical" >

        <!-- 为了能控制第一个TextView的宽度所以把TextView嵌套到一个LinearLayout中，并设置其layout_weight为1  -->
        <!-- 此TextView显示的内容比较短，一般不会超出LinearLayout的长度 -->
        <!-- 设置gravity的值为center_vertical，意思为在本行垂直居中 -->
        <LinearLayout
            android:id="@+id/linearLayout1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_weight="1" >
            <TextView
                android:id="@+id/textView1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Small Text"
                android:textAppearance="?android:attr/textAppearanceSmall" />
        </LinearLayout>

        <!-- 为了能控制第二个TextView的宽度所以把TextView嵌套到一个LinearLayout中，并设置其layout_weight为4  -->
        <!-- 此TextView显示的内容比较长，所在TextView2需要做一些其他的设置以使他不超出LinearLayout的长度 -->
        <LinearLayout
            android:id="@+id/linear_class_3_tv2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_weight="4"
            android:clipChildren="false" >

            <TextView
                android:id="@+id/textView2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:maxWidth="@dimen/padding_small"
                android:selectAllOnFocus="true"
                android:text="Small Text"
                android:textAppearance="?android:attr/textAppearanceSmall" />
        </LinearLayout>

        <!-- 两个Button为固定宽度，放在一个LinearLayout中，并设置LinearLayout的宽度为固定值90dip -->
        <LinearLayout
            android:layout_width="90dip"
            android:layout_height="wrap_content" >
            <Button
                android:id="@+id/button1"
                style="?android:attr/buttonStyleSmall"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="Edit" />
            <Button
                android:id="@+id/button2"
                style="?android:attr/buttonStyleSmall"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="Delete" />

        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

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

<LinearLayout

android:id="@+id/linear_class_2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentLeft="true"

android:layout_alignParentRight="true"

android:layout_alignParentTop="true"

android:gravity="fill_vertical" >

<LinearLayout

android:id="@+id/linearLayout1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_vertical"

android:layout_weight="1" >

<TextView

android:id="@+id/textView1"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Small Text"

android:textAppearance="?android:attr/textAppearanceSmall" />

</LinearLayout>

<LinearLayout

android:id="@+id/linear_class_3_tv2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_vertical"

android:layout_weight="4"

android:clipChildren="false" >

<TextView

android:id="@+id/textView2"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:maxWidth="@dimen/padding_small"

android:selectAllOnFocus="true"

android:text="Small Text"

android:textAppearance="?android:attr/textAppearanceSmall" />

</LinearLayout>

<LinearLayout

android:layout_width="90dip"

android:layout_height="wrap_content" >

<Button

android:id="@+id/button1"

style="?android:attr/buttonStyleSmall"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:text="Edit" />

<Button

android:id="@+id/button2"

style="?android:attr/buttonStyleSmall"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:text="Delete" />

</LinearLayout>

</RelativeLayout>

JAVA代码文件 ListViewTableActivity.java

/*******************************************************************************
 * 本例使用ListView和自定义的行部局实现了一个最基本的表格部局
 * 和一个可变长度的表格部局
 * 并实现的简单的行组件的单击事件
 *
 * 作者：http://svn1.bcoder.com
 *
 *******************************************************************************/
package com.bcoder.listviewtable;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.text.TextUtils.TruncateAt;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.TextView;

public class ListViewTableActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_list_view_table);

        ArrayList&lt;HashMap&lt;String, String&gt;&gt; dItems = new ArrayList&lt;HashMap&lt;String, String&gt;&gt;();

        HashMap&lt;String, String&gt; mItem1 = new HashMap&lt;String, String&gt;();
        mItem1.put("Name", "张三");
        mItem1.put("URL", "http://svn1.bcoder.com");
        dItems.add(mItem1);

        HashMap&lt;String, String&gt; mItem2 = new HashMap&lt;String, String&gt;();
        mItem2.put("Name", "李四");
        mItem2.put("URL", "http://svn1.bcoder.com/?page_id=111");
        dItems.add(mItem2);

        HashMap&lt;String, String&gt; mItem3 = new HashMap&lt;String, String&gt;();
        mItem3.put("Name", "李四");
        mItem3.put("URL", "http://svn1.bcoder.com/?page_id=111");
        dItems.add(mItem3);

        HashMap&lt;String, String&gt; mItem4 = new HashMap&lt;String, String&gt;();
        mItem4.put("Name", "李四");
        mItem4.put("URL", "http://svn1.bcoder.com/?page_id=111");
        dItems.add(mItem4);

        HashMap&lt;String, String&gt; mItem5 = new HashMap&lt;String, String&gt;();
        mItem5.put("Name", "李四");
        mItem5.put("URL", "http://svn1.bcoder.com/?page_id=111");
        dItems.add(mItem5);

        HashMap&lt;String, String&gt; mItem6 = new HashMap&lt;String, String&gt;();
        mItem6.put("Name", "李四");
        mItem6.put("URL", "http://svn1.bcoder.com/?page_id=111");
        dItems.add(mItem6);

        HashMap&lt;String, String&gt; mItem7 = new HashMap&lt;String, String&gt;();
        mItem7.put("Name", "李四");
        mItem7.put("URL", "http://svn1.bcoder.com/?page_id=111");
        dItems.add(mItem7);

        HashMap&lt;String, String&gt; mItem8 = new HashMap&lt;String, String&gt;();
        mItem8.put("Name", "李四");
        mItem8.put("URL", "http://svn1.bcoder.com/?page_id=111");
        dItems.add(mItem8);

        HashMap&lt;String, String&gt; mItem9 = new HashMap&lt;String, String&gt;();
        mItem9.put("Name", "李四");
        mItem9.put("URL", "http://svn1.bcoder.com/?page_id=111");
        dItems.add(mItem9);

        HashMap&lt;String, String&gt; mItem10 = new HashMap&lt;String, String&gt;();
        mItem10.put("Name", "李四");
        mItem10.put("URL", "http://svn1.bcoder.com/?page_id=111");
        dItems.add(mItem10);

        //下面两行用于切换使用listview_row_basic或者listview_row的行部局
        MyAdapter adapter = new MyAdapter(this, dItems, R.layout.listview_row,
        //MyAdapter adapter = new MyAdapter(this, dItems, R.layout.listview_row_basic,
        		new String[] {"Name", "URL"},
        		new int[] {R.id.textView1, R.id.textView2});

        ListView lv = (ListView)findViewById(R.id.listView1);
        lv.setAdapter(adapter);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_list_view_table, menu);
        return true;
    }

    public class MyAdapter extends SimpleAdapter{

		public MyAdapter(Context context, List&lt;? extends Map&lt;String, ?&gt;&gt; data,
				int resource, String[] from, int[] to) {
			super(context, data, resource, from, to);
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			View curRowView = super.getView(position, convertView, parent);
			final TextView tv = (TextView)curRowView.findViewById(R.id.textView2);
			//用于设置当字符长度超出TextView的宽度时，在末尾显示为"..."
			//此属于也可以在activity设计界面中设置，还可以为其他值，如：START, MIDDLE 或者 MARQUEE
			tv.setEllipsize(TruncateAt.END);
			//设置此属于上面的属性才会生效
			tv.setSingleLine(true);
			//设置最大行数为1，则最多只显示一行，此属性可以在activity设计界面中设置
			tv.setMaxLines(1);

			OnClickListener onUrlTxtClick = new OnClickListener() {

				public void onClick(View v) {
		    		Uri uri = Uri.parse(tv.getText().toString());
		    		Intent logintent = new Intent(Intent.ACTION_VIEW, uri);
		    		startActivity(logintent);
				}

			};

			//实现TextView的点击效果
			tv.setOnClickListener(onUrlTxtClick);

			return curRowView;
		}
    }

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

/*******************************************************************************

* 本例使用ListView和自定义的行部局实现了一个最基本的表格部局

* 和一个可变长度的表格部局

* 并实现的简单的行组件的单击事件

* 作者：http://svn1.bcoder.com

*******************************************************************************/

package com.bcoder.listviewtable;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import android.app.Activity;

import android.content.Context;

import android.content.Intent;

import android.net.Uri;

import android.os.Bundle;

import android.text.TextUtils.TruncateAt;

import android.view.Menu;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.ViewGroup;

import android.widget.LinearLayout;

import android.widget.ListView;

import android.widget.SimpleAdapter;

import android.widget.TextView;

public class ListViewTableActivity extends Activity {

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_list_view_table);

ArrayList<HashMap<String, String>> dItems = new ArrayList<HashMap<String, String>>();

HashMap<String, String> mItem1 = new HashMap<String, String>();

mItem1.put("Name", "张三");

mItem1.put("URL", "http://svn1.bcoder.com");

dItems.add(mItem1);

HashMap<String, String> mItem2 = new HashMap<String, String>();

mItem2.put("Name", "李四");

mItem2.put("URL", "http://svn1.bcoder.com/?page_id=111");

dItems.add(mItem2);

HashMap<String, String> mItem3 = new HashMap<String, String>();

mItem3.put("Name", "李四");

mItem3.put("URL", "http://svn1.bcoder.com/?page_id=111");

dItems.add(mItem3);

HashMap<String, String> mItem4 = new HashMap<String, String>();

mItem4.put("Name", "李四");

mItem4.put("URL", "http://svn1.bcoder.com/?page_id=111");

dItems.add(mItem4);

HashMap<String, String> mItem5 = new HashMap<String, String>();

mItem5.put("Name", "李四");

mItem5.put("URL", "http://svn1.bcoder.com/?page_id=111");

dItems.add(mItem5);

HashMap<String, String> mItem6 = new HashMap<String, String>();

mItem6.put("Name", "李四");

mItem6.put("URL", "http://svn1.bcoder.com/?page_id=111");

dItems.add(mItem6);

HashMap<String, String> mItem7 = new HashMap<String, String>();

mItem7.put("Name", "李四");

mItem7.put("URL", "http://svn1.bcoder.com/?page_id=111");

dItems.add(mItem7);

HashMap<String, String> mItem8 = new HashMap<String, String>();

mItem8.put("Name", "李四");

mItem8.put("URL", "http://svn1.bcoder.com/?page_id=111");

dItems.add(mItem8);

HashMap<String, String> mItem9 = new HashMap<String, String>();

mItem9.put("Name", "李四");

mItem9.put("URL", "http://svn1.bcoder.com/?page_id=111");

dItems.add(mItem9);

HashMap<String, String> mItem10 = new HashMap<String, String>();

mItem10.put("Name", "李四");

mItem10.put("URL", "http://svn1.bcoder.com/?page_id=111");

dItems.add(mItem10);

//下面两行用于切换使用listview_row_basic或者listview_row的行部局

MyAdapter adapter = new MyAdapter(this, dItems, R.layout.listview_row,

//MyAdapter adapter = new MyAdapter(this, dItems, R.layout.listview_row_basic,

new String[] {"Name", "URL"},

new int[] {R.id.textView1, R.id.textView2});

ListView lv = (ListView)findViewById(R.id.listView1);

lv.setAdapter(adapter);

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

getMenuInflater().inflate(R.menu.activity_list_view_table, menu);

return true;

}

public class MyAdapter extends SimpleAdapter{

public MyAdapter(Context context, List<? extends Map<String, ?>> data,

int resource, String[] from, int[] to) {

super(context, data, resource, from, to);

}

@Override

public View getView(int position, View convertView, ViewGroup parent) {

View curRowView = super.getView(position, convertView, parent);

final TextView tv = (TextView)curRowView.findViewById(R.id.textView2);

//用于设置当字符长度超出TextView的宽度时，在末尾显示为"..."

//此属于也可以在activity设计界面中设置，还可以为其他值，如：START, MIDDLE 或者 MARQUEE

tv.setEllipsize(TruncateAt.END);

//设置此属于上面的属性才会生效

tv.setSingleLine(true);

//设置最大行数为1，则最多只显示一行，此属性可以在activity设计界面中设置

tv.setMaxLines(1);

OnClickListener onUrlTxtClick = new OnClickListener() {

public void onClick(View v) {

Uri uri = Uri.parse(tv.getText().toString());

Intent logintent = new Intent(Intent.ACTION_VIEW, uri);

startActivity(logintent);

}

};

//实现TextView的点击效果

tv.setOnClickListener(onUrlTxtClick);

return curRowView;

}

———————————

点击此下下载源代码

———————————

打赏

Leave a Reply Cancel reply