选项卡(TabHost)使用

作者: Lee_5566 | 来源:发表于2019-12-23 16:10 被阅读0次
    image.png

    目录

    TabHost

    TabHost实现Tab切换, 实现类似通话记录界面的切换效果.

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

    布局:

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

    实战

    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>
    
                <!-- 第二个tab的布局 -->
                <LinearLayout
                    android:id="@+id/tab3"
                    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>
    

    代码:

    package com.example.user.tabhost;
    
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.widget.TabHost;
    
    public class MainActivity extends AppCompatActivity {
    
        @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));
            tab.addTab(tab.newTabSpec("tab3").setIndicator("呼出通话" , null).setContent(R.id.tab3));
    
        }
    }
    
    

    运行效果:


    image.png

    参考

    Android选项卡TabHost功能和用法

    相关文章

      网友评论

        本文标题:选项卡(TabHost)使用

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