TabHost控件应用

原创 2016年05月30日 12:10:59

extends TabActivity的TabHost:

运行效果图:



布局文件,activity_extends_tab_host.xml代码:

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/TabHost1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".TabHostExtendsTabActivity" >
    <-- 这里用到的是一个页面布局 -->
    <-- 这是三个相同页面内容不同的布局 -->
    <LinearLayout 
        android:id="@+id/tab_1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical">
        <TextView 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:textSize="30sp"
            android:text="这是tab_1"/>
        <TextView 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:textSize="30sp"
            android:text="这是tab_1"/>
    </LinearLayout>
    <LinearLayout 
        android:id="@+id/tab_2"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical">
        <TextView 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:textSize="30sp"
            android:text="这是tab_2"/>
        <TextView 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:textSize="30sp"
            android:text="这是tab_2"/>
    </LinearLayout>
    <LinearLayout 
        android:id="@+id/tab_3"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical">
        <TextView 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:textSize="30sp"
            android:text="这是tab_3"/>
        <TextView 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:textSize="30sp"
            android:text="这是tab_3"/>
    </LinearLayout>
    

</TabHost>

修改TabHostExtendsTabActivity.java文件,代码:

import android.os.Bundle;
import android.app.Activity;
import android.app.TabActivity;
import android.view.LayoutInflater;
import android.view.Menu;
import android.widget.TabHost;

public class TabHostExtendsTabActivity extends TabActivity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
//		setContentView(R.layout.activity_extends_tab_host);
		<strong>TabHost tabHost=getTabHost();//通过TabActivity的getHost()获取TabHost对象
		//设置使用TabHost布局
		LayoutInflater.from(this).inflate(R.layout.activity_extends_tab_host, 
							tabHost.getTabContentView(),true);</strong>
		//添加选项标签,图片如果无法显示时需要查看AndroidManifest.xml中<application android:theme="@android:style/Theme.Black">:支持文字图片显示
		tabHost.addTab(tabHost.newTabSpec("1").setIndicator("好友").setContent(R.id.tab_1));
		tabHost.addTab(tabHost.newTabSpec("2").setIndicator("群组").setContent(R.id.tab_2));
		<strong>tabHost.addTab(tabHost.newTabSpec("3").setIndicator("设置"
				//添加标题图片
				,getResources().getDrawable(R.drawable.bg_menu_4)).setContent(R.id.tab_3));</strong>
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.tab_host_extends_tab, menu);
		return true;
	}

}


不继承TabActivity的TabHost组件

运行效果图:



布局activity_tab_host_no_extends_tab.xml文件,代码:

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    <strong>android:id="@+id/tabhost"</strong>
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- TabHost必须包含一个 TabWidget和一个FrameLayout-->  
<LinearLayout 
	    android:layout_width="fill_parent"
	    android:layout_height="fill_parent"
	    android:orientation="vertical">

	    <!-- FrameLyaout控件的id属性必须是android:id="@android:id/tabcontent" -->
	    <<strong>FrameLayout</strong> 
	        android:id="@android:id/tabcontent"
	        android:layout_width="fill_parent"
	        android:layout_height="fill_parent"
	        android:layout_weight="1">

	        <TextView
	            android:id="@+id/view1"
	            android:layout_width="match_parent"
	            android:layout_height="fill_parent" />

	        <TextView 
	            android:id="@+id/view2"
	            android:layout_width="fill_parent"
	            android:layout_height="fill_parent"/>
	        <TextView 
	            android:id="@+id/view3"
	            android:layout_width="fill_parent"
	            android:layout_height="fill_parent"/>
	    </FrameLayout>
	    <!-- RabWidget控件的id属性必须是android:id="@android:id/tabs" 
	    	将标签在底部显示:
	    	 1. 在这里TabWidget控件放在FrameLayout控件的下面,
	    	 2. 要更改FrameLayout控件的权重, android:layout_weight="1"-->
	    <<strong>TabWidget</strong> 
	        android:id="@android:id/tabs"
	        android:layout_width="fill_parent"
	        android:layout_height="wrap_content"
	        android:orientation="horizontal"/>

	</LinearLayout>
</TabHost>

修改TabHostNoExtendsTabActivity.java文件,代码:


package com.bzu.tabhost;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.TabHost;

public class TabHostNoExtendsTabActivity extends Activity {
	<strong>private TabHost tabHost;</strong>
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_tab_host_no_extends_tab);
		findById();
		addTabHost();//添加标签页面
	}

	private void addTabHost() {
		// ***如果没有继承TabActivity时,通过该种方法加载启动tabHost  
		<strong>tabHost.setup();</strong>
		
		tabHost.addTab(tabHost.newTabSpec("tab_1").setIndicator("好友",getResources().getDrawable(R.drawable.bg_menu_4)).setContent(R.id.view1));
		tabHost.addTab(tabHost.newTabSpec("tab_2").setIndicator("群组",getResources().getDrawable(R.drawable.bg_menu_4)).setContent(R.id.view2));
		tabHost.addTab(tabHost.newTabSpec("tab_3").setIndicator("附近",getResources().getDrawable(R.drawable.bg_menu_4)).setContent(R.id.view3));
	}

	private void findById() {
		<strong>tabHost=(TabHost) findViewById(R.id.tabhost);//获取TabHost对象</strong>
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.tab_host_no_extends_tab, menu);
		return true;
	}

}


也可以将页面分开,来实现TabHost组件

文件形式


运行效果



新建一个tab1.xml布局文件,如下:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    <strong>android:id="@+id/LinearLayout01"</strong>
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <TextView   
            android:layout_width="match_parent"  
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="标签1的内容" />  

</LinearLayout>


新建一个tab2.xml布局文件,如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    <strong>android:id="@+id/LinearLayout02"</strong>
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
	<TextView   
            android:layout_width="match_parent"  
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="标签2的内容" />  
</LinearLayout>


修改activity_tab_host_s.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" >

    <TabHost  
        android:id="@+id/tabhost"           
        android:layout_width="match_parent"  
        android:layout_height="match_parent" >  
  
        <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" >  
                  
            </FrameLayout>  
        </LinearLayout>  
    </TabHost>  

</LinearLayout>


修改TabHostS.java代码,如下:

import android.os.Bundle;
import android.app.Activity;
import android.view.LayoutInflater;
import android.view.Menu;
import android.widget.TabHost;

public class TabHostS extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_tab_host_s);
		setabHost();
	}

	private void setabHost() {
		<strong>TabHost tabHost = (TabHost)findViewById(R.id.tabhost);  
		tabHost.setup(); </strong> //这里利用的是不继承TabActivity,所以用这个方法初始化容器
          
	//动态载入XML,而不需要Activity 
        LayoutInflater i=LayoutInflater.from(this);  
        i.inflate(R.layout.tab1, tabHost.getTabContentView());  
        i.inflate(R.layout.tab2, tabHost.getTabContentView()); 
          
        tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("标签1",
				getResources().getDrawable(R.drawable.bg_menu_4)).setContent(R.id.LinearLayout01));    
        tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("标签2"
        		,getResources().getDrawable(R.drawable.bg_menu_4)).setContent(R.id.LinearLayout02)); 
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.tab_host, menu);
		return true;
	}

}
个人笔记:个人理解程度,希望大神多提点.



版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

租房-TabHost控件使用

  • 2017年08月01日 17:57
  • 30.73MB
  • 下载

Android tabhost控件

  • 2014年03月07日 10:20
  • 113KB
  • 下载

Android学习笔记二:TabHost控件的使用说明收集

出处:http://blog.sina.com.cn/s/blog_6bec714e0100tv12.html 在使用了一个TabHost控件,下面我们来详细讲解下这个控件以及使用这个控件...

android Tabhost控件的使用

Tabhost用来实现如图的效果: 上图的首页、自选、警报是由Tabhost控件来实现的,Tabhost控件中的每个tab其实都是一个Activity,也就是说我创建一个Tabhost,在tab...

[控件]TabHost选项卡

package Y.B; import android.app.TabActivity; import android.os.Bundle; import android.widget.TabHos...

学习Android开发-乐学成语之TabHost控件

在安卓上有这样一个控件,跟SliverLight、Windows中的枢轴(Pivot)差不多,又像是我们平时用的浏览器的页面选项卡差不多——TabHost。...

滑动菜单解决方案之三:使用TabHost控件实现微信界面的底部菜单效果

原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://wangcuijing.blog.51cto.com/7233352/128214...

android开发 -TabHost控件

android开发 tabhost
  • cjl_lu
  • cjl_lu
  • 2017年08月06日 15:06
  • 135

Android初级开发(四)——补充6、控件TabHost的使用

TabHost的使用

Android 中的TabHost控件的使用

介绍  有时,我们想在一个window中显示多个视图,这时就需要用到Tab容器。在Android里它叫TabHost。 使用TabHost有两种方式: 在相同的activity中使用TabH...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:TabHost控件应用
举报原因:
原因补充:

(最多只允许输入30个字)