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;@Overridepublic 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() {@Overridepublic 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;}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {getMenuInflater().inflate(R.menu.main, menu);return true;}}
然后运行就可以了~完成啦~