android之TabWidget选项卡

1 概览

l  TabWidget与TabHost。tab组件一般包括TabHost和TabWidget、FrameLayout，且TabWidget、FrameLayout属于TabHost。

l  是否继承TabActivity的问题

l  实现步骤。两种实现方式，一种是将每个Tab的布局嵌在TabHost中的FrameLayout中，每个Tab的内容布局与显示都在FrameLayout中进行，缺点是布局会显得很臃肿；一种是每个Tab从FrameLayout中独立出来，以Activity呈现，这样使得每个Tab有单独的布局。

Widget在顶部的情形：

3 主要布局

3.1 TabMain布局

方式一：

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="60dip"
            android:layout_alignParentBottom="true"
            android:background="#424242" >
        </TabWidget>

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >

            <LinearLayout
                android:id="@+id/theme"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical" >

                <TextView
                    android:id="@+id/theme_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Tab1" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/wallpaper"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical" >

                <TextView
                    android:id="@+id/wallpaper_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Tab2" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/iconbg"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical" >

                <TextView
                    android:id="@+id/iconbg_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Tab3" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/screenlock"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical" >

                <TextView
                    android:id="@+id/screenlock_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Tab4" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/effect"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical" >

                <TextView
                    android:id="@+id/effect_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Tab5" />
            </LinearLayout>
        </FrameLayout>
    </RelativeLayout>

</TabHost>

方式二：

<?xml version="1.0" encoding="utf-8"?>

 <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"
     android:background="@color/wcity_normal_bg" >

    <LinearLayout
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         android:orientation="vertical" >

    <FrameLayout
         android:id="@android:id/tabcontent"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         android:layout_weight="1" >
    </FrameLayout>

    <TabWidget
         android:id="@android:id/tabs"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:background="@drawable/tab"
         />

     </LinearLayout>

</TabHost>

3.2 TabItem布局

这一部分中方式一与方式二没有什么区别，只有表示形式的区别。比如，根据需求，Tab可以

只以文字呈现，

可以只以图片呈现，

可以同时有图片和文字

其中有文字和图片的布局如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center_horizontal|center_vertical"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/tabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_ispressed"
        android:gravity="center_horizontal|center_vertical"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

</LinearLayout>

3.3点击状态

Tab键点击后状态的问题，如果点击后，没有状态提示对用户是不友好的。点击状态的实现就是对TabItem布局的android:background进行设置。例如：

上述TabItem中LinearLayout的android：background设置的属性：@drawable/bg_ispressed

其中bg_ispressed文件如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/tab_selected_bg" android:state_pressed="false" android:state_selected="true"/>

</selector>

tab_selected_bg即是点击后变换的图片效果。

3.4 关于Tab位置的问题

Tab标签显示在顶部还是底部也是经常会遇到的问题。

通常TabMain布局中TabWidget在FrameLayout上面默认就是显示在顶部了，如果改成在底部显示，首先会想到的是直接调换顺序，将TabWidget放在FrameLayout后面。

情形一：

问题来了，Tab栏直接消失掉（我试过），后来解决方法是：FrameLayout中添加属性：android:layout_weight="1"。这种情形可以解决的条件是，TabWidget和FrameLayout被嵌套在LinearLayout布局中，如果是其他则行不通。

情形二：

TabWidget与FrameLayout顺序任意，在TabWidget中添加属性

android:layout_alignParentBottom="true"

当然，这种情形适合TabWidget和FrameLayout被嵌套在RelativeLayout布局中，同样的，如果是其他则行不通。

注：以上两种情形也不是绝对的，只实践过以上两种情形，至于其他布局就不清楚了，具体问题具体分析吧。

4 继承TabActivity?

4.1 继承TabActivity与不继承的问题

继承不继承TabActivity，看自己习惯了，都能正确实现，没什么区别，至于在代码方面唯一的区别在于：

不继承TabActivity而继承Activity的需要在代码中加入：

mTabHost.setup();

4.2 主要代码

直接继承自Activity的代码

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TabHost;
import android.widget.TextView;

public class TabDesignActivity extends Activity{
    private Context mContex = this;
    private TabHost mTabHost;

    private String TAB1 = "tab1";
    private String TAB2 = "tab2";
    private String TAB3 = "tab3";
    private String TAB4 = "tab4";
    private String TAB5 = "tab5";

    private List<LinearLayout> menuItemList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tab_main);
        menuItemList = new ArrayList<LinearLayout>();

        mTabHost = (TabHost) findViewById(R.id.tabhost);
        mTabHost.setup();

        mTabHost.addTab(mTabHost.newTabSpec("tab1").setIndicator(getMenuItem(R.drawable.tab1_ispressed, TAB1)).setContent(R.id.tab1));
        mTabHost.addTab(mTabHost.newTabSpec("tab2").setIndicator(getMenuItem(R.drawable.tab2_ispressed, TAB2)).setContent(R.id.tab2));
        mTabHost.addTab(mTabHost.newTabSpec("tab3").setIndicator(getMenuItem(R.drawable.tab3_ispressed, TAB3)).setContent(R.id.tab3));
        mTabHost.addTab(mTabHost.newTabSpec("tab4").setIndicator(getMenuItem(R.drawable.tab4_ispressed, TAB4)).setContent(R.id.tab4));
        mTabHost.addTab(mTabHost.newTabSpec("tab5").setIndicator(getMenuItem(R.drawable.tab5_ispressed, TAB5)).setContent(R.id.tab5));
    }

    public View getMenuItem(int imgID, String textID){
        LinearLayout ll = (LinearLayout) LayoutInflater.from(mContex).inflate(R.layout.tab_item, null);
        ImageView imgView = (ImageView)ll.findViewById(R.id.icon);
        imgView.setBackgroundResource(imgID);
        TextView textView = (TextView)ll.findViewById(R.id.name);
        textView.setText(textID);
        menuItemList.add(ll);
        return ll;
    }
}

继承自TabActivity的实现

/**
 * @author aaron
 */
package com.aaron.activity;

import java.util.ArrayList;
import java.util.List;

import android.annotation.SuppressLint;
import android.app.TabActivity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TabHost;
import android.widget.TextView;
import android.widget.TabHost.TabSpec;

import com.aaron.util.R;

/**
 * @author aaron
 *
 */
public class TabWidget extends TabActivity {// 声明TabHost对象
    private TabHost mTabhost;
    private LayoutInflater mInflater;
    private List<TextView> mtext;
    private List<ImageView> mimage;
    private List<TabSpec> mTabSpec;
    private List<LinearLayout> linearLayout;
    private List<Intent> intent;
    private Context mContext;
    private static final String[] tabTitle = { "Tab1", "Tab2", "Tab3", "Tab4","Tab5"};
    private static final int[] tabImage = { R.drawable.main1
        , R.drawable.main2, R.drawable.main3, R.drawable.main4,R.drawable.main5};

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tab_main);
        mContext = this;
        mInflater = LayoutInflater.from(this);
        mTabhost = (TabHost) findViewById(android.R.id.tabhost);
        mTabSpec = new ArrayList<TabSpec>();
        linearLayout = new ArrayList<LinearLayout>();
        mtext = new ArrayList<TextView>();
        intent = new ArrayList<Intent>();

        //****************************************************************
        //若是引用有图片的布局
        mimage = new ArrayList<ImageView>();
        //****************************************************************

        creatTab();

    }

    @SuppressLint("NewApi")
    public void creatTab() {
        for (int i = 0; i < tabTitle.length; i++) {
            mTabSpec.add(mTabhost.newTabSpec(tabTitle[i]));

            //****************************************************************
            //选择使用哪种布局
            //****************************************************************
            linearLayout.add((LinearLayout) mInflater.inflate(
                    R.layout.tabwidget2, null));

            mtext.add((TextView) linearLayout.get(i)
                    .findViewById(R.id.tab_Text_name));
            mtext.get(i).setText(tabTitle[i]);

            //****************************************************************
            //若是引用有图片的布局依次添加进图片
            mimage.add((ImageView) linearLayout.get(i)
                    .findViewById(R.id.tab_Image_name));
            mimage.get(i).setImageResource(tabImage[i]);
            //****************************************************************

            // 依次加入每个Tab的Activity
            switch (i) {
            case 0:
                intent.add(new Intent().setClass(TabWidget.this,
                        UdoActivity.class));
                break;
            case 1:
                intent.add(new Intent().setClass(TabWidget.this, UdoActivity.class));
                break;
            case 2:
                intent.add(new Intent().setClass(TabWidget.this,
                        UdoActivity.class));
                break;
            case 3:
                intent.add(new Intent().setClass(TabWidget.this,
                        UdoActivity.class));
                break;
            case 4:
                intent.add(new Intent().setClass(TabWidget.this,
                        UdoActivity.class));
                break;
            }
            mTabSpec.get(i).setIndicator(linearLayout.get(i));

            mTabSpec.get(i).setContent(intent.get(i));

            mTabhost.addTab(mTabSpec.get(i));

        }
    }

4.3 关键代码详解

1）mTabHost.newTabSpec("tab1")用来new一个tab，同时标记这个tab的tag。

2）setContent()用来处理点击这个tab后的动作，可以是这个Activity下的一个组件，如setContent(R.id.tab1)，也可以是一个intent，比如：setContent(newIntent(this, SubTab.class))。

3）setIndicator()用来标记这个tab的名字，可以是setIndicator("tab1")，也可以包含其他的属性，如图片：setIndicator( "名称",getResources().getDrawable(android.R.tab1))。

4）tabs.addTab(spec)将这个tab添加进TabHost。

5）getMenuItem(R.drawable.tab_ispressed,TAB1)设置其中一Tab被按下的状态改变，R.drawable.tab_ispressed布局如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/tab1_menu_effect_selected" android:state_pressed="false" android:state_selected="true"/>
    <item android:drawable="@drawable/tab1_menu_effect"/>

</selector>
时间： 2024-08-11 01:34:52

android之TabWidget选项卡的相关文章

修炼-------------Android TabHost,TabWidget选项卡总结

修炼-------------Android TabHost,TabWidget选项卡总结 Android之TabHost TabHost,个人理解为选项卡的容器,是一种特殊的FrameLayout布局(帧布局) 根据SDK文档, Container for a tabbed window view. This object holds two children: a set of tab labels that the user clicks to select a specific tab,

Android 自学之选项卡TabHost

选项卡(TabHost)是一种非常实用的组件,TabHost可以很方便地在窗口上放置多个标签页,每个标签页相当于获得了一个与外部容器相同大小的组建摆放区域.通过这种方式,就可以在一个容器中放置更多组件,例如许多手机系统会在同一个窗口第一多个标签页:来显示通话记录,包括“未接来电”,“已接来电”,“呼出电话”等. TabHost仅仅是一个简单的容器,他提供了如下两个方法来创建选项卡.添加选项卡. newTabSpec(String tag) : 创建选项卡 addTab(TabHost.TabSp

android学习--TabHost选项卡组件

TabHost是一种非常实用的组件,TabHost可以很方便地在窗口上放置多个标签页,每个标签页获得了一个与外部容器相同大小的组件摆放区域.在手机系统的应用类似"未接电话"."已接电话"."呼出电话"等. 1 . TabHost提供了两个方法来创建选项卡.添加选项卡 newTabSpec(String tag)  : 创建选项卡 addTab(TabHost.TabSpec  tabSpec) : 添加选项卡 2.TabHost 切换选项卡触发的

android TabHost（选项卡）

1:在布局文件中配置选项卡的内容 <?xml version="1.0" encoding="utf-8"?> <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost" android:layout_width="match_parent" and

Android TabHost切换选项卡实现数据实时刷新

手机界面大小有限,使用TabHost可以达到在一个Activity中放入多个容器(界面)的效果.但存在一个问题是,当数据信息在一个容器(界面)中有所改变时,需要在用户切换选项卡到其他容器(界面)的时候实时刷新数据. 如图,在”发布板报“页面发布新的板报,当用户点击“浏览板报”或者“管理板报”选项卡时要刷新数据——显示出刚刚发布的板报. 解决问题的关键在于对选项卡修改事件的监听,根据Tab ID来调用相应的方法. 核心代码: @Override public void onCreate(Bundl

Android中的选项卡（Tab）使用案例

使用Tab组件的步骤说明: 1.在布局文件中使用FrameLayout列出Tab组件及Tab中的内容组件. 2.Activity要继承TabActivity. 3.调用TabActivity的getTabHost()方法得当TabHost对象. 4.通过TabHost创建Tab选项. 下面来看一个小例子: <!--xml--> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

【转】Android选项卡置底的方法

转载地址:http://www.oschina.net/code/snippet_163910_6092 发现很多Android应用的选项卡 都是显示在页面底部的,网上有资料:通过反射获取TabWidget中的私有变量,改变其值.今天反编译了腾讯微薄,发现实现这个很简单,只需将布局文件 中<TabWidget />标签加个android:layout_gravity="bottom",选项卡就会显示在页面底部,默认是 android:layout_gravity="

Android基础——高级UI组件：选项卡

布局文件 <?xml version="1.0" encoding="utf-8"?> <TabHost xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.c

Android：简单实现ViewPager+TabHost+TabWidget实现导航栏导航和滑动切换

viewPager是v4包里的一个组件,可以实现滑动显示多个界面. android也为viewPager提供了一个adapter,此adapter最少要重写4个方法: public int getCount() public boolean isViewFromObject(View view, Object o) public void destroyItem(ViewGroup container, int position, Object object)  public Object in