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

浅浅的花香味﹌ 2021-09-25 23:44 234阅读 0赞

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));
    
        }