`
小杨学JAVA
  • 浏览: 900655 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

TabHost 用法 — 定义Tab标签样式

 
阅读更多

转载自：http://www.cnblogs.com/wader2011/archive/2011/10/13/2209668.html

在上一篇文章“TabHost用法”中我们介绍了通过TabHost实现标签页效果。但是在实际项目中我们可能更希望定义自己的Tab标签样式使界面效果更佳。既然不能改变系统的Tab样式，那么我们可以选择隐藏系统的东西，使用自己定义的东西（这种方式很好用，以后会详细介绍）。反编译新浪微博的项目后会发现，他们在布局中隐藏了TabWidget即Tab标签而使用一组RadioButton来代替。既然是自己定义的，那肯定是可以自己决定显示样式了，那我们的问题也就解决了。这里我使用的是“TabHost用法—两种实现方式”一文种提到的第二种实现方式，继承Activity来使用TabHost的。先把代码贴上来（红色字体部分为修改或添加的代码）。

TabHostActivity.java

public class TabHostActivity extends Activity implements

       OnCheckedChangeListener {

    private TabHost tabHost;

 

    private Intent certificateIntent;

    private Intent feeIntent;

    private Intent scoreIntent;

    private Intent studyIntent;

    private Intent moreIntent;

 

    @Override

    publicvoid onCreate(Bundle savedInstanceState) {

       super.onCreate(savedInstanceState);

       setContentView(R.layout.tab);

       // tabHost = getTabHost();

       tabHost = (TabHost) findViewById(R.id.my_tabhost);

       LocalActivityManager groupActivity =

new LocalActivityManager(this,false);

       groupActivity.dispatchCreate(savedInstanceState);

       tabHost.setup(groupActivity);

       initIntent();

       addSpec();

       ((RadioGroup) findViewById(R.id.tab_radiogroup))

              .setOnCheckedChangeListener(this);

 

    }

 

    /**

     * 初始化各个tab标签对应的intent

     */

    privatevoid initIntent() {

       studyIntent = new Intent(this, StudyActivity.class);

       scoreIntent = new Intent(this, ScoreActivity.class);

       feeIntent = new Intent(this, FeeActivity.class);

       certificateIntent = new Intent(this, CertificateActivity.class);

       moreIntent = new Intent(this, MoreActivity.class);

    }

 

    /**

     * 为tabHost添加各个标签项

     */

    privatevoid addSpec() {

tabHost.addTab(this.buildTagSpec("tab_study", R.string.study_progress,

              R.drawable.account01, studyIntent));

tabHost.addTab(this.buildTagSpec("tab_score", R.string.test_score,

              R.drawable.account02, scoreIntent));

       tabHost.addTab(this.buildTagSpec("tab_fee", R.string.fee_pay,

              R.drawable.account03, feeIntent));

       tabHost.addTab(this.buildTagSpec("tab_certificate",

              R.string.certificate_grant, R.drawable.account04,

              certificateIntent));

       tabHost.addTab(this.buildTagSpec("tab_more", R.string.more,

              R.drawable.account05, moreIntent));

    }

 

    /**

     * 自定义创建标签项的方法

     * @param tagName 标签标识

     * @param tagLable 标签文字

     * @param icon 标签图标

     * @param content 标签对应的内容

     * @return

     */

    private TabHost.TabSpec buildTagSpec(String tagName, int tagLable,

           int icon, Intent content) {

       returntabHost

              .newTabSpec(tagName)

              .setIndicator(getResources().getString(tagLable),

                     getResources().getDrawable(icon)).setContent(content);

    }

 

    @Override

    public void onCheckedChanged(RadioGroup group, int checkedId) {

       switch (checkedId) {

       case R.id.radio_button_study:

           tabHost.setCurrentTabByTag("tab_study");

           break;

       case R.id.radio_button_score:

           tabHost.setCurrentTabByTag("tab_score");

           break;

       case R.id.radio_button_certificate:

           tabHost.setCurrentTabByTag("tab_certificate");

           break;

       case R.id.radio_button_fee:

           tabHost.setCurrentTabByTag("tab_fee");

           break;

       case R.id.radio_button_more:

           tabHost.setCurrentTabByTag("tab_more");

           break;

       }

 

    }

}

tab.xml

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

<TabHost android:id="@+id/my_tabhost" android:layout_width="fill_parent"

         android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android">

    <LinearLayout android:orientation="vertical"

android:layout_width="fill_parent" android:layout_height="fill_parent">

       <FrameLayout android:id="@android:id/tabcontent"

                    android:layout_width="fill_parent" android:layout_height="0.0dip"

                      android:layout_weight="1.0" />

<TabWidget android:id="@android:id/tabs" android:visibility="gone"

android:layout_width="fill_parent" android:layout_height="wrap_content"

                    android:layout_weight="0.0" />

       <RadioGroup android:id="@+id/tab_radiogroup"

              android:background="@drawable/tabs_bg" android:layout_width="fill_parent"

          android:layout_height="wrap_content" android:gravity="center_vertical"

          android:layout_gravity="bottom" android:orientation="horizontal">

           <RadioButton android:id="@+id/radio_button_study"

              android:layout_marginTop="2.0dip" android:text="学习进度"

              android:drawableTop="@drawable/account01" style="@style/tab_button_bottom"

              android:checked="true" />

           <RadioButton android:id="@+id/radio_button_score"

              android:layout_marginTop="2.0dip" android:text="考试成绩"

              android:drawableTop="@drawable/account02" style="@style/tab_button_bottom" />

           <RadioButton android:id="@+id/radio_button_certificate"

              android:layout_marginTop="2.0dip" android:text="证书发放"

              android:drawableTop="@drawable/account03" style="@style/tab_button_bottom" />

           <RadioButton android:id="@+id/radio_button_fee"

              android:layout_marginTop="2.0dip" android:text="费用缴纳"

              android:drawableTop="@drawable/account04" style="@style/tab_button_bottom" />

           <RadioButton android:id="@+id/radio_button_more"

              android:layout_marginTop="2.0dip" android:text="更多"

              android:drawableTop="@drawable/account05" style="@style/tab_button_bottom" />

       </RadioGroup>

    </LinearLayout>

</TabHost>

styles.xml

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

<resources>

    <!-- TabHost标签按钮样式 -->

    <style name="tab_button_bottom">

       <item name="android:textSize">12px</item>

       <item name="android:textColor">#ffffffff</item>

       <item name="android:ellipsize">marquee</item>

       <item name="android:gravity">center_horizontal</item>

       <item name="android:background">@drawable/tab_btn_bg</item>

       <item name="android:layout_marginTop">2.0dip</item>

       <item name="android:button">@null</item>

       <item name="android:paddingTop">6dip</item>

       <item name="android:drawablePadding">4dip</item>

       <item name="android:layout_width">fill_parent</item>

       <item name="android:layout_height">wrap_content</item>

       <item name="android:layout_weight">1.0</item>

       <item name="android:singleLine">true</item>

    </style>

   

    <!-- 页面标题LinearLayout样式 -->

    <style name="activity_title_background">

    <item name="android:background">@drawable/title_background</item>

       <item name="android:layout_width">fill_parent</item>

       <item name="android:layout_height">wrap_content</item>

       <item name="android:layout_alignParentTop">true</item>

       <item name="android:gravity">center</item>

    </style>

   

    <!-- 界面标题TextView样式 -->

    <style name="activity_title_text">

       <item name="android:textSize">14dip</item>

       <item name="android:textColor">@drawable/white</item>

       <item name="android:layout_width">wrap_content</item>

       <item name="android:layout_height">wrap_content</item>

       <item name="android:gravity">center</item>

    </style>

</resources>

运行结果如下图所示

 

程序重要部分：

1.  红色字体部分。

2.  布局文件tab.xml,可以看到该布局文件中将TabWidget隐藏（android:visibility="gone"）而以一个RadioGroup取而代之。

3.  为RadioGroup设置OnCheckedChangeListener监听，通过onCheckedChanged方法对各个RadioButton点击事件的处理完成标签切换。

 

其实我当初考虑过为什么要用RadioButton而不用普通的Button。后来通过自己做项目，发现使用RadioGroup有以下优点：

1.另外就是布局上比较方便易懂，不用再去用LinearLayout等布局去包含Button。

2. 我们可以很方便的获得当前选中的标签，当然通过TabHost的tabHost.getCurrentTabTag()和getCurrentTab()也是可以的。

3.设置监听很方便，只需要为RadioGroup设置监听就行了，程序中对应的代码是

((RadioGroup) findViewById(R.id.tab_radiogroup))

              .setOnCheckedChangeListener(this);

   如果用Button的话我们需要为所有的Button一个一个去设置监听，相对来说比较麻烦。

4.  或许最重要的一点是因为RadioButton本身就支持图片和文字的上下布局，只需指定图片和文字是什么就可以了而不需要我们自己去实现这种布局。

<RadioButton android:id="@+id/radio_button_more"

           android:layout_marginTop="2.0dip"

android:text="更多"

           android:drawableTop="@drawable/account05"

           style="@style/tab_button_bottom" />

当然如果如果RadioButton不能满足我们的项目需求，比如我们不需要图片又不想让文字靠底部显示，而是居中显示，这时我们就可以用其他组件代替RadioButton。其实我们可以通过修改或自定义等方式实现多种漂亮的效果，比如“人人网”手机客户端的个人主页中Tab标签是可以左右滑动的。

分享到：
| android tabhost 底部菜单
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    android tabhost用法 源码

    下面将详细介绍TabHost的使用方法，以及如何通过源码进行理解和实践。 一、TabHost的结构与工作原理 TabHost主要由两个核心组件组成：TabWidget和FrameLayout。TabWidget显示了可点击的标签，而FrameLayout用于...

    tab切换之tabhost模式

    在Android应用开发中，TabHost是一种常见的用于实现标签页切换的组件，它允许开发者在一个Activity中展示多个Fragments或者Views，通过不同的标签页来切换显示不同的内容。本篇将深入探讨TabHost的工作原理、实现...

    andorid中TabHost的使用

    在Android开发中，TabHost...总结，TabHost是构建多标签界面的关键组件，掌握其使用方法对于开发高效、用户友好的Android应用至关重要。结合源码理解和工具辅助，能更好地优化和调试TabHost相关的代码，提升应用质量。

    tabhost 动态改变tab的背景图

    总结来说，动态改变TabHost的tab背景图主要涉及到对TabHost和TabWidget的操作，包括在XML中定义基本布局，然后在Java代码中获取并修改tab的视图属性。这个过程对于创建灵活、交互丰富的Android应用是非常关键的，...

    TabHost标签

    在Android开发中，`TabHost`是一个非常重要的组件，它用于创建具有标签栏的界面，让用户可以通过不同的标签在多个视图之间切换。`TabHost`是Android提供的一个容器，可以容纳多个`TabWidget`（标签）和一个`...

    TabHost使用方法

    ### TabHost 使用方法详解 #### 一、TabHost 概述 TabHost 是 Android 提供的一个用于实现标签式导航的控件，它可以帮助开发者轻松地创建具有多个标签页的应用程序界面。通过 TabHost，用户可以在不同的标签页之间...

    tabhost标签页面简单实现

    你可以使用`TabHost.newTabSpec()`方法创建`TabSpec`，并调用`setIndicator()`设置标签的显示内容，`setContent()`设置关联的布局或者Intent。 ```java TabSpec spec1 = tabHost.newTabSpec("标签1"); spec1....

    Android TabHost组件使用方法详解

    在Android开发中，TabHost组件是一个非常实用的控件，用于创建带有标签页的应用界面，让用户可以在多个功能之间轻松切换。本文将详细讲解如何使用TabHost，并通过实例代码进行演示。 首先，TabHost的核心组成部分...

    Tabhost自定义背景样式

    在上面的代码中，`tab_host_background` 和 `tab_indicator` 是自定义的九宫格图片资源，用于控制TabHost的整体背景和标签指示器的样式。 通过以上步骤，我们就成功地实现了自定义的Tabhost背景样式，包括点击时...

    仿新浪微博tabhost实现

    在Android应用开发中，TabHost是一个非常重要的组件，它用于创建具有多个标签（Tab）的界面，每个标签...通过学习这个示例，开发者可以更好地掌握Android中的TabHost用法，从而创建出更加丰富和用户友好的应用界面。

    android开发 tabhost应用

    首先，创建一个新的样式文件（如styles.xml），定义一个自定义的Tab样式： ```xml &lt;style name="CustomTabText" parent="Widget.AppCompat.ActionBar.TabText"&gt; &lt;item name="android:textSize"&gt;16sp ...

    TabHost的各种实现方式

    你可以通过`TabHost.newTabSpec()`创建一个新的TabSpec，并使用`setIndicator()`设置标签和图标，使用`setContent()`指定Tab被点击后显示的内容。 3. **使用Intent**： - 在大多数情况下，Tab的内容是通过Intent...

    android TabHost 底部显示

    接着，为TabHost添加每个Tab，每个Tab需要一个TabSpec（标签规范）来定义其标签文本和内容。例如，添加两个Tab： ```java TabSpec tab1Spec = tabHost.newTabSpec("tab1"); tab1Spec.setIndicator("Tab 1") ....

    Tab与TabHost

    3. 添加Tab：使用`TabHost.newTabSpec()`方法创建Tab规格，然后设置Tab的标签、图标和对应的Intent。Intent通常指向一个Activity或者Fragment，用于加载Tab的内容。最后，使用`tabHost.addTab()`方法将Tab添加到...

    android的tabhost学习

    7. **自定义Tab样式** 如果需要自定义Tab的样式，例如改变文字颜色、背景等，可以通过创建自定义布局文件并将其设置为`TabSpec.setIndicator()`的参数来实现。 8. **注意点** - 在Android API 11及以上版本，...

    tabhost模仿网易新闻奥运版效果

    接下来，我们使用TabHost的addTab()方法来添加每个Tab。该方法接受TabSpec对象，我们可以设置Tab的标签文本、图标以及与之关联的Intent。Intent通常指向一个Fragment或者Activity，当用户点击Tab时，这个Intent会被...

    TabHost学习总结

    默认的Tab样式可能不符合设计需求，我们可以重写`TabSpec`的`setIndicator()`方法，使用自定义的View来设置标签的外观。 4. **源码分析**： 对于想要深入理解`TabHost`工作原理的开发者，阅读其源码是必要的。在...

    android自定义tabhost样式

    TabHost通常包含一个TabWidget（用于显示Tab标签）和一个FrameLayout（用于显示每个Tab对应的内容）。默认情况下，TabHost的样式可能不能满足所有设计需求，因此我们需要自定义其外观和行为。 1. 创建布局资源 在...

    tabhost实现Android底部导航

    这需要在布局文件中定义Tab的样式，然后在代码中替换掉默认的TabWidget。 7. **注意事项**： - 每个Tab的内容可以是Activity、View或Intent，但建议使用Fragment，因为Fragment更易于管理，且支持碎片回退栈。 - ...

    android中tabhost各种实例及用法

    3. 添加Tab：使用TabHost的addTab()方法来创建和添加新的标签页。每个标签页需要一个TabSpec对象，TabSpec可以通过TabHost的newTabSpec()方法创建。TabSpec的标签名、图标和对应的Activity或布局可以在这里设置。 `...

Magicbox
Global site tag (gtag.js) - Google Analytics