美文网首页
TabHost实现简单Tab切换

TabHost实现简单Tab切换

作者: 一凡和梓墨 | 来源:发表于2016-12-20 14:43 被阅读699次

    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
    否则将出现类似报错:

    301144310711274.jpg
     <?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);
    

    预览:
    点击"黄色"标签

    291123247589258.jpg
    点击"红色"标签 291123323378709.jpg

    方法二:继承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(TabHost+RadioGroup)
    http://www.cnblogs.com/tinyphp/p/3875190.html

    相关文章

      网友评论

          本文标题:TabHost实现简单Tab切换

          本文链接:https://www.haomeiwen.com/subject/ysaxvttx.html