当前位置： 移动技术网 > IT编程>移动开发>Android > 详解Android应用中使用TabHost组件进行布局的基本方法

详解Android应用中使用TabHost组件进行布局的基本方法

2019年07月24日  | 移动技术网IT编程  | 我要评论

大禹城邦三期,装修污染检测,高东升升官记

tabhost布局文件

我们先来了解一下布局文件的基本内容：
1. 根标签及id

设置android自带id : xml布局文件中, 可以使用 标签设置, 其中的id 需要引用 android的自带id :

android:id=@android:id/tabhost ;

gethost()获取前提 : 设置了该id之后, 在activity界面可以使用 gethost(), 获取这个tabhost 视图对象;

示例 :

复制代码 代码如下:

<tabhost android:id="@android:id/tabhost" android:layout_height="match_parent" android:layout_width="match_parent"></tabhost>

2. tabwidget组件

选项卡切换 : 该组件是选项卡切换按钮, 通过点击该组件可以切换选项卡;

设置android自带id : 这个组件的id要设置成android的自带id : android:id=@android:id/tabs ;

tabhost必备组件 : 该组件与framelayout组件是tabhost组件中必备的两个组件;

切换按钮下方显示 : 如果想要将按钮放到下面, 可以将该组件定义在下面, 但是注意,framelayout要设置android:layout_widget = 1;

设置tabwidget大小 : 如果想要设置该按钮组件的大小, 可以设置该组件与framelayout组件的权重;

示例 :

复制代码 代码如下:

<tabwidget android:id="@android:id/tabs" android:layout_height="wrap_content" android:layout_width="fill_parent" android:orientation="horizontal/"></tabwidget>

3. framelayout组件

组件作用 : 该组件中定义的子组件是tabhost中每个页面显示的选项卡, 可以将tabhost选项卡显示的视图定义在其中;

设置android自带id : 这个组件的id要设置成android的自带的id : android:id=@android:id/tabcontent ;

示例 :

复制代码 代码如下:

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

示例

2016412154201842.gif (354×175)

上图为最终效果图
代码结构图

2016412154240467.gif (221×432)

main.xml

<?xml version="1.0" encoding="utf-8"?> 
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:id="@+id/hometabs" 
 android:orientation="vertical" 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent"> 
 <!-- tabhost必须包含一个 tabwidget和一个framelayout--> 
 <tabhost android:id="@+id/tabhost" 
  android:layout_width="fill_parent" 
  android:layout_height="wrap_content" 
  > 
  <linearlayout 
   android:orientation="vertical" 
   android:layout_width="fill_parent" 
   android:layout_height="fill_parent"> 
   <!-- tabwidget的id属性必须为 @android:id/tabs-->    
   <tabwidget android:id="@android:id/tabs" 
    android:orientation="horizontal" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"> 
   </tabwidget> 
   <!-- framelayout的id属性必须为 @android:id/tabcontent--> 
    <framelayout android:id="@android:id/tabcontent" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent"> 
     <textview android:id="@+id/view1" 
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent"/> 
     <textview android:id="@+id/view2" 
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent"/> 
     <textview android:id="@+id/view3" 
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent"/> 
    </framelayout> 
   
   </linearlayout> 
 </tabhost> 
</linearlayout>

java代码如下

package cn.com.taghost.test; 
 
import android.app.activity; 
import android.os.bundle; 
import android.widget.tabhost; 
import android.widget.tabwidget; 
 
public class taghosttest2 extends activity { 
 @override 
 public void oncreate(bundle savedinstancestate) { 
  super.oncreate(savedinstancestate); 
  setcontentview(r.layout.main); 
  // 获取tabhost对象 
  tabhost tabhost = (tabhost) findviewbyid(r.id.tabhost); 
  // 如果没有继承tabactivity时，通过该种方法加载启动tabhost 
  tabhost.setup(); 
  tabhost.addtab(tabhost.newtabspec("tab1").setindicator("第一个标签", 
    getresources().getdrawable(r.drawable.icon)).setcontent( 
    r.id.view1)); 
 
  tabhost.addtab(tabhost.newtabspec("tab3").setindicator("第三个标签") 
    .setcontent(r.id.view3)); 
 
  tabhost.addtab(tabhost.newtabspec("tab2").setindicator("第二个标签") 
    .setcontent(r.id.view2)); 
 } 
}

运行得到正确的结果。
废话连篇：这里需要注意的是
第一：布局文件的格式。以及tabwidget和framelayout的id属性值。
第二：tabwidget代表的是标签部分，framelayout代表的点击标签后看到的内容部分。framelayout里面声明的组件意为具备成为标签内容的资格，具体的还要在代码中具体指定。
你是否也想要这种结果呢。让标签在下部分显示

2016412154317508.gif (362×516)

那么你只需要给main.xml进行下布局修改就可以了。

main.xml

<?xml version="1.0" encoding="utf-8"?> 
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:id="@+id/hometabs" android:orientation="vertical" 
 android:layout_width="fill_parent" android:layout_height="fill_parent"> 
 <!-- tabhost必须包含一个 tabwidget和一个framelayout--> 
 <tabhost android:id="@+id/tabhost" android:layout_width="fill_parent" 
  android:layout_height="wrap_content"> 
  <linearlayout android:orientation="vertical" 
   android:layout_width="fill_parent" android:layout_height="fill_parent"> 
 
   <!-- framelayout的id属性必须为 @android:id/tabcontent--> 
   <framelayout android:id="@android:id/tabcontent" 
    android:layout_width="fill_parent" android:layout_height="fill_parent"> 
    <textview android:id="@+id/view1" android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:text="hello baby!" 
     /> 
    <textview android:id="@+id/view2" android:layout_width="fill_parent" 
     android:layout_height="fill_parent" /> 
    <textview android:id="@+id/view3" android:layout_width="fill_parent" 
     android:layout_height="fill_parent" /> 
   </framelayout> 
   <relativelayout android:layout_width="fill_parent" 
    android:layout_height="fill_parent"> 
 
    <!-- tabwidget的id属性必须为 @android:id/tabs--> 
    <tabwidget android:id="@android:id/tabs" 
     android:orientation="horizontal" android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:layout_alignparentbottom="true" 
     android:paddingbottom="0dp" 
     > 
    </tabwidget> 
   </relativelayout> 
  </linearlayout> 
 </tabhost> 
</linearlayout>

为了让标签和父容器底部持平，我们使用了android:layout_alignparentbottom="true"，该属性只有在relativelayout布局中才会存在哦、这也是为什么我们将tabwidget放入一个relativelayout中的原因。
此外，在lineaerlayout布局中，tabwidget和framelayout的位置可是调换了哦。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网