深入浅出Tabhost+简单入门Demo

小伙伴们在手机上逛淘宝的时候，会发现在淘宝的下面有个按钮，分别是首页、微淘、社区、购物车和我的淘宝，点击不同的按钮会跳转到不同的页面，目前小编所接手的这个项目，也需要用到类似这样的功能，小编就发挥网络的强大力量，原来人家使用的技术叫做Tabhost，用Tabhost来控制各个选项卡的切换，Tabhost的实现分为两种，一种是继承自TabActivity，继承TabActivity，从TabActivity中用getTabHost()方法获取TabHost。只要定义具体Tab内容布局就行了。另一种是不继承TabActivity，在布局文件中定义TabHost即可，但是TabWidget的id必须是 @android:id/tabs，FrameLayout的id必须是@android:id/tabcontent，TabHost的id可以自定义。今天这篇博文，小编就来简单的介绍一下有关于Tabhost的故事，还请小伙伴多多指教哦`(*∩_∩*)′！

首先，我们来看第一种实现方式，继承自TabActivity，首先我们来看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">
 
    <!-- 第一个布局 -->
    <LinearLayout
        android:id="@+id/view_one"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
        <TextView
            android:id="@+id/textView_one"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="等一个故事" />
    </LinearLayout>
 
    <!-- 第二个布局 -->
    <LinearLayout
        android:id="@+id/view_two"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
 
        <TextView
            android:id="@+id/textView_two"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="当幸福来敲门" />
    </LinearLayout>
 
	<!-- 第三个布局 -->
    <LinearLayout
        android:id="@+id/view_three"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
 
        <TextView
            android:id="@+id/textView_three"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="微笑闪亮未来" />
    </LinearLayout>
 
</FrameLayout>

接着，我们来看java类中的代码，具体代码如下所示：

package com.example.tabhost_trynew;
 
import com.example.tabhost_trynew.R;
 
import android.app.TabActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.widget.TabHost;
import android.widget.TabHost.OnTabChangeListener; 
 
public class MainActivity extends TabActivity{
 
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setTitle("TabDemoActivity");
		TabHost tabHost = getTabHost();
		LayoutInflater.from(this).inflate(R.layout.activity_main,
				tabHost.getTabContentView(), true);
		tabHost.addTab(tabHost.newTabSpec("tab_one").setIndicator("tab_one", getResources().getDrawable(R.drawable.flower))
				.setContent(R.id.view_one));
		tabHost.addTab(tabHost.newTabSpec("tab_two").setIndicator("tab_two", getResources().getDrawable(R.drawable.flower))
				.setContent(R.id.view_two));
		tabHost.addTab(tabHost.newTabSpec("tab_three").setIndicator("tab_three", getResources().getDrawable(R.drawable.flower))
				.setContent(R.id.view_three));
 
		 //标签切换事件处理，setOnTabChangedListener
        tabHost.setOnTabChangedListener(new OnTabChangeListener(){
            @Override
            public void onTabChanged(String tabId) {
            	if (tabId.equals("tab_one")) {   //第一个标签
                }
                if (tabId.equals("tab_two")) {   //第二个标签
                }
                if (tabId.equals("tab_three")) {   //第三个标签
                }
            }
        }); 
 
	}
 
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
 
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}
 
}

我们来看一下运行效果，如下图所示：

接着，我们来看第二种实现方式，不继承自TabActivity，首先，我们来看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"
    android:orientation="vertical"
    tools:context=".MainActivity" >
 
     <TabHost
        android:id="@+id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
 
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >
 
            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >
            </TabWidget>
 
            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >
 
                <!-- 第一个tab的布局 -->
                <LinearLayout
                    android:id="@+id/tab1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" >
 
                    <TextView
                        android:id="@+id/textView1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="等一个故事" />
 
                </LinearLayout>
 
                <!-- 第二个tab的布局 -->
                <LinearLayout
                    android:id="@+id/tab2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" >
 
                    <TextView
                        android:id="@+id/textView2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="当幸福来敲门" />
 
                </LinearLayout>
 
                <!-- 第三个tab的布局 -->
                <LinearLayout
                    android:id="@+id/tab3"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" >
 
                    <TextView
                        android:id="@+id/textView3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="微笑闪亮未来" />
 
                </LinearLayout>
            </FrameLayout>
        </LinearLayout>
    </TabHost> 
 
</LinearLayout>

接着，我们来看java类中的代码，代码如下所示：

package com.example.tabhost_try2;
 
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.TabHost;
 
public class MainActivity extends Activity {
 
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
 
		//初始化TabHost容器
		TabHost th=(TabHost)findViewById(R.id.tabhost);
		th.setup();            
 
		//在TabHost创建标签，然后设置：标题／图标／标签页布局
		th.addTab(th.newTabSpec("tab1").setIndicator("tab_one",getResources().getDrawable(R.drawable.flower)).setContent(R.id.tab1));
		th.addTab(th.newTabSpec("tab2").setIndicator("tab_two",getResources().getDrawable(R.drawable.flower)).setContent(R.id.tab2));
		th.addTab(th.newTabSpec("tab3").setIndicator("tab_three",getResources().getDrawable(R.drawable.flower)).setContent(R.id.tab3));
 
       //上面的null可以为getResources().getDrawable(R.drawable.图片名)设置图标 
 
	}
 
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}
 
}

我们来看一下运行效果，如下所示：

小编寄语：该博客小编主要简单的介绍了Tabhost的相关知识，一个是不继承TabActivity，一个是继承自TabActivity；还是那句话对于小编来说，既是挑战更是机遇，因为知识都是相通的，再者来说，在小编的程序人生中，留下最珍贵的记忆，虽然以后小编不一定从事安卓这个行业，代码世界里，很多种事，有的甜蜜，有的温馨，有的婉转成歌，有的绵延不息，在这些故事里，我们唯一的共通之处就是，某年，某月，某个波澜不惊的日子里，曾经很爱很爱你！爱你--这段接触Android日子里，安卓带给小编的种种的惊喜。