TabHost组件和ListView组件的结合使用

在前边都分别介绍了TabHost组件和ListView组件的使用，现在说一下如何把二者结合起来使用....还是以讲述TabHost组件和ListView组件时候的例子作为基础，直接修改~

显示主界面：

                           

当点击上面的tabHost选项卡会出现以ListView组件显示的心情博客...下面就说一下它的具体实现。

阶段一：主界面的布局，具体代码如下：

main.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" >

    <ImageView 
        android:id="@+id/tab2"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:src="@drawable/image2"/>
    <ImageView
        android:id="@+id/tab3"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:src="@drawable/image3"/>

</RelativeLayout>

tab1_main.xml:

<LinearLayout 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/list"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >
    </ListView>

</LinearLayout>

tab1_item.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/image"
        android:padding="10dp"
        android:layout_width="48dp"
        android:layout_height="48dp" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/name"
                android:paddingTop="10dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <TextView
                android:id="@+id/publish"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:paddingTop="10dp"
                android:gravity="right" />
        </LinearLayout>

        <TextView
            android:id="@+id/content"
            android:paddingTop="10dp"
            android:paddingBottom="10dp"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

</LinearLayout>

阶段二：编写MainActivity,实现tabHost选项卡的显示，利用Intent实现对tabHost选项卡点击事件的处理。具体代码如下：

package com.lks.tablistview;

import android.os.Bundle;
import android.app.Activity;
import android.app.TabActivity;
import android.content.Intent;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TabHost;
import android.support.v4.app.NavUtils;

public class MainActivity extends TabActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //setContentView(R.layout.main);
        TabHost tabHost=getTabHost();
		LayoutInflater.from(this).inflate(R.layout.main,
				tabHost.getTabContentView(), true);
		Intent intent=new Intent();
		intent.setClass(this, Tab01Activity.class);
		tabHost.addTab(tabHost
				.newTabSpec("tab1")
				.setIndicator("",
						getResources().getDrawable(R.drawable.image1))
				.setContent(intent));
		tabHost.addTab(tabHost
				.newTabSpec("tab2")
				.setIndicator("",
						getResources().getDrawable(R.drawable.image2))
				.setContent(R.id.tab2));
		tabHost.addTab(tabHost
				.newTabSpec("tab3")
				.setIndicator("",
						getResources().getDrawable(R.drawable.image3))
				.setContent(R.id.tab3));
    }

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

    
}

阶段三：点击tab1选项卡会显示ListView组件实现的心情博客，即MainActivity页面上利用intent转至tab01Activity（即模拟新浪微博日志中的小例子，直接copy至本项目中就可以）...具体代码如下：

package com.lks.tablistview;

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

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.Toast;

public class Tab01Activity extends Activity {
	private List<Map<String, ?>> data;
	private ListView listItem;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.tab1_main);
		listItem = (ListView) this.findViewById(R.id.list);
		data = getData();
		SimpleAdapter adapter = new SimpleAdapter(this, data, R.layout.tab1_item,
				new String[] { "image", "name", "publish", "content" },
				new int[] { R.id.image, R.id.name, R.id.publish, R.id.content });
		listItem.setAdapter(adapter);
		listItem.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> adapter, View view, int position,
					long id) {
				Map<String, Object> item=(Map<String, Object>) data.get(position);
				Toast.makeText(getApplicationContext(), item.get("name")+"\n\n"+item.get("content"), Toast.LENGTH_LONG).show();
				
			}
		});
	}

	private List<Map<String, ?>> getData() {
		List<Map<String, ?>> data = new ArrayList<Map<String, ?>>();
		Map<String, Object> item = new HashMap<String, Object>();
		item.put("image", R.drawable.image1);
		item.put("name", "世界末日");
		item.put("publish", "1分钟前");
		item.put("content", "我过得还可以，不好不坏，不惊不喜，一切只是还可以。这样的生活我觉得也挺好。");
		data.add(item);
		item = new HashMap<String, Object>();
		item.put("image", R.drawable.image2);
		item.put("name", "吹乱了章节");
		item.put("publish", "9分钟前");
		item.put("content",
				"我们都在等，等到最后或许是彼此转身都没有回首，此刻我们背对背，下一刻你是否会转身，我只能等待，或许你也在等待，那我们只能在等待中消散，最后谁都没有回头，就像车站离别，拥抱完就各自上车，又或许你忘了我叫什么……");
		data.add(item);
		item = new HashMap<String, Object>();
		item.put("image", R.drawable.image3);
		item.put("name", "回不去的过去");
		item.put("publish", "23分钟前");
		item.put("content", "开始听一些很旧的歌,才明白原来生活中的一切都会老去。");
		data.add(item);
		item = new HashMap<String, Object>();
		item.put("image", R.drawable.image4);
		item.put("name", "夜,未央");
		item.put("publish", "43分钟前");
		item.put("content", "我不贪心，只希望现在的朋友都不变，以后还是可以相聚，无关金钱名利，大碗喝酒大口吃肉，能潇洒开心的日子就忘记痛苦。老了，以后相拥回忆往事，在黄昏下相望。");
		data.add(item);
		item = new HashMap<String, Object>();
		item.put("image", R.drawable.image5);
		item.put("name", "浅光旧人不覆");
		item.put("publish", "1小时前");
		item.put("content",
				"似乎所有的开始都有一个写好了的结局就算你自己再怎么努力也扭转不了注定，此刻我羡慕的是曾经我所不珍惜的……");
		data.add(item);
		return data;
	}

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

}

然后运行就可以了~完成啦~