深入浅出android/ophone UI实现水平布局的Tab控件

competerH_programing

墨衍会员 · AI 创作全网分发码龄17年

关注

转载最新推荐文章于 2026-05-12 05:32:40 发布 1k 阅读 AI 写同款· GEO 优化 ›

QTabWidget的QTabBar位于左侧且横向如何使QTabWidget的QTabBar位于左侧且横向? 阅读详情

深入浅出android/ophone UI实现水平布局的Tab控件

作者：anychen

Tab UI控件是非常常见、常用的导航UI组件，使用它能够很方便地迅速切换页面。甚为强大的android当然也少不了它，在android/ophone平台上也可以很方便地使用TabHost,TabWidget来实现你的Tab。有点遗憾的是目前系统自带的UI布局只能实现垂直方向的Tab UI, 在某些项目我们不免需要水平方向的Tab UI，如果你有这种需求你可以参考本文所介绍方法。本文所述方法参考API 源代码内部实现。
1预备知识：TabHost,TabWidget, TabSpec简介
TabHost：是整个Tab ui的布局容器实质上就是是一个扩展的FrameLayout,所有的Tab UI相关组件必须位于该布局里，必须包含的组件有：
      名为TabWidget的（选项卡组件布局）和选项卡内容容器
TabWidget：选项卡组件布局容器，实质上一个线性布局LinearLayout，所有Tab选项控件都放在这里，你可以使用tabHost.addTab(TabSpec tab       Spec)方法将不同的选项卡内容添加的选项卡布局容器中，或许你会有点迷糊这明明是TabSpec嘛，不要急接着看
TabSpec:是一个与选项卡相关描述文件，其内部包含了一个类型为View[更确切地说是RelativeLayout]的tabIndicator,这个tabIndicator就是选项卡对应的视图，当你在执行t         abHost.addTab(TabSpec tabSpec)时，内部会有个操作将此tabIndicator添加到TabWidget中：下面是摘自API的TabHost.java中关于addTab的一段代码
         public void addTab(TabSpec tabSpec) {
          //...
           mTabWidget.addView(tabIndicator);
           mTabSpecs.add(tabSpec);
             //...
        }
外加一个固定ID为 android:id="@android:id/tabcontent"的FrameLayout，用于容纳Tab选项卡对应的内容
2正题：一步一步编写水平方向的Tab：
第一步：改写你的tab_indicator：直接从SDK..\platforms\android-ndata\res\layout中:拷贝tab_indicator.xml命名为tab_indicator_horizontal.xml 存放于工程中layout目录中，并修改如下：

第二步：编写水平Tab选项卡显示状态背景：android:background="@drawable/tab_indicator_horizontal"
同样直接从SDK..\platforms\android-ndata\res\drawable中直接拷贝tab_indicator.xml并命名为tab_indicator_horizontal.xml 存放于工程中drawable目录中,内容如下，很简单相信你应该明白是怎么回事，这个文件不需要改动，拿来就用:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected" />
    <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_selected" />

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

<item android:state_pressed="true" android:drawable="@drawable/tab_press" />
</selector>
说明：上面的drawable/tab_unselected,drawable/tab_selected实质就是图片，android本身提供的名为9patch的可拉伸自适应填充图，因为系统本身自带的是垂直方向的图，不适合在这里使用，你需要自己修改上述图片，为了简要说明这里直接使自定义图形来适配：
第三步：使用自定义图形来适配选项卡显示状态背景：
tab_focus.xml,其他如tab_unselected你亦可参照此格式自定义，这里不再重复简述
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient android:startColor="#88FF88" android:endColor="#55EE55"
            android:angle="0"/>
    <corners android:radius="6dp" />
</shape>

第四步：编写Tab ui布局main_tab_horizontal.xml:
注意下面图片使用的的定义，请自行修改
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:background="@drawable/style_theme"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<TabHost android:id="@+id/tabHost" android:layout_width="fill_parent"
  android:layout_height="fill_parent" android:layout_weight="1">
  
  <LinearLayout android:orientation="horizontal"
   android:layout_width="fill_parent" android:layout_height="fill_parent">
   
   <TabWidget android:id="@android:id/tabs"
    android:layout_height="wrap_content" android:layout_width="wrap_content"
    android:layout_weight="0" />

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

<HorizontalScrollView android:layout_width="wrap_content"
     android:layout_height="fill_parent" android:fillViewport="true">
     <LinearLayout android:id="@+id/id_tab_view1" android:orientation="horizontal"
      android:layout_width="fill_parent" android:layout_height="fill_parent">

      <ImageView android:layout_width="wrap_content"
       android:layout_height="wrap_content" android:layout_gravity="center_horizontal|center_vertical"
       android:src="@drawable/tree2" />
     </LinearLayout>
    </HorizontalScrollView>

第五步：编写测试代码：
public class TestActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main_tab_horizontal);
  parseHorizontalTab();
}

Drawable icon_tab_1, icon_tab_2, icon_tab_3, icon_tab_4;

private void parseHorizontalTab() {
  // 注意下面的代码用的是android.R.id.tabhost，在布局中有2个ID参数是固定的需要使用固定的ID:

  // 选项卡：TabWidget->android:id/tabs
  // 选项内容：FrameLayout android:id="android:id/tabcontent"
  final TabHost tabHost = (TabHost) findViewById(R.id.tabHost);
  tabHost.setup();
  icon_tab_1 = this.getResources().getDrawable(R.drawable.icon1);
  icon_tab_2 = this.getResources().getDrawable(R.drawable.icon2);
  icon_tab_3 = this.getResources().getDrawable(R.drawable.icon3);
  icon_tab_4 = this.getResources().getDrawable(R.drawable.icon4);
  createHorizontalTab(tabHost);
}

private void createHorizontalTab(TabHost tabHost) {
  tabHost.addTab(tabHost
    .newTabSpec("tab1")
    .setIndicator(
      createIndicatorView(this, tabHost, icon_tab_1, "tab1"))
    .setContent(R.id.id_tab_view1));
  tabHost.addTab(tabHost
    .newTabSpec("tab2")
    .setIndicator(
      createIndicatorView(this, tabHost, icon_tab_2, "tab2"))
    .setContent(R.id.id_tab_view2));

  tabHost.addTab(tabHost
    .newTabSpec("tab3")
    .setIndicator(
      createIndicatorView(this, tabHost, icon_tab_3, "tab3"))
    .setContent(R.id.id_tab_view3));
  tabHost.addTab(tabHost
    .newTabSpec("tab4")
    .setIndicator(
      createIndicatorView(this, tabHost, icon_tab_4, "tab4"))
    .setContent(R.id.id_tab_view4));

  TabWidget tw = tabHost.getTabWidget();
  tw.setOrientation(LinearLayout.VERTICAL);//注意在此处设置此参数使TAB 垂直布局
}

/**
* 创建自定义的选项卡视图
*
* @param context
* @param tabHost
* @param icon
* @return
*/
private View createIndicatorView(Context context, TabHost tabHost,
   Drawable icon, String title) {

LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

View tabIndicator = inflater.inflate(R.layout.tab_indicator_horizontal,
tabHost.getTabWidget(), false);

  final ImageView iconView = (ImageView) tabIndicator
    .findViewById(R.id.icon);
  final TextView titleView = (TextView) tabIndicator
    .findViewById(R.id.title);
  titleView.setText(title);
  iconView.setImageDrawable(icon);
  return tabIndicator;
}

}

结束：运行效果：

原文出处： http://www.ophonesdn.com/blog/yeya/showBlog/publicshow/050933dd-30bc-4b9f-8cc6-0c2e20ab7eb3?count=&max=&index=

收录于