【转】选项卡的切换

转载地址:http://www.cnblogs.com/vir56k/archive/2011/07/04/2097570.html

相信使用过android手机的朋友都见过下面样子的选项卡,本文我们尝试做的演示。

这个选项卡页面,或者说是标签卡。分为两部分:

一个顶部的按钮(可点击的)的切换卡部分

一个主内容区(上图显示“第二个窗体”字体的)的主显示区。

我们想实现的效果是点击切换的选项卡卡部分,主显示区的内容随之改变。那么我们看下页面布局代码

<TabHost  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:id="@android:id/tabhost"  
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent">  
    <LinearLayout  
        android:orientation="vertical"  
        android:layout_width="fill_parent"  
        android:layout_height="fill_parent">  
     
        <TabWidget android:id="@android:id/tabs"  
            android:layout_width="fill_parent"  
           android:layout_height="wrap_content"  
            android:paddingLeft="1dip"  
            android:paddingRight="1dip"  
            android:paddingTop="4dip"  
        />  
          
       <FrameLayout android:id="@android:id/tabcontent"  
           android:layout_width="fill_parent"             
            android:layout_height="1dip"  
           android:layout_weight="1"  
       />       
    </LinearLayout>  
</TabHost>

如上面的代码所示:

整个窗体在一个TabHost元素下。TabHost是根元素。他包含了一个子布局对象LinearLayout,这个布局对象的方向为“vertical”,注意这个垂直方向。它指示了如何排列这个布局对象的子对象,也就是它指示了TabWidget 和FrameLayout 这两个控件的排列。我们目前的排列是 TabWidget 在上,FrameLayout 在下。如果想实现“选项卡标签在底部的效果”,尝试下relativeLayout吧。

TabWidget 就是标签卡对象。就是用来切换的那个顶部标签卡。注意id必须为@android:id/tabs

FrameLayout 是内容区域,当标签卡变化时,这里的内容会随之变化。注意id必须为@android:id/tabcontent

布局构建完毕后。下一步要做的,就是如何为这个布局添加子选项卡了。

首先,让我们的activty继承自TabActivity

public class ActTabActivityDemo1 extends TabActivity

在onCreate时获得tabHost对象,并添加选项卡

_tabHost = getTabHost();

AddTabPage1(); //执行添加子选项卡的方法

我们看下AddTabPage1()方法的具体实现。

Intent internt1 = new Intent();
        internt1.setClass(this,Act1.class);
        
        TabSpec tabSpec = _tabHost.newTabSpec("act1");
        //指定选项卡的显示名称
        tabSpec.setIndicator("选项卡一");
        //指定跳转方向
        tabSpec.setContent(internt1);          
        _tabHost.addTab(tabSpec);

如上面的代码所示,我们构建了一个TabSpec 对象,并调用_tabHost.addTab(tabSpec);方法,将这个对象加入到选项卡集合中。

TabSpec 是一个 选项卡对象,或者说是 TabSpec 描述一个选项卡的。通过

tabSpec.setIndicator 指定选项卡的显示名称。

tabSpec.setContent(internt1);  指定跳转方向,在这里指定了当顶部的标签卡被指定时,执行的Intent 对象。我们常常使用Intent 来做窗体间的跳转。

完成了上述步骤后,就可以具体实现 具体的选项卡 里的布局(内容)了。

下面贴出完成的Activity代码

package demo.TabActivityDemo1;

import android.app.Activity;
import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class ActTabActivityDemo1 extends TabActivity  {
     private TabHost _tabHost;
    
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        _tabHost = getTabHost();
        
        AddTabPage1();
        
        AddTabPage2();
        
        AddTabPage1();
    }

private void AddTabPage1() {
        // TODO Auto-generated method stub
        
        Intent internt1 = new Intent();
        internt1.setClass(this,Act1.class);
        
        TabSpec tabSpec = _tabHost.newTabSpec("act1");
        //指定选项卡的显示名称
        tabSpec.setIndicator("选项卡一");
        //指定跳转方向
        tabSpec.setContent(internt1);          
        _tabHost.addTab(tabSpec);
    }
    
    private void AddTabPage2() {
        // TODO Auto-generated method stub
        
        Intent internt1 = new Intent();
        internt1.setClass(this,Act2.class);
        
        TabSpec tabSpec = _tabHost.newTabSpec("act2");
        tabSpec.setIndicator("选项卡二");
        tabSpec.setContent(internt1);          
        _tabHost.addTab(tabSpec);
    }
}

完整的代码下载

时间: 2024-08-05 07:02:55

【转】选项卡的切换的相关文章

【Little Demo】左右按钮tab选项卡双切换

通过前一篇文章 从简单的Tab标签到Tab图片切换 的说明,相关效果也就可以实现了. 1.左右按钮tab选项卡双切换 很明显,左右两个按钮是 absolute 布局,另外就是内容部分和Tab标签部分. 1) 先实现Tab内容和标签部分的显示: HTML代码: <div class="tab-Infomations"> <div class="arrows"></div> <div class="tab-conten

一个双层选项卡自动切换的小练习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

JS对于导航栏、下拉菜单以及选项卡的切换操作、大图轮播(主要练习对于样式表的操作)

1.导航拦以及下拉菜单 css样式表代码 .div1 { width: 100px; height: 30px; background-color: red; float: left; margin-right: 10px; } .div1-div { width: 100%; height: 400px; background-color: green; margin-top: 30px; display: none; } JS脚本代码 <!DOCTYPE html> <html xm

jQuery的DOM操作实例(1)——选项卡&amp;&amp;Tab切换

一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍历的一种方法,参数是元素的索引 .index() .要注意index是基于0开始的:如果index为负数,则指示从集合结尾开始的位置. .index()方法搜索与参数表示的对象匹配的元素,并返回相应元素的索引值.如果找到了匹配的元素,从0开始返回:如果没有找到匹配的元素,返回-1. 经常要用inde

常见选项卡内容切换+折叠+展开效果实现

1.选项卡效果预览 2.源码与简要说明 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>切换选项卡功能实现</title> 6 <link rel="stylesheet" href="css/switchTab.css" /> 7 </head> 8 <

HTML+JS+DOM【选项卡自动切换】

最终效果图(鼠标无操作会自动切换选项卡): 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="gb2312" /> 5 <title>无标题文档</title> 6 <style> 7 body, ul, li { 8 font-family:"黑体"; 9 margin:0; 10 padding:0; 11 } 12 ul,

android--解决方案--自定义tabhost(动态添加选项+带自动水平滑动选项卡+手势切换选项卡及内容功能)

本文主要解决自定义tabhost的实现,以及集成通过代码动态添加选项卡功能.选项卡水平自动滑动功能.以及通过手势来切换选项卡功能. 下面跟我一起来完成这个完美的解决方案: 1.定义tabwidget选项卡的布局:tab_button.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/r

点击选项卡内容切换代码

<!DOCTYPE html> <html  lang="en" class="no-js"> <head> <meta charset="utf-8"> <title>TAB切换</title> <script src="12.js"></script> <link type="text/css" rel

Tab选项卡 延迟切换效果js实现

try.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="try.css"> <script type="text/javascript&qu