小伙伴们在手机上逛淘宝的时候，会发现在淘宝的下面有个按钮，分别是首页、微淘、社区、购物车和我的淘宝，点击不同的按钮会跳转到不同的页面，目前小编所接手的这个项目，也需要用到类似这样的功能，小编就发挥网络的强大力量，原来人家使用的技术叫做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日子里，安卓带给小编的种种的惊喜。
