1. 程式人生 > >Android 選項卡功能的實現

Android 選項卡功能的實現

本文主要介紹標籤控制元件Tab,具體操作看程式碼。

一、Tab標籤

1.TabDemoActivity.java

//標籤控制元件Tab
public class TabDemoActivity extends TabActivity {

	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setTitle("標籤控制元件Tab");
		TabHost tabHost=getTabHost();
		LayoutInflater.from(this).inflate(R.layout.tab, tabHost.getTabContentView(),true);
		tabHost.addTab(tabHost.newTabSpec("biaoqian1").setIndicator("標籤tab1").setContent(R.id.tab1));
		tabHost.addTab(tabHost.newTabSpec("biaoqian2").setIndicator("標籤tab2").setContent(R.id.tab2));
		tabHost.addTab(tabHost.newTabSpec("biaoqian3").setIndicator("標籤tab3").setContent(R.id.tab3));
	}	
}

2.佈局檔案tab.xml
<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

	<TextView 
		android:id="@+id/tab1"
		android:layout_width="fill_parent"
		android:layout_height="fill_parent"
		android:background="#cc3399"
		android:text="內容tab1" />
		
	<TextView 
		android:id="@+id/tab2"
		android:layout_width="fill_parent"
		android:layout_height="fill_parent"
		android:background="#ffff00"
		android:text="內容tab2" />
		
	<TextView 
		android:id="@+id/tab3"
		android:layout_width="fill_parent"
		android:layout_height="fill_parent"
		android:background="#66cc99"
		android:text="內容tab3" />
				
</FrameLayout>    

3.注意:需要在AndroidManifest.xml註冊相應Activity.

二、選項卡TabWidget

1.TabWidgetActivity.java

//注意這個activity繼承的是TabActivity
public class TabWidgetActivity extends TabActivity {

	//宣告TabHost物件
	private TabHost mTabHost;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.tab_widget);
		
		//獲取TabHoast物件
		mTabHost=getTabHost();
		/* 為TabHost新增標籤 */
		//新建一個newTabSpec(newTabSpec)
		//設定其標籤和圖示(setIndicator)
		//設定內容(setContent)
		mTabHost.addTab(mTabHost.newTabSpec("tab_test1").setIndicator("TAB1",getResources().getDrawable(R.drawable.img1)).setContent(R.id.textview1));
		mTabHost.addTab(mTabHost.newTabSpec("tab_test2").setIndicator("TAB2",getResources().getDrawable(R.drawable.img2)).setContent(R.id.textview2));
		mTabHost.addTab(mTabHost.newTabSpec("tab_test3").setIndicator("TAB3",getResources().getDrawable(R.drawable.img3)).setContent(R.id.textview3));
		
		//設定TabHost的背景顏色
	    mTabHost.setBackgroundColor(Color.argb(150, 22, 70, 150));
	    
	    //顯示第一個tab
	    mTabHost.setCurrentTab(0);
	    
	  //標籤切換事件處理,setOnTabChangedListener 
	    mTabHost.setOnTabChangedListener(new OnTabChangeListener() {
			@Override
			public void onTabChanged(String tabId) {
				// TODO Auto-generated method stub
				Dialog dialog=new AlertDialog.Builder(TabWidgetActivity.this)
				.setTitle("提醒你")
				.setMessage("你當前選中的是"+tabId+"標籤!")
				.setPositiveButton("確定", new DialogInterface.OnClickListener() {
					@Override
					public void onClick(DialogInterface dialog, int which) {
						Toast.makeText(TabWidgetActivity.this, "你單擊了確定按鈕!", Toast.LENGTH_LONG).show();
						dialog.cancel();
					}
				})
				.setNegativeButton("取消", new DialogInterface.OnClickListener() {
					
					@Override
					public void onClick(DialogInterface dialog, int which) {
						Toast.makeText(TabWidgetActivity.this, "你單擊了取消按鈕!", Toast.LENGTH_LONG).show();
						dialog.cancel();
					}
				})
				.create();
				dialog.show();
			}
		});
	}

}

2.佈局檔案tab_widget.xml
<?xml version="1.0" encoding="utf-8"?>

<TabHost
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@android:id/tabhost"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	>
	
	<LinearLayout
		android:orientation="vertical"
		android:layout_width="fill_parent"
		android:layout_height="fill_parent">
		<TabWidget 
			android:id="@android:id/tabs"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"/>
		<FrameLayout
			android:id="@android:id/tabcontent"
			android:layout_width="fill_parent"
			android:layout_height="fill_parent">
			<TextView
				android:id="@+id/textview1"
				android:layout_width="fill_parent"
				android:layout_height="fill_parent"
				android:text="第一個tab"/>
			<TextView
				android:id="@+id/textview2"
				android:layout_width="fill_parent"
				android:layout_height="fill_parent"
				android:text="第二個tab"/>
			<TextView
				android:id="@+id/textview3"
				android:layout_width="fill_parent"
				android:layout_height="fill_parent"
				android:text="第三個tab"/>
		</FrameLayout>
	</LinearLayout>
</TabHost>

3.注意:需要在AndroidManifest.xml註冊相應Activity.