1、选项卡TabHost介绍
TabHost可以方便地在窗口上放置多个标签页，每个标签页相当于获得了一个与外部容器大小相同的组件摆放区域
TabHost是一个简单的容器，提供如下两种方法来创建选项卡
newTabSpec(String tag):创建选项卡
addTab(TabHost.TabSpec tabSpec):添加选项卡
使用TabHost有三种方法

2、方法1，继承TabActivity
主布局文件不需要定义TabHost组件，这里用三个垂直的LinearLayout作为标签页，每个标签页里面有两个TextView组件，main_tab.xml代码如下：

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabcontent"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- 定义第一个标签页的内容 -->
    <LinearLayout
        android:id="@+id/tab01"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="第一个标签页的第1个TextView组件"
            android:textSize="8pt" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="第一个标签页的第2个TextView组件"
            android:textSize="8pt" />
    </LinearLayout>
    <!-- 定义第二个标签页的内容 -->
    <LinearLayout
        android:id="@+id/tab02"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="第二个标签页的第1个TextView组件"
            android:textSize="8pt" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="第二个标签页的第2个TextView组件"
            android:textSize="8pt" />
    </LinearLayout>
    <!-- 定义第三个标签页的内容 -->
    <LinearLayout
        android:id="@+id/tab03"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="第三个标签页的第1个TextView组件"
            android:textSize="8pt" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="第三个标签页的第2个TextView组件"
            android:textSize="8pt" />
    </LinearLayout>
</FrameLayout>

在Java代码中将Activity继承TabActivity，具体代码如下：


package com.example.tabhosttest;

import android.app.TabActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.TabHost;
import android.widget.TabHost.OnTabChangeListener;
import android.widget.Toast;


public class MainActivity extends TabActivity
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        //setContentView(R.layout.main_tab);
        // 获取该Activity里面的TabHost组件
        TabHost tabHost = getTabHost();
        LayoutInflater.from(this).inflate(R.layout.main_tab,  
                tabHost.getTabContentView(), true);
        // 创建第一个Tab页
        /*TabHost.TabSpec tab1 = tabHost.newTabSpec("tab1")
                .setIndicator("标签页一") // 设置标题
                .setContent(R.id.tab01); //设置内容
        // 添加第一个标签页
        tabHost.addTab(tab1);
        TabHost.TabSpec tab2 = tabHost.newTabSpec("tab2")
                .setIndicator("标签页二")
                .setContent(R.id.tab02);
        // 添加第二个标签页
        tabHost.addTab(tab2);
        TabHost.TabSpec tab3 = tabHost.newTabSpec("tab3")
                .setIndicator("标签页三")
                .setContent(R.id.tab03);
        // 添加第三个标签页
        tabHost.addTab(tab3);*/
        
        /* 以上创建和添加标签页也可以用如下代码实现 */
        tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("标签页一").setContent(R.id.tab01));
        tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("标签页二").setContent(R.id.tab02));
        tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("标签页三").setContent(R.id.tab03));
        
        //标签切换事件处理，setOnTabChangedListener  
        tabHost.setOnTabChangedListener(new OnTabChangeListener(){    
        @Override  
        // tabId是newTabSpec参数设置的tab页名，并不是layout里面的标识符id
        public void onTabChanged(String tabId) {  
           if (tabId.equals("tab1")) {   //第一个标签  
               Toast.makeText(MainActivity.this, "点击标签页一", Toast.LENGTH_SHORT).show();
           }  
           if (tabId.equals("tab2")) {   //第二个标签  
               Toast.makeText(MainActivity.this, "点击标签页二", Toast.LENGTH_SHORT).show();
           }  
           if (tabId.equals("tab3")) {   //第三个标签  
               Toast.makeText(MainActivity.this, "点击标签页三", Toast.LENGTH_SHORT).show();
           }  
        }              
       }); 
    }
}

这里有两个地方注意一下，第一没有使用setContentView，而是用inflate方法；第二在设置标签页改变监听器时，onTabChanged的参数tabId是使用newTabSpec方法的参数设置的标签页名称，而不是布局文件中标签页的标识符Id；第三为了测试方便使用了Toast，
关于inflate和Toast，下面再学习，先简单了解一下
LayoutInflater的作用是将xml布局文件实例话，Toast是在屏幕上显示提示信息
点击第二个标签页之后，显示效果如下图9-2-1所示：

图 9-2-1

 

3、方法2，在布局文件中使用TabHost，不用继承TabActivity
使用findViewById获取TabHost组件
1 在界面布局中定义TabHost组件，并为该组件定义选项卡内容
2 使用findViewById获取TabHost组件
3 通过TabHost对象的方法来创建和添加选项卡
布局文件为activity_main.xml如下：

<TabHost
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
     android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1">


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


       <!-- TabWidget组件id值不可变-->
       <TabWidget 
           android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
       </TabWidget>


       <!-- FrameLayout布局，id值不可变-->
       <FrameLayout 
           android:id="@android:id/tabcontent"
           android:layout_width="fill_parent"
           android:layout_height="fill_parent"
           android:layout_above="@android:id/tabs">


           <!-- 第一个tab的布局 -->  
           <LinearLayout  
               android:id="@+id/tab1"  
               android:layout_width="match_parent"  
               android:layout_height="match_parent" >  


               <TextView  
                    android:layout_width="wrap_content"  
                    android:layout_height="wrap_content"  
                    android:text="第一个tab的布局" />  
           </LinearLayout>  


           <!-- 第二个tab的布局 -->  
           <LinearLayout  
               android:id="@+id/tab2"  
               android:layout_width="match_parent"  
               android:layout_height="match_parent" >  


               <TextView  
                    android:layout_width="wrap_content"  
                    android:layout_height="wrap_content"  
                    android:text="第二个tab的布局" />  
           </LinearLayout>  


            


       </FrameLayout>     
    </LinearLayout>   
</TabHost>

 

java代码如下：

package com.example.tabhost;


import android.app.Activity;
import android.os.Bundle;
import android.widget.TabHost;


public class MainActivity extends Activity {


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        setContentView(R.layout.activity_main);


        TabHost tab = (TabHost) findViewById(android.R.id.tabhost);  

        //初始化TabHost容器
        tab.setup();             
        //在TabHost创建标签，然后设置：标题／图标／标签页布局  
        tab.addTab(tab.newTabSpec("tab1").setIndicator("本地音乐" , null).setContent(R.id.tab1));  
        tab.addTab(tab.newTabSpec("tab2").setIndicator("网络音乐" , null).setContent(R.id.tab2));    
      
    }
    
}

这段非转载代码，用的和作者不是一个xml，效果图如下：

4、方法3基本和方法2类似，不用继承TabActivity，只是Tab的内容分开到单独的xml文件，每个标签页都需要inflate一次，和方法2最大的区别就是标签页分开到不同的xml文件中
tab1对应的tab1.xml：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tab01"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第一个标签页的第1个TextView组件"
        android:textSize="8pt" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第一个标签页的第2个TextView组件"
        android:textSize="8pt" />
</LinearLayout>

tab2对应的tab2.xml：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tab02"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第二个标签页的第1个TextView组件"
        android:textSize="8pt" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第二个标签页的第2个TextView组件"
        android:textSize="8pt" />
</LinearLayout>

tab3对应的tab3.xml：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tab03"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第三个标签页的第1个TextView组件"
        android:textSize="8pt" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第三个标签页的第2个TextView组件"
        android:textSize="8pt" />
</LinearLayout>

主布局文件main.xml：

<?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:layout_weight="1">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </FrameLayout>
    </LinearLayout>
</TabHost>

Java代码如下：


package com.example.tabhosttest;

import android.app.Activity;
import android.app.TabActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.TabHost;
import android.widget.TabHost.OnTabChangeListener;
import android.widget.Toast;


public class MainActivity extends Activity
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        // 方法2、3使用：
        setContentView(R.layout.main);
        // 获取该Activity里面的TabHost组件
        // 方法1使用：
        // TabHost tabHost = getTabHost();
        // 方法1使用：
        // LayoutInflater.from(this).inflate(R.layout.main_tab, tabHost.getTabContentView(), true);
        // 方法2、3使用
        TabHost tabHost = (TabHost)findViewById(R.id.tabhost);
        tabHost.setup();
        // 方法3使用，动态载入xml，不需要Activity
        LayoutInflater.from(this).inflate(R.layout.tab1, tabHost.getTabContentView());
        LayoutInflater.from(this).inflate(R.layout.tab2, tabHost.getTabContentView());
        LayoutInflater.from(this).inflate(R.layout.tab3, tabHost.getTabContentView());
        // 创建第一个Tab页
        /*TabHost.TabSpec tab1 = tabHost.newTabSpec("tab1")
                .setIndicator("标签页一") // 设置标题
                .setContent(R.id.tab01); //设置内容
        // 添加第一个标签页
        tabHost.addTab(tab1);
        TabHost.TabSpec tab2 = tabHost.newTabSpec("tab2")
                .setIndicator("标签页二")
                .setContent(R.id.tab02);
        // 添加第二个标签页
        tabHost.addTab(tab2);
        TabHost.TabSpec tab3 = tabHost.newTabSpec("tab3")
                .setIndicator("标签页三")
                .setContent(R.id.tab03);
        // 添加第三个标签页
        tabHost.addTab(tab3);*/
        
        /* 以上创建和添加标签页也可以用如下代码实现 */
        tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("标签页一").setContent(R.id.tab01));
        tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("标签页二").setContent(R.id.tab02));
        tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("标签页三").setContent(R.id.tab03));
        
        //标签切换事件处理，setOnTabChangedListener  
        tabHost.setOnTabChangedListener(new OnTabChangeListener(){    
        @Override  
        // tabId是newTabSpec第一个参数设置的tab页名，并不是layout里面的标识符id
        public void onTabChanged(String tabId) {  
           if (tabId.equals("tab1")) {   //第一个标签  
               Toast.makeText(MainActivity.this, "点击标签页一", Toast.LENGTH_SHORT).show();
           }  
           if (tabId.equals("tab2")) {   //第二个标签  
               Toast.makeText(MainActivity.this, "点击标签页二", Toast.LENGTH_SHORT).show();
           }  
           if (tabId.equals("tab3")) {   //第三个标签  
               Toast.makeText(MainActivity.this, "点击标签页三", Toast.LENGTH_SHORT).show();
           }  
        }              
       }); 
    }
}

 


 

 

Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生