Android TabHost中实现标签的滚动以及一些TabHost开发的奇怪问题

最近在使用TabHost的时候遇到了一些奇怪的问题，在这里总结分享备忘一下。

首先说一点TabActivity将会被FragmentActivity所替代，但是本文中却是使用的TabActivity。

下面说说本程序能够实现的功能：

  1. 实现TabHost中的标题栏能够横向滚动；
  2. 自定义标题栏的大小和样式；
  3. 自定义标题栏的分割线的样式；

下面分几步来分别实现以上的功能：

第一步，先实现一个基本的TabHost的展现

详细的说明可以在网上其它地方搜的，主要就是注意一点，控件的id的是固定的不能随便更改，并且@和id之间不能加+;

Activity的代码如下：

public class TabhostTestActivity extends TabActivity implements
        TabContentFactory {
    private final String[] tabTitle = { "测试Tab标签1", "测试Tab标签2", "测试Tab标签3",
            "测试Tab标签4", "测试Tab标签5", "测试Tab标签6", "测试Tab标签7", "测试Tab标签8",
            "测试Tab标签9" };

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tabhost);
        TabHost th = getTabHost();
        for (int i = 0; i < tabTitle.length; i++) {
            TextView view = (TextView) getLayoutInflater().inflate(
                    R.layout.tabwighet, null);
            view.setText(tabTitle[i]);
            th.addTab(th.newTabSpec(tabTitle[i]).setIndicator(view)
                    .setContent(this));
        }
    }

    @Override
    public View createTabContent(String tag) {
        View view = new View(this);
        if (tabTitle[0].equals(tag)) {
            view.setBackgroundColor(Color.BLUE);
        } else if (tabTitle[1].equals(tag)) {
            view.setBackgroundColor(Color.CYAN);
        } else if (tabTitle[2].equals(tag)) {
            view.setBackgroundColor(Color.DKGRAY);
        } else if (tabTitle[3].equals(tag)) {
            view.setBackgroundColor(Color.GRAY);
        } else if (tabTitle[4].equals(tag)) {
            view.setBackgroundColor(Color.GREEN);
        } else if (tabTitle[5].equals(tag)) {
            view.setBackgroundColor(Color.LTGRAY);
        } else if (tabTitle[6].equals(tag)) {
            view.setBackgroundColor(Color.MAGENTA);
        } else if (tabTitle[7].equals(tag)) {
            view.setBackgroundColor(Color.RED);
        } else if (tabTitle[8].equals(tag)) {
            view.setBackgroundColor(Color.YELLOW);
        }
        return view;
    }
}

对应的layout的xml如下：

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

    <TabHost
        android:id="@android: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="wrap_content"
                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>
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tv_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:gravity="center"
    android:singleLine="true" />

运行后的效果图如下（平板1280*800的设备）：

第二步，给标签栏添加横向的滚动操作

这个很简单，只需要修改一下tabhost.xml即可：

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

    <TabHost
        android:id="@android: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" >

            <HorizontalScrollView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:fillViewport="true"
                android:scrollbars="none" >

                <TabWidget
                    android:id="@android:id/tabs"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" >
                </TabWidget>
            </HorizontalScrollView>

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >
            </FrameLayout>
        </LinearLayout>
    </TabHost>

</LinearLayout>

运行效果如下：

第三步，修改标签的宽度和高度

这里要改2个地方，一个是activity中，一个是tabwighet.xml中；

首先说明一下tabwighet.xml修改，代码如下：

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

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:gravity="center"
        android:singleLine="true" />

</LinearLayout>

其中需要注意一点，设置标签的宽度和高度不能设置到LinearLayout上，否则设置的宽度和高度不起作用。

Activity的修改就很简单了，根据tabwighet.xml的修改稍微调整一下代码即可，修改的代码如下：

          LinearLayout view = (LinearLayout) getLayoutInflater().inflate(
                     R.layout.tabwighet, null);
             ((TextView) view.findViewById(R.id.tv_title)).setText(tabTitle[i]);

运行的效果如下：

第四步，修改标签的样式，增加背景图片和选中的状态，以及选中后的字体的颜色

首先修改tabhost.xml文件，为HorizontalScrollView和FrameLayout添加设置background的属性，图片自己选个即可。代码如下：

<HorizontalScrollView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/ic_tab_header_background"
                android:fillViewport="true"
                android:scrollbars="none" >

                <TabWidget
                    android:id="@android:id/tabs"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" >
                </TabWidget>
            </HorizontalScrollView>

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/ic_tab_body_background" >
            </FrameLayout>

然后在drawable文件夹中添加2个selector，一个是用来设置选中的标签的背景的，一个是用来设置选中的字体颜色变化的，代码如下：

 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:drawable="@drawable/tabbar_bg_selected" android:state_selected="true"></item>
     <item android:drawable="@android:color/transparent" android:state_selected="false"></item>
</selector>
 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:color="#9d9d9d" android:state_selected="false"></item>
     <item android:color="@android:color/black" android:state_selected="true"></item>
 </selector>

最后修改tabwighet.xml将样式添加到标签上：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:background="@drawable/selector_tab_header_item_background"
    android:gravity="center_horizontal"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:gravity="center"
        android:singleLine="true"
        android:textColor="@drawable/selector_tab_header_item_txt_color" />
</LinearLayout>

运行效果如下：

第五步，添加tabhost中标签间的分割线

修改tabhost.xml的代码为：

　　　　 <TabWidget
                    android:id="@android:id/tabs"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:divider="@drawable/ic_tabbar_divider" >
  　　</TabWidget>

效果图如下：

以上几步就完成了我们预定的3个功能。

下面是我在开发中遇到的几个特使的问题，总结一下并列出我的解决方法：

1.标签的宽度总是设置不成功——请参照第三步操作，这里注意设置最外边的view的宽度是不能控制标签的宽度的。

2.标签间设置的自定义分割图片总是不显示——检查AndroidManifest.xml中是不是设置了application的 android:theme属性，如果设置成了@android:style/Theme.NoTitleBar，那么设置的分割是不能正常显示的（初步 测试设置了与NoTitleBar有关的样式的属性都不能显示），如果设置这个属性是为了隐藏actionbar，建议修改成 @android:style/Theme.DeviceDefault.NoActionBar。

时间： 2024-07-29 14:38:03

Android TabHost中实现标签的滚动以及一些TabHost开发的奇怪问题的相关文章

Android TabHost中实现标签的滚动

http://www.cnblogs.com/shirley-1019/archive/2013/04/10/3012824.html 非常漂亮的一段代码: public class TabhostTestActivity extends TabActivity implements       TabContentFactory {   private String[] lables = new String[] { "首页", "消息", "朋友&qu

Android 布局中的include标签使用

Android 布局中的include标签使用 最近在布局时,有好多页面都是有共同特点的,比如标题:一个同样的样式! 如下图所示: 如果给每个页面都单独的写一个标题的布局那就太麻烦了,如果能写一个标题布局,其它页面重用该多好! 这个时候,<include> 就隆重登场了! 写一个标题的布局 title.xml: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:an

android中include标签使用详解

android中include标签是为了便于控件的覆用的一个很好解决方案. 但是也有一些需要注意的地方,下面是本人在项目中碰到过的一个问题,做此记录,便于以后查看. include标签用法. 1.新建一个xml文件,命名 head.xml head.xml文件内容如下: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.

android中include标签的使用

转自:http://blog.sina.com.cn/s/blog_a364999b01017gxi.html android中include标签是为了便于控件的覆用的一个很好解决方案. 但是也有一些需要注意的地方,下面是本人在项目中碰到过的一个问题,做此记录,便于以后查看. include标签用法. 1.新建一个xml文件,命名 head.xmlhead.xml文件内容如下:<?xml version="1.0" encoding="utf-8"?>&

Android View中滚动相关

方法 scrollTo: (内容的左上角)达到某个地点 scrollBy: 根据当前位置,再移动多少 属性: mScrollX, 以下是文档解释 The offset, in pixels, by which the content of this view is scrolled horizontally. mScrollY, 以下是文档解释 The offset, in pixels, by which the content of this view is scrolled vertica

二十二、android中application标签说明

<application> <applicationandroid:allowClearUserData=["true" | "false"]android:allowTaskReparenting=["true" | "false"]android:backupAgent="string"android:debuggable=["true" | "false

Android application 和 activity 标签详解

extends:http://blog.csdn.net/self_study/article/details/54020909 Application 标签 android:allowTaskReparenting Android:allowTaskReparenting=["true" | "false"] 表明了这个应用在 reset task 时,它的所有 activity 是否可以从打开它们的 task 栈中迁移到它们声明的 taskAffinity 亲和

Android:WebView中对图片注册上下文菜单

前言 今天一朋友问我一个问题,就是如何在WebView控件中的图片增加上下文菜单,以便增加保存图片等功能.今天就给他简单做了一个演示Demo,现写下来,给有相同问题的朋友提供些许思路吧. 概要实现 其实这个功能很简单,没有太复杂的东西,就是对WebView的控件的使用,一是给WebView注册了上下文菜单事件,二是在响应事件中去判断事件源的类型,如果是图片类型,则把url取出来 注册上下文菜单事件 这个就比较简单了通过下面的代码即可完成. WebView vw = (WebView) findV

[Android]AndroidDesign中ActionBar探究1

概述 从Google IO 2013大会以来越来越多的Android应用开始遵循Android的设计风格,简单的就是google play和Gmail,在国内我们常用的软件像知乎.印象笔记,主要的界面主要是左侧的抽屉菜单(参照).顶部和底部的ActionBar(参照)等.由于以前都是遵循Ios的设计开始开发的一些,现在在公司,公司开始推崇Android Desgin(我们公司总是走在前列啊,现在Team 开发的 Version Control开始在Git开发),我们也必须要看下ActionBar