Tab组件跟其他组件结合使用(含ListView)
Tab组件和其他组件结合使用(含ListView)
完成如下列各图的效果:
首先先对这个页面进行布局,在主要的xml(activity_tab_list_view.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/image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/star2"/> <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" android:textSize="50dip" android:layout_centerVertical="true" android:layout_centerHorizontal="true"/> </RelativeLayout>
在添加两个与ListView有关的xml文件分别命名,
在activity_tab01.xml编写的代码是:
<?xml version="1.0" encoding="utf-8"?> <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" android:orientation="horizontal" android:background="#FFFFFF"> <ListView android:id="@+id/listView" android:layout_width="fill_parent" android:layout_height="fill_parent"></ListView> </RelativeLayout>
在tab01_item.xml中编写的代码是:
<?xml version="1.0" encoding="utf-8"?> <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" android:orientation="horizontal" > <!-- 左边图片部分 --> <ImageView android:id="@+id/photo" 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:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#000000"/> <!-- 发布时间 --> <TextView android:id="@+id/time" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="right" android:textColor="#000000"/> </LinearLayout> <!-- 右下方发布内容 --> <TextView android:id="@+id/content" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textColor="#000000"/> </LinearLayout> </LinearLayout>
在主要的Activity(TabListViewActivity.java)中编写的代码如下:
package com.bzu.tablistview.activity; import com.bzu.tablistview.activity.R; import android.os.Bundle; import android.app.Activity; import android.app.TabActivity; import android.content.Intent; import android.content.res.Resources; import android.view.LayoutInflater; import android.view.Menu; import android.view.MenuItem; import android.widget.TabHost; import android.support.v4.app.NavUtils; //第一步:extends TabActivity public class TabListViewActivity extends TabActivity{ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // 第二步:获取选项卡组 TabHost tabHost = getTabHost(); // 第三步:引用布局文件 LayoutInflater inflater = LayoutInflater.from(this); inflater.inflate(R.layout.activity_tab_list_view, tabHost.getTabContentView()); // 第四步:创建对象 Resources r = getResources(); Intent intent=new Intent(); intent.setClass(this, Tab01Activity.class); TabHost.TabSpec tab01 = tabHost.newTabSpec("tab01") .setIndicator("", r.getDrawable(R.drawable.star01)) .setContent(intent); TabHost.TabSpec tab02 = tabHost.newTabSpec("tab02") .setIndicator("", r.getDrawable(R.drawable.star02)) .setContent(R.id.image); TabHost.TabSpec tab03 = tabHost.newTabSpec("tab03") .setIndicator("", r.getDrawable(R.drawable.star03)) .setContent(R.id.text); // 第五步:把创建好的对象放入tabHost中 tabHost.addTab(tab01); tabHost.addTab(tab02); tabHost.addTab(tab03); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.activity_tab_list_view, menu); return true; } }
再添加一个Activity(Tab01Activity.java)处理ListView显示,代码如下:
package com.bzu.tablistview.activity; 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.MenuItem; 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; import android.support.v4.app.NavUtils; public class Tab01Activity extends Activity { private ListView listView; private List<Map<String, ?>> data; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_tab01); listView = (ListView) this.findViewById(R.id.listView); data = getData(); SimpleAdapter adapter = new SimpleAdapter(this, data, R.layout.tab01_item, new String[] { "photo", "name", "time", "content" }, new int[] { R.id.photo, R.id.name, R.id.time, R.id.content }); listView.setAdapter(adapter); //点击事件 listView.setOnItemClickListener(new ListViewHandle()); } /* * 处理点击事件的方法 */ private class ListViewHandle implements OnItemClickListener{ public void onItemClick(AdapterView<?> adapter, View view, int position, long id) { Map<String, ?> item=data.get(position); Toast.makeText(getApplicationContext(),item.get("name").toString(), 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("photo", R.drawable.p1); item.put("name", "仰望星空"); item.put("time", "1分钟前"); item.put("content", "好看!"); data.add(item); item = new HashMap<String, Object>(); item.put("photo", R.drawable.p2); item.put("name", "星星"); item.put("time", "5分钟前"); item.put("content", "今天真高兴!"); data.add(item); item = new HashMap<String, Object>(); item.put("photo", R.drawable.p3); item.put("name", "星空"); item.put("time", "6分钟前"); item.put("content", "电影好看!"); data.add(item); item = new HashMap<String, Object>(); item.put("photo", R.drawable.p4); item.put("name", "仰望"); item.put("time", "17分钟前"); item.put("content", "今天真高兴!"); data.add(item); item = new HashMap<String, Object>(); item.put("photo", R.drawable.p5); item.put("name", "仰望星空001"); item.put("time", "18分钟前"); item.put("content", "电影好看!"); data.add(item); item = new HashMap<String, Object>(); item.put("photo", R.drawable.p6); item.put("name", "仰望星空002"); item.put("time", "19分钟前"); item.put("content", "好漂亮!"); data.add(item); item = new HashMap<String, Object>(); item.put("photo", R.drawable.p7); item.put("name", "仰望大海"); item.put("time", "22分钟前"); item.put("content", "电视剧好看!"); data.add(item); item = new HashMap<String, Object>(); item.put("photo", R.drawable.p8); item.put("name", "够黯然才自然"); item.put("time", "24分钟前"); item.put("content", "章节好看!"); data.add(item); item = new HashMap<String, Object>(); item.put("photo", R.drawable.p9); item.put("name", "仰望星空006"); item.put("time", "26分钟前"); item.put("content", "你好看!"); data.add(item); item = new HashMap<String, Object>(); item.put("photo", R.drawable.p10); item.put("name", "仰望星空009"); item.put("time", "29分钟前"); item.put("content", "企鹅好看!"); data.add(item); return data; } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.activity_tab01, menu); return true; } }