zoukankan      html  css  js  c++  java
  • Android:TabHost实现Tab切换

     TabHost是整个Tab的容器,包含TabWidget和FrameLayout两个部分,TabWidget是每个Tab的表情,FrameLayout是Tab内容。

    实现方式有两种:

    1、继承TabActivity

    2、继承Activity类

    >>两个方法实例下载

    方法一:继承TabActivity

    从TabActivity中用getTabHost()方法获取TabHost,然后设置标签内容

    布局:

    1、TabHost    必须设置android:id为@android:id/tabhost
    2、TabWidget   必须设置android:id为@android:id/tabs
    3、FrameLayout   必须设置android:id为@android:id/tabcontent

    否则将出现类似报错:

    <?xml version="1.0" encoding="utf-8"?>
    <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@android:id/tabhost"
         >
        
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        >
        
        <TabWidget 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@android:id/tabs"
            ></TabWidget>
        
        <FrameLayout 
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:id="@android:id/tabcontent"
            >
            <LinearLayout 
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/widget_layout_red"
                android:background="#ff0000"
                android:orientation="vertical"
                ></LinearLayout>
            
             <LinearLayout 
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/widget_layout_yellow"
                android:background="#FCD209"
                android:orientation="vertical"
                ></LinearLayout>
            
        </FrameLayout>
    </LinearLayout>
    </TabHost>

    继承TabActivity

    public class MainActivity extends TabActivity {
    private TabHost tabhost;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.demo);
            
            //从TabActivity上面获取放置Tab的TabHost
            tabhost = getTabHost();
    
            tabhost.addTab(tabhost
                     //创建新标签one
                    .newTabSpec("one")
                    //设置标签标题
                    .setIndicator("红色")
                    //设置该标签的布局内容
                    .setContent(R.id.widget_layout_red));
            tabhost.addTab(tabhost.newTabSpec("two").setIndicator("黄色").setContent(R.id.widget_layout_yellow));
        }
    
    
    }

    其中创建标签的方法:

     tabhost.addTab(tabhost
     .newTabSpec("one")
     .setIndicator("红色")
     .setContent(R.id.widget_layout_red));

    也可以拆分写成:

     TabHost.TabSpec tab1 = tabhost.newTabSpec("one");
     tab1.setIndicator("红色");
     tab1.setContent(R.id.widget_layout_red);       
     tabhost.addTab(tab1);

    预览:

    点击"黄色"标签

     

     点击"红色"标签 

     方法二:继承Activity类

    布局:

    1、TabHost    可自定义id
    2、TabWidget   必须设置android:id为@android:id/tabs
    3、FrameLayout   必须设置android:id为@android:id/tabcontent

    public class MainActivity extends Activity{
    private TabHost tabhost;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.demo);
            
            //得到TabHost对象实例
            tabhost =(TabHost) findViewById(R.id.mytab);
            //调用 TabHost.setup()
            tabhost.setup();
            //创建Tab标签
            tabhost.addTab(tabhost.newTabSpec("one").setIndicator("红色").setContent(R.id.widget_layout_red));
            tabhost.addTab(tabhost.newTabSpec("two").setIndicator("黄色").setContent(R.id.widget_layout_yellow));
        
        }
    
    
    }

    注意的是:

    在使用TabHost切换activity时出现Did you forget to call 'public void setup..

    改用第一种方法吧

    其他实例:

    Android:布局实例之模仿微信Tab

  • 相关阅读:
    vue语法
    第3章 语言基础(上)
    第2章 HTML中的JavaScript
    第1章 什么是JavaScript
    附录 A ES6附加特性
    第14章 跨浏览器开发技巧
    第13章 历久弥新的事件
    第12章 DOM操作
    第11章 代码模块化
    第10章 正则表达式
  • 原文地址:https://www.cnblogs.com/tinyphp/p/3875105.html
Copyright © 2011-2022 走看看