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