深入浅出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;
	}

}

我们来看一下运行效果,如下图所示:

深入浅出Tabhost+简单入门Demo

接着,我们来看第二种实现方式,不继承自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+简单入门Demo

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

上一篇:【转】Hbase shell 常用命令


下一篇:JS 的事件委托机制